Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Best method to create a 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...igation_in_css
    _with_images/

    Here's a link to the sample menu inthat 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
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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