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>



Reply With Quote

Bookmarks