PDA

View Full Version : Need help placing Chrome a script into a layer...



mariavargas
08-12-2006, 10:18 PM
1) Script Title:
Chrome CSS Drop Down Menu (v2.0)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:
Love the drop-down, got it to work great after adjusting the CSS file, BUT, really want to place it into a LAYER so I can move it further down the page. I can get the link bar to go into the layer and display, but cannot get the drop-downs to move with it and be ontop of the page in the right position as the original code shows.

How do I change the code to adjust to function inside the LAYER. I tried changing it from <DIV> to <SPAN>, absolute positioning to relative, z-index, etc. Couldn't get it to do anything other than what it originally does!:eek:

Thanks!
I love DD :D
Maria Vargas

jscheuer1
08-13-2006, 05:40 AM
Layer is an outmoded HTML tag and also a loose term for certain concepts still valid in page design. I assume you mean the latter. Even so, your question is a little vague and the chrome menu is a bit tricky so, please provide a link to your problem page.

Generally, you can contain it in any static element though, ex (from the demo.htm - added container highlighted red):


<div style="width:500px;margin:0 auto;">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
</div>

mariavargas
08-13-2006, 05:21 PM
Hi John,
Thanks for answering. Yeah, I have an older version of Dreamweaver, but it works quite well usually. I got tired of using tables for positioning and started using the "Layer" function (????) such as,

<DIV ID="hawaii" STYLE="position:absolute; width:69px; height:35px; z-index:59; left: 682px; top: 664px"><IMG SRC="hawaii.jpg" WIDTH="97" HEIGHT="53"></DIV>

Don't have page online yet for you to view, but I added the additional code you sent and couldn't get the handle to move the "layer" (I don't know what else to call it). Just want it in a DIV container similar to the one above so I can move it down 1/3 of the way on the page instead of being stuck solid at the top. Anyway you can think of to do this is fine with me, doesn't have to be a <DIV> tag if there's a better way.

Thanks so much!
:rolleyes:
Maria Vargas

jscheuer1
08-13-2006, 06:20 PM
Well I did say it was a bit tricky and my example used a static positioned container. You want an absolutely positioned one. You can do that but, it cannot contain any of the class="dropmenudiv" divisions, ex (container highlight red):


<div style="position:absolute;width:500px;left:50%;top:300px;margin-left:-250px;">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>

mariavargas
08-14-2006, 03:41 PM
;) Hi John (Mad Professor!),
Yeah, that's all I was able to do before: place the menu in the DIV container and move it around, but not the drop-down which was the cool thing! Oh well, I guess I'll have to use it at the top of the page or not at all!:cool:
Thanks so much for your help, though, I really appreciate your time and effort...

Maria Vargas
;)

jscheuer1
08-14-2006, 05:13 PM
In my example, the drop downs followed the triggers to their new position on the page.