Advanced Search

Results 1 to 2 of 2

Thread: Header Buttons Question

  1. #1
    Join Date
    Jul 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Header Buttons Question

    Hi I am trying evenly space a header menu and for some reason when it needs to word wrap it shoots the text to the bottom (even if I adjust the width on #header li a).

    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: #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 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>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Do you mean The link 8 going on the line below and to the right? what do you want to happen? if thats not the problem and its browser specific which browser is it in?

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
  •