Results 1 to 6 of 6

Thread: Need help placing Chrome a script into a layer...

  1. #1
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need help placing Chrome a script into a layer...

    1) Script Title:
    Chrome CSS Drop Down Menu (v2.0)

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...rome/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!

    Thanks!
    I love DD
    Maria Vargas

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default More info on chrome drop-down problem

    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!

    Maria Vargas

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Chrome drop-down discussion continued...

    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!
    Thanks so much for your help, though, I really appreciate your time and effort...

    Maria Vargas

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In my example, the drop downs followed the triggers to their new position on the page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •