SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help me with drop down nav please.

    I recently made a drop down nav with nested lists and jQuery. But what I want the dropdown to do is to cover whatever other element is under it. Instead they jumble together which looks really messy. Is there is a easy way to fix this? Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Radecut. Welcome to the forums.

    Yes, there's always a way to fix something like this. Can you post a link so we can see what's going on?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the welcome! Heres a link to my problem:
    www.polymedsci.com/example.html

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hm, that dropdown is incomplete, as you can't hover over the sub links, so my advice would be to dump that version. It seems there's some transparency on the background of the sub list, but I can't for the life of me see where it's set. Weird. Anyhow, I'd suggest trying a better dropdown. Here's a simple one:

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    If you want something fancier but more reliable, try this:

    http://users.tpg.com.au/j_birch/plugins/superfish/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the links! I have decided to try the second one. I made a working suckerfish dropdown menu, but I need some help with incorporating superfish with it. I linked the Javascript, but I do not understand what to add to the CSS. Could you tell me?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Radecut View Post
    I do not understand what to add to the CSS. Could you tell me?
    Can you post a link to what you have so far? Otherwise, all we can do is suggest you look at how the Suckerfish menu works on their site. If you look at the source code and explore the CSS, you'll see how it works.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh wow again, the new menu still has the problem of hiding behind other elements, here's the link, is there an easy way to fix this?
    http://www.polymedsci.com/example.html

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Aye, 'tis very easy. Just add sommat like this:

    Code:
    #navigation {
    position: relative;
    top: 5px;
    text-align: left;
    display: block;
    padding: 0;
    margin: 0;
    z-index: 100;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! I really appreciate it. I never though it would be that easy. Thanks! Just for future reference, what does z-index do?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Radecut View Post
    Just for future reference, what does z-index do?
    Elements on a page basically layer on top of each other if there is any overlap, the elements later on the page having a higher stacking order. Your dropdown was "above" the following content in the code, so appeared behind it.

    You can change the stacking order with the use of z-index. However, to change the z-index of an element, it must have a position: setting (like position: relative etc.) The z-index: 100 was just a random number. The main content probably has a z-index of 1 or something like that—I can't remember. You could experiment with how low the z-index can go before it falls behind again, but usually one just sets a high z-index and that's it. You could set it to a million, if you wanted.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2008
    Location
    NE Ohio
    Posts
    117
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Where's your DTD?

    This seems akward: PMS can ensure the customers to get high quality products and first-rate support in the following areas:

    Don't you want to say, "ensure that customers get high quality products..." Perhaps say "our clients recieve" instead of "customers get." Just a suggestion.
    William Otis
    Flamenco aficionado and Freelance Web designer
    www.dreammakergraphics.com/

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You are linking to the same stylesheet 3 times?

    Code:
    <link href="style1.css" rel="stylesheet" type="text/css">
    <div class="shared">
    					<div id="newsarea">
    Remove the link element from your library items as they cannot go in the body of the html anyway as it is invalid and pointless to make browsers download the same file 3 times.

    The big images on the right should be inside a floated column (float:right) and not moved with relative position as currently they are sitting on top of your text content. You will very rarely move elements using relative position as it does not actually move anything physically but only visually; the space the relative element leaves behind is always preserved as though the element had never moved.,


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
  •