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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    stuck on evenly spacing navigation links horizontally across div

    hello guys, im working on a site and im having trouble figuring this out.

    the navigation area of the site will have a background that will be 100% width of the browser.

    then there is an inner div (that contains the links) that is 980px wide and centered inside the background div.

    I need to add 6 navigation links and space them evenly across the 980px.

    Also, when you hover over them the background color will change.

    below is a stripped down version of the code I have started for the navigation. It is a mess. Can anybody help? Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #nav_holder {
    	height: 60px;
    	width: 100%;
    	background-color: #666;
    	line-height: 60px;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFF;
    }
    #navigation {
    	width: 980px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #navigation ul{
    	display: block;
    	margin-left: auto:
    	margin-right: auto;
    	padding-left:5px;
    	padding-right:5px;
    	float:left;
    </style>
    </head>
    <body>
    <div id="nav_holder">
      <div id="navigation">
      <ul>
            <li><a href="one.html">One</a></li>
            <li><a href="two.html">Two</a></li>
            <li><a href="three.html">Three</a></li>
            <li><a href="four.html">Four</a></li>
            <li><a href="five.html">Five</a></li>
      </ul>
      </div>
    </div>
    </body>
    </html>

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Find the corrected code below:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #nav_holder
    {
    	height: 60px;
    	width: 100%;
    	background-color: #666;
    	line-height: 60px;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFF;
    }
    
    #navigation
    {
    	width: 980px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    
    #navigation ul li 
    {
    	display: inline-table;
    	list-style-type: none;
     	float: left;
        padding: 2px;
        width: 150px;
        margin-left: auto ;
        margin-right: auto ;
    }
    
    #navigation ul li a
    {
    	color:#FFFFFF;
    }
    
    #navigation ul li a:hover
    {
    	background-color: red;
    }
    
    
    </style>
    </head>
    <body>
    <div id="nav_holder">
      <div id="navigation">
      <ul>
            <li><a href="one.html">One</a></li>
            <li><a href="two.html">Two</a></li>
            <li><a href="three.html">Three</a></li>
            <li><a href="four.html">Four</a></li>
            <li><a href="five.html">Five</a></li>
      </ul>
      </div>
    </div>
    </body>
    </html>
    Software and cathedrals are much the same - first we build them, then we pray.

  • Users who have thanked ckeyrouz for this post:

    gribbs100 (02-21-2012)

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you very much for that help. I appreciate it! Works great!

  • #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Glad I could help.
    Software and cathedrals are much the same - first we build them, then we pray.

  • #5
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Actually, I just ran into a little problem though. I made some changes but it doesn't space them evenly inside the 980px div. they are still off to the left a bit.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #nav_holder
    {
    	height: 60px;
    	width: 100%;
    	background-color: #966;
    	line-height: 60px;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFF;
    }
    
    #navigation
    {
    	width: 980px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #CFC;
    }
    
    
    #navigation ul li 
    {
    	display: inline-table;
    	list-style-type: none;
    	float: left;
    	width: 100px;
    	margin-left: auto;
    	margin-right: auto;
    	padding-top: 0px;
    	padding-right: 10px;
    	padding-bottom: 0px;
    	padding-left: 10px;
    }
    
    #navigation ul li a
    {
    	color:#FFFFFF;
    	display:block;
    }
    
    #navigation ul li a:hover
    {
    	background-color: red;
    }
    
    
    </style>
    </head>
    <body>
    <div id="nav_holder">
      <div id="navigation">
      <ul>
            <li><a href="one.html">One</a></li>
          <li><a href="two.html">Two</a></li>
            <li><a href="three.html">Three</a></li>
            <li><a href="four.html">Four</a></li>
            <li><a href="five.html">Five</a></li>
      </ul>
      </div>
    </div>
    </body>
    </html>

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello gribbs100,
    Look what happens when you give your ul a width that matches it's contents -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 0 0 400px;
    	background: #999;
    }
    #nav_holder {
    	height: 60px;
    	width: 100%;
    	background: #966;
    	line-height: 60px;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #fff;
    }
    ul#navigation {
    	width: 500px;
    	margin: 0 auto;
    	padding: 0;
    	background: #cfc;
    	overflow: auto;
    }
    ul#navigation li {
    	list-style-type: none;
    	float: left;
    	width: 100px;
    }
    ul#navigation li a {
    	color: #fff;
    	display: block;
    }
    ul#navigation li a:hover {background: #f00;}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="nav_holder">
                <ul id="navigation">
                    <li><a href="one.html">One</a></li>
                    <li><a href="two.html">Two</a></li>
                    <li><a href="three.html">Three</a></li>
                    <li><a href="four.html">Four</a></li>
                    <li><a href="five.html">Five</a></li>
                </ul>
            <!--end nav_holder--></div>
        <!--end container--></div>
    </body>
    </html>
    If you want the ul to be 980px wide, make these changes to that CSS -
    Code:
    #container {
    	padding: 0 0 400px;
    	background: #999;
    }
    ul#navigation {
    	width: 740px;
    	margin: 0 auto;
    	padding: 0 0 0 240px;
    	background: #cfc;
    	overflow: auto;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    gribbs100 (02-22-2012)

  • #7
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you so much! my issue though is the i just wanted to space the links evenly across the 980 px. not making them each that wide. does this make sense. your first code is correct but i want to space them apart over the width of 980px
    Last edited by gribbs100; 02-22-2012 at 04:20 PM.

  • #8
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    The idea is that the header with navigaion background is 100% wide then under that the main site body is 980px wide so i wanted the nav links to be evenly distributed in the center of the header but spread out to compliment the main body width below.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by gribbs100 View Post
    Thank you so much! my issue though is the i just wanted to space the links evenly across the 980 px. not making them each that wide. does this make sense. your first code is correct but i want to space them apart over the width of 980px
    Just do the math and change widths on everything to suit. 980 just happens to be divisible by 5 li buttons, pretty handy...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    gribbs100 (02-23-2012)

  • #10
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    I did the math and figured out the numbers that made it fit correct. Thank you so much for all of the help!


  •  

    Tags for this Thread

    Posting Permissions

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