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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Header Buttons Question

    Hi in the code below I have 8 menu links. What would be the best way to have them all evenly spread across the entire width without the space to the left?

    Thanks so much

    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>
    
    <style type="text/css">
    
    BODY{ color: White; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; margin: 0; padding: 0; }
    a{ color: #FFFFFF; text-decoration: none; }
    
    #HEADER{	width:760px; margin-left:auto; margin-right:auto;}
    #HEADER ul{ margin: 0; padding-left: 0; height: 44px; line-height: 44px; display: block; list-style: none; background-color: #1F2C56; }
    #HEADER li{ display: inline; background-color: #395A8D;  float: right;  }
    #HEADER li a{ height: 44px; line-height: 44px; display: block; padding-left: 25px; padding-right: 30px; border-left: 1px solid Black;  float: left; }
    #HEADER li a:hover{ background-color: #1F2C56; text-decoration: none;}
    #HEADER .Visual{ height:263px; background-repeat: no-repeat;  background-color: #1F2C56;  border-top: 3px solid Black;   }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="HEADER">
    	<h1>Welcome</h1>
    	<ul>
    		<li><a href="link8.html">Link 8</a></li>
    		<li><a href="link7.html">Link 7</a></li>
    		<li><a href="link6.html">Link 6</a></li>
    		<li><a href="link5.html">Link 5</a></li>
    		<li><a href="link4.html">Link 4</a></li>
    		<li><a href="link3.html">Link 3</a></li>
    		<li><a href="link2.html">Link 2</a></li>
    		<li><a href="link1.html">Link 1</a></li>
    	</ul>
    	<div class="Visual"> </div>
    </div>
    
    </body>
    
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello theflyingminstr,
    Try this for starters, the key changes are highlighted in red -
    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>
    <title>Untitled Document</title>
    <style type="text/css">
    body{
    	color: #fff;
    	font: 10pt Arial, Helvetica, sans-serif;
    }
    * {
    	margin: 0; 
    	padding: 0; 
    }
    #header{	
    	width:760px; 
    	margin: 0 auto;
    }
    #header ul{ 
    	height: 44px; 
    	line-height: 44px; 
    	display: block; 
    	list-style: none; 
    	background: #1F2C56; 
    }
    #header li{ 
    	display: inline; 
    	background: #395A8D;  
    	float: right;  
    }
    #header li a{ 
    	height: 44px; 
    	line-height: 44px; 
    	display: block; 
    	width: 94px;
    	text-align: center;	
    border-left: 1px solid Black;  
    	float: left; 
    }
    #header li a:hover{ 
    	background: #1F2C56; 
    	text-decoration: none;
    }
    #header .visual{ 
    	height:263px; 
    	background: #1F2C56;  
    	border-top: 3px solid Black;   
    }
    a{ color: #FFFFFF; text-decoration: none; }
    </style>
    </head>
    <body>
    <div id="header">
    	<h1>Welcome</h1>
            <ul>
                <li><a href="link8.html">Link 8</a></li>
                <li><a href="link7.html">Link 7</a></li>
                <li><a href="link6.html">Link 6</a></li>
                <li><a href="link5.html">Link 5</a></li>
                <li><a href="link4.html">Link 4</a></li>
                <li><a href="link3.html">Link 3</a></li>
                <li><a href="link2.html">Link 2</a></li>
                <li><a href="link1.html">Link 1</a></li>
            </ul>
    	<div class="visual"> </div>
    </div>
    </body>
    </html>
    Some other centered menu examples here:
    Last edited by Excavator; 04-01-2009 at 09:37 PM.
    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

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey that's awesome, thanks so much!

    Edit:

    One thing I noticed is that if needs to wrap text to the next line it pushes the text very far down into the visual area.

    Ex:

    <div id="header">
    <h1>Welcome</h1>
    <ul>
    <li><a href="link8.html">Link 8 Link 8 Link 8</a></li>
    <li><a href="link7.html">Link 7</a></li>
    <li><a href="link6.html">Link 6</a></li>
    <li><a href="link5.html">Link 5</a></li>
    <li><a href="link4.html">Link 4</a></li>
    <li><a href="link3.html">Link 3</a></li>
    <li><a href="link2.html">Link 2</a></li>
    <li><a href="link1.html">Link 1</a></li>
    </ul>
    <div class="visual"> </div>
    Last edited by theflyingminstr; 04-01-2009 at 09:33 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Cleaned up a little more -
    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 {
    	font: 14px "Comic Sans MS";
    	text-align: center;
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	border: none;
    }
    #container {
    	width: 760px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    h1 {
    	height: 44px;
    	line-height: 44px;
    }
    ul#menu { 
    	height: 44px; 
    	margin: 0 0 300px;
    	line-height: 44px;
    	list-style: none; 
    	border-bottom: 3px solid #000;
    }
    #menu li{  
    	display:inline;
    }
    #menu li a{
    	width: 94px;
    	height: 44px;
    	float: left;
    	line-height: 44px;
    	display: block;
    	text-align: center;
    	text-decoration: none;
    	color: #fff;
    	background: #395A8D;
    	border-left: 1px solid Black;
    }
    #menu li a:hover{background: #1F2C56;}
    </style>
    </head>
    <body>
    <div id="container">
        <h1>Header text goes here</h1>
            <ul id="menu">
                <li><a style="border:0;" href="link1.html">Link 1</a></li>
                <li><a href="link2.html">Link 2</a></li>
                <li><a href="link3.html">Link 3</a></li>
                <li><a href="link4.html">Link 4</a></li>
                <li><a href="link5.html">Link 5</a></li>
                <li><a href="link6.html">Link 6</a></li>
                <li><a href="link7.html">Link 7</a></li>
                <li><a href="link8.html">Link 8</a></li>
            </ul>
    <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 04-01-2009 at 09:46 PM.
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by theflyingminstr View Post
    Hey that's awesome, thanks so much!

    Edit:

    One thing I noticed is that if needs to wrap text to the next line it pushes the text very far down into the visual area.

    Ex:
    Yeah, it's never good when you full width menu needs to wrap. Specify px sized text and make sure it all fits.
    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

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Gotcha thanks!!

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Cleaned up a little more -
    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 {
    	font: 14px "Comic Sans MS";
    	text-align: center;
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	border: none;
    }
    #container {
    	width: 760px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    h1 {
    	height: 44px;
    	line-height: 44px;
    }
    ul#menu { 
    	height: 44px; 
    	margin: 0 0 300px;
    	line-height: 44px;
    	list-style: none; 
    	border-bottom: 3px solid #000;
    }
    #menu li{  
    	display:inline;
    }
    #menu li a{
    	width: 94px;
    	height: 44px;
    	float: left;
    	line-height: 44px;
    	display: block;
    	text-align: center;
    	text-decoration: none;
    	color: #fff;
    	background: #395A8D;
    	border-left: 1px solid Black;
    }
    #menu li a:hover{background: #1F2C56;}
    </style>
    </head>
    <body>
    <div id="container">
        <h1>Header text goes here</h1>
            <ul id="menu">
                <li><a style="border:0;" href="link1.html">Link 1</a></li>
                <li><a href="link2.html">Link 2</a></li>
                <li><a href="link3.html">Link 3</a></li>
                <li><a href="link4.html">Link 4</a></li>
                <li><a href="link5.html">Link 5</a></li>
                <li><a href="link6.html">Link 6</a></li>
                <li><a href="link7.html">Link 7</a></li>
                <li><a href="link8.html">Link 8</a></li>
            </ul>
    <!--end container--></div>
    </body>
    </html>
    Thank you Excavator


  •  

    Posting Permissions

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