SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best method to create text-based, horizontal nav bar using CSS?

    I'm trying to create a text-based, horizontal navigation bar with horizontal
    submenus and background images-based on a tutorial/stylesheet I found
    online. I cut and pasted the code from this online tutorial:

    http://veerle-v2.duoh.com/blog/comme...s_with_images/

    Here's a link to the sample menu in that tutorial:

    http://www.duoh.com/csstutorials/2le...navigation.css

    Here's the link directly to the stylesheet from the tutorial:

    http://www.duoh.com/csstutorials/2le...navigation.css

    --->Unfortunately, something is broken in my code. The top-level of the
    menu shows up, but the first link (home) is cut in half and repeated with
    alternating hover-images on half of the word of the first link. None of the
    other links are hovering, nor are sub-menus showing up. BUMMER.

    It supposed to look like this:
    -->Top level AND sub-menus have same look/color-coding: red background;
    hover has lime-green background
    -->3 sub-menus should show up horizontally below the top level nav:
    ---->"christmas sweater FUN" submenu: is 800px wide (length of entire nav)
    ---->"shop" submenu is 293px wide. The right side of it should align with
    the right side of the parent link "shop."
    ---->"about" submenu is 186px wide and should be flush with the right side
    of the nav

    I'm hoping there is a simple fix to this that is easy to see for someone
    more experienced than me! This is my last major "technical hurdle" in my
    site development---any help you could offer would be greatly appreciated!
    Thanks so much in advance!

    HERE IS THE HTML CODE ON MY PAGE:

    Code:
    <div id="navbar">
    <ul id="navigation">
    
    <li><a href="#">home</a></li>
    
    <li><a href="#">sweater-izer APP</a></li>
    
    <li><a href="#">christmas sweater FUN</a></li>
    
    <li><a href="#">blog</a></li>
    
    <li><a href="#">shop</a></li>
    
    <li><a href="#">about</a></li>
    
    </ul>
    </div>
    
    HERE IS MY ATTEMPT AT THE STYLESHEET:
    Here is the code that I created based on the stylesheet in the example
    above:
    
    body {
       background-color: #ffffff;
       behavior:url("csshover.htc");
    }
    
    ul#navigation {
       list-style-type: none;
       padding: 0;
       margin: 0;
       border: 0;
       top: 0px;
       left: 0px;
       width: 800px;
       height: 43px;
       background: #ffffff url(navigation_over.gif) no-repeat;
    }
    
    a, a:link, a:visited {
       text-decoration: none;x
    }
    
    p, p a {
       color: #000000;
       font: 12px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial,
    sans-serif;
    }
    
    /*<group=level 1>*/
    
    ul#navigation li {
       padding: 0;
       margin: 0;
       display: block;
       float: left;
       text-indent: -9999px;
    }
    
    ul#navigation li a {
       border: 0;
       display: block;
       height: 43px;
       background: url(navigation.gif) no-repeat;
    }
    
    ul#navigation li a:hover {
       border: 0;
       display: block;
       background-image: url(navigation_over.gif);
    }
    
    /*</group>*/
    
    /*<group=level 1 ids>*/
    
    li#home a {
       width: 87px;
     }
    
    li#sweaterizerAPP a {
       width: 194px;
    }
    
    li#sweaterizerAPP a:link,
    li#sweaterizerAPP a:visited,
    li#sweaterizerAPP a:hover {
       background-position: -87px 0px;
    }
    
    li#christmassweaterfun a {
       width: 260px;
    }
    
    li#christmassweaterfun a:link,
    li#christmassweaterfun a:visited,
    li#christmassweaterfun a:hover {
       background-position: -281px 0px;
    }
    
    
    li#blog a {
       width: 80px;
    }
    
    li#blog a:link,
    li#blog a:visited,
    li#blog a:hover {
       background-position: -541px 0px;
    }
    
    li#shop a {
       width: 79px;
    }
    
    li#shop a:link,
    li#shop a:visited,
    li#shop a:hover {
       background-position: -621px 0px;
    }
    
    li#about a {
       width: 100px;
    }
    
    li#about a:link,
    li#about a:visited,
    li#about a:hover {
       background-position: -700px 0px;
    }
    
    
    /*</group>*/
    
    /*<group=level 2>*/
    
    
    #navigation li ul {
       display: block;
       visibility: hidden;
       position: absolute;
       left: 0px;
       width: 800px;
       margin: 0;
    }
    
    #navigation li:hover ul {
       visibility: visible;
       z-index: 100;
    }
    
    #navigation li#sub_fun ul {
       background: none;
       height: 43px;
       margin-left: 0px;
    }
    
    #navigation li#sub_shop ul {
       background: none;
       height: 43px;
       margin-left: 409px;
    }
    
    #navigation li#sub_about ul {
       background: none;
       height: 43px;
       margin-left: 614px;
    }
    
    
    * html #navigation li#sub_fun ul {
       margin-left: 0px;
    }
    
    * html #navigation li#sub_shop ul {
       margin-left: 409px;
    }
    
    
    * html #navigation li#sub_about ul {
       margin-left: 614px;
    }
    
    
    
    
    /*</group>*/
    
    /*<group=level 2 ids>*/
    
    ul#navigation li#fun ul li#generator a:link,
    ul#navigation li#fun ul li#generator a:visited {
       width: 115px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat 0px 0px;
    }
    
    ul#navigation li#fun ul li#generator a:hover {
       width: 115px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat 0px -43px;
    }
    
    ul#navigation li#fun ul li#timeline a:link,
    ul#navigation li#fun ul li#timeline a:visited {
       width: 92px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -207px 0px;
    }
    
    ul#navigation li#fun ul li#timeline a:hover {
       width: 92px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -207px -43px;
    }
    
    ul#navigation li#fun ul li#advent calendar a:link,
    ul#navigation li#fun ul li#advent calendar a:visited {
       width: 172px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -379px 0px;
    }
    
    ul#navigation li#fun ul li#advent calendar a:hover {
       width: 172px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -379px -43px;
    }
    
    ul#navigation li#fun ul li#sweater dance a:link,
    ul#navigation li#fun ul li#sweater dance a:visited {
       width: 160px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -539px 0px;
    }
    
    ul#navigation li#fun ul li#sweater dance a:hover {
       width: 160px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -539px -43px;
    }
    
    ul#navigation li#fun ul li#sweater-ometer a:link,
    ul#navigation li#fun ul li#sweater-ometer a:visited {
       width: 167px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -706px 0px;
    }
    
    ul#navigation li#fun ul li#sweater-ometer a:hover {
       width: 167px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -706px -43px;
    }
    
    ul#navigation li#fun ul li#more... a:link,
    ul#navigation li#fun ul li#more... a:visited {
       width: 94px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -800px 0px;
    }
    
    ul#navigation li#fun ul li#more... a:hover {
       width: 94px;
       height: 43px;
       background: url(navigation_sub_fun.gif) no-repeat -800px -43px;
    }
    
    
    ul#navigation li#shop ul li#sweaters a:link,
    ul#navigation li#shop ul li#sweaters a:visited {
       width: 106px;
       height: 43px;
       background: url(navigation_sub_shop.gif) no-repeat -506px 0px;
    }
    
    ul#navigation li#shop ul li#sweaters a:hover {
       width: 106px;
       height: 43px;
       background: url(navigation_sub_shop.gif) no-repeat -506px -43px;
    }
    
    ul#navigation li#shop ul li#custom a:link,
    ul#navigation li#shop ul li#custom a:visited {
       width: 98px;
       height: 43px;
       background: url(navigation_sub_shop.gif) no-repeat -612px 0px;
    }
    
    ul#navigation li#shop ul li#custom a:hover {
       width: 98px;
       height: 43px;
       background: url(navigation_sub_shop.gif) no-repeat -612px -43px;
    }
    
    ul#navigation li#shop ul li#more... a:link,
    ul#navigation li#shop ul li#more... a:visited {
       width: 89px;
       height: 43px;
       background: url(navigation_sub_shop.gif) no-repeat -710px 0px;
    }
    
    ul#navigation li#shop ul li#more... a:hover {
       width: 89px;
       height: 43px;
       background: url(navigation_sub_shop.gif) no-repeat -710px -43px;
    }
    
    
    ul#navigation li#shop ul li#company a:link,
    ul#navigation li#shop ul li#company a:visited {
       width: 100px;
       height: 43px;
       background: url(navigation_sub_about) no-repeat -607px 0px;
    }
    
    ul#navigation li#shop ul li#company a:hover {
       width: 100px;
       height: 43px;
       background: url(navigation_sub_about.gif) no-repeat -607px -43px;
    }
    
    ul#navigation li#shop ul li#Trisha a:link,
    ul#navigation li#shop ul li#mTrisha a:visited {
       width: 93px;
       height: 43px;
       background: url(navigation_sub_about.gif) no-repeat -700px 0px;
    }
    
    ul#navigation li#shop ul li#Trisha a:hover {
       width: 93px;
       height: 43px;
       background: url(navigation_sub_about.gif) no-repeat -700px -43px;
    }
    
    /*</group>*/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    It's hard to debug properly without seeing the images etc but the main problem is that your html should be nested lists and not just one list.

    e.g. It should be structured like this.

    Code:
    <div id="navbar">
        <ul id="navigation">
            <li><a href="#">home</a>
                <ul>
                    <li><a href="#">sweater-izer APP</a></li>
                    <li><a href="#">christmas sweater FUN</a></li>
                    <li><a href="#">blog</a></li>
                    <li><a href="#">shop</a></li>
                    <li><a href="#">about</a></li>
                </ul>
            </li>
        </ul>
    </div>
    Your code could be reduced quite a bit as you have stated the same height many times and you could have done that once. As you are using a sprite you could just change the background-position and not use the whole background image and repeat properties each time and save about 50&#37; code (background-position: xpx ypx ).


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
  •