SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help in fixing vertical navigation

    Hi all,
    I have been scratching my head for 2 days in fixing it. Here is the problem - the links are not working, and it shown whole nav.gif. Please help. Thanks in advance.

    Here is the html:
    <div id="nav" >
    <ul id="nav" name="nav">
    <li id="n-main"><a href="/" title="welcome" >main</a></li>
    <li id="n-work"><a href="/work/" title="work samples">work</a></li>
    <li id="n-about"><a href="/about/" title="Find out more">about</a></li>
    <li id="n-contact"><a href="/contact/" title="Get in touch, hire me or ask me a question">contact</a></li>
    </ul>
    </div>

    Here's the CSS:
    #nav {
    position:absolute;
    top:259px;
    left:830px;
    width: 160px;
    height: 110px;
    background:url(/assets/images/nav.gif) no-repeat;
    margin: 0;
    padding: 0;
    float: left;
    }

    #nav ul li, #nav ul a {
    background:url(/images/nav.gif) no-repeat;
    display:block;
    height:28px;
    overflow: hidden;
    text-indent:-5000px;
    width:80px;
    }
    li#n-main a {
    background-position:0px;
    }
    li#n-work a {
    background-position:0pt -28px;
    }
    li#n-about a {
    background-position:0pt -56px;
    }
    li#n-contact a {
    background-position:0pt -84px;
    }
    li#n-main {
    background-position:-80px 0pt;
    }
    li#n-work a {
    background-position:-80px -28px;
    }
    li#n-about a {
    background-position:-80px -56px;
    }
    li#n-contact a {
    background-position:-80px -84px;
    }

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    #n-main {} has less power then # nav li {}, it needs to be #nav #n-main {}
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    #navx{
    position:absolute;
    top:259px;
    left:830px;
    width:260px;
    height:110px;
    background:#ffccff url(/assets/images/nav.gif) no-repeat;
    }
    
    ul{list-style:none;}
    
    #nav li,#nav a{
    background: url(http://www.google.nl/images/firefox/fox1.gif) 0 0 no-repeat;
    display:block;
    height:28px;
    overflow:hidden;
    text-indent:-5000px;
    }
    #nav #n-main{background-position:0 0;}
    #nav #n-work {background-position:0 -28px;}
    #nav #n-about{background-position:0 -56px ;}
    #nav #n-contact{background-position:0 -84px;}
    #n-main a{background-position:100&#37; 0;}
    #n-work a{background-position:100% -28px;}
    #n-about a{background-position:100% -56px;}
    #n-contact a {background-position:100% -84px;}
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <div id="navx">
    <ul id="nav">
    <li id="n-main"><a href="/xxxx" title="welcome" >main</a></li>
    <li id="n-work"><a href="/work/" title="work samples">work</a></li>
    <li id="n-about"><a href="/about/" title="Find out more">about</a></li>
    <li id="n-contact"><a href="/contact/" title="Get in touch, hire me or ask me a question">contact</a></li>
    </ul>
    </div>
    
    
    </body>
    </html>

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You also can't use the "nav" ID more than once, in Strict DOCTYPES the name attribute has been deprecated in all elements other than forms and form controls, and you really don't need that DIV around your list anyway.

  4. #4
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the fast reply! much appreciated !
    I have a question.
    Is it the right way to always add "ul{list-style:none;}" when using image replacement method in list?


    btw, this my first time to code a site in CSS first time. So I may sound silly to you guys.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Image replacement, CSS based menus, pretty much any time you don't want the bullets to appear.

  6. #6
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Dan!

    But the navigation run in to another problem... which is the hover state shifted and the nav.gif is repeating when viewing in IE7.
    Any hacks can fix it ?

    sigh .. I need to postpone the launch date of my first site. >_<

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another problem I can see here is you are applying the nav image to the background of both the <li> and <a>, so one will cover the other. Also, in IE the negative text indent on the <li> can shift the entire <a> element off the page. Hover state? - you have no hover rules in your css ...? Got a link to the tempory site?

    As for the list-style, as the bullets are generated by the <li>s, I normally apply the list style to the <li> rather than the <ul> - works either way, just i like to apply it to the element that produces it.

  8. #8
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, Centauri!

    Here's the updated CSS with the help of all4Nerds.

    Code CSS:
    #navx {
    background:transparent url(/assets/images/nav.gif) no-repeat scroll 0&#37;;
    height:110px;
    left:830px;
    position:absolute;
    top:259px;
    width:80px;
    }
    ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }
    #nav li, #nav a {
    background:transparent url(/assets/images/nav.gif) no-repeat scroll 0%;
    display:block;
    height:28px;
    overflow:hidden;
    text-indent:-5000px;
    }
    #nav #n-main {
    background-position:0pt;
    }
    #nav #n-work {
    background-position:0pt -28px;
    }
    #nav #n-about {
    background-position:0pt -56px;
    }
    #nav #n-contact {
    background-position:0pt -84px;
    }
    #n-main a {
    background-position:0pt;
    }
    #n-work a {
    background-position:0pt -28px;
    }
    #n-about a {
    background-position:0pt -56px;
    }
    #n-contact a {
    background-position:0pt -84px;
    }
    #n-main a:hover {
    background-position:-81px 0pt;
    }
    #n-work a:hover {
    background-position:-81px -28px;
    }
    #n-about a:hover {
    background-position:-81px -56px;
    }
    #n-contact a:hover {
    background-position:-81px -84px;
    }

    Should I take out the background from either one of them ?

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would change the #nav li, #nav a css to just #nav a so that the <li>s don't have any other styles applied (so the backgrounds are on the <a>s only) and delete the first 4 background-position css rules.

  10. #10
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response !
    Do you mean I have to delete the first lines in #navx ?

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    No only use the background image on the A Tag remove the red, if possible Please upload your page so we can see what you try to do

    #nav li,
    #nav a {
    background:transparent url(/assets/images/nav.gif) no-repeat scroll 0&#37;;
    display:block;
    height:28px;
    overflow:hidden;
    text-indent:-5000px;
    }

  12. #12
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem solved !
    Thanks all of you good people !!!
    I feel touched and encouraged.


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
  •