SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Bonita Springs
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Nav Bar

    Hi all,

    I've been trying out the tutorials in the new CSS Tips, Tricks and Hacks offered on this site. One thing I'm having trouble with is getting the Horizontal List Navigation bar thingie (technical name, of course) to work. The normal vertical menu works fine but when I changed the "<li>" display type to inline it makes it all funky.
    Here is my CSS:

    Code:
    #nav {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 1em;
    }
    #nav ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	padding-top: 4px;
    }
    #nav li {
    	display: inline;
    }
    #nav a:link, #nav a:visited {
    	padding: 3px 10px 2px 10px;
    	color: #FFFFFF;
    	background-color: #003399;
    	text-decoration: none;
    	border: 1px solid gold;
    }
    #nav a:hover {
    	background-color: gold;
    	color: #003399;
    }
    and here is the html:

    HTML Code:
    <body>
    <div id="nav">
    <ul>
    <li><a href="#">Link One</a></li>
    </ul>
    <ul>
    <li><a href="#">Link Two</a></li>
    </ul>
    <ul>
    <li><a href="#">Link Three</a></li>
    </ul>
    <ul>
    <li><a href="#">Link Four</a></li>
    </ul>
    <ul>
    <li><a href="#">Link Five</a></li>
    </ul>
    </div>
    </body>

  2. #2
    SitePoint Member tommylynn's Avatar
    Join Date
    Oct 2004
    Location
    allen, tx
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your code should read:
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>

    Don't close the unorderlist aafter each list item.

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Bonita Springs
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Duh!
    Thank you. (guess that's what I get for copying and pasting)


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
  •