Web Analytics Made Easy -
StatCounter Header Buttons Question - CodingForum

Announcement

Collapse
No announcement yet.

Header Buttons Question

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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; 
    	[COLOR="Red"]width: 94px;
    	text-align: center;[/COLOR]	
    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; Apr 1, 2009, 04:37 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      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; Apr 1, 2009, 04:33 PM.

      Comment


      • #4
        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; Apr 1, 2009, 04:46 PM.
        Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
        Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

        Comment


        • #5
          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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

          Comment


          • #6
            Gotcha thanks!!

            Comment


            • #7
              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

              Comment

              Working...
              X