SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question on Navigation Container

    I'm working on a page with the site navigation in the header DIV and can't figure out how to get the black background color the same width as the header DIV, but still being fluid. Also, how do I add more space between the list items? Margin-right? Here's is the HTML and CSS. Any help would be greatly appreciated.
    Thanks,
    John


    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="generator" content="Adobe GoLive">
    <title>Untitled Page</title>
    <style type="text/css" media="screen"><!--
    #col1 { background-color: black; display: inline; margin-left: 3%; width: 19%; float: left }
    #col2 { background-color: blue; margin-left: 3%; width: 44%; float: left }
    #col3 { background-color: fuchsia; margin-left: 3%; width: 25%; float: left }
    #header { background-color: aqua; margin-bottom: 10px }
    #footer { background-color: gray; clear: both }
    #navcontainer {}
    #navcontainer ul { text-align: center; list-style-type: none; margin: 0; padding: 0 }
    #navcontainer ul li { display: inline }
    #navcontainer ul li a { color: white; text-decoration: none; background-color: black; padding: 0.2em 1em }
    #navcontainer ul li a:hover { color: white; background-color: lime }
    --></style>
    </head>

    <body bgcolor="#ffffff">
    <div id="header">&nbsp;<img src="images/IB_Fit_logo_web.gif" alt="" height="99" width="223" border="0"><div id="navcontainer">
    <ul><li><a href="#">Home
    </a><li><a href="#">About
    </a><li><a href="#">Information
    </a><li><a href="#">Services
    </a><li><a href="#">Links
    </a><li><a href="#">Contact Us
    </a></ul>
    </div>
    </div>
    <div id="col1">&nbsp;</div>
    <div id="col2">&nbsp;</div>
    <div id="col3">&nbsp;</div>
    <div id="footer">&nbsp;</div>
    </body>

    </html>

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want your nav to have a black background, apply the bg-color to #navcontainer instead of the individual anchors. Make sure you close your </li>s properly. Also make sure you've got a doctype on your page. You could use margins or padding to create space between the list items.

  3. #3
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


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
  •