Im trying to center the text in my navbar but i cant bring it down right now it looks like this: http://www.uploadpad.com/files/centerhelp.JPG This is my html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>M and J Web Services</title> <link rel="stylesheet" media="screen" type="text/css" href="stylesheet.css" > <style type="text/css"> </style> </head> <body> <div class="site-wrapper"> <div class="header-wrapper"> <div class="Logo"><a href=""><img alt="logo" src="images/MJLogo.gif" style="border-style: none"></a> <div class="navbar"> <div alight="center"> <ul> <li><a href="#"><b>Support</a></b></li> <li><a href="#"><b>Shared Web Hosting</a></b></li> <li><a href="#"><b>Dedicated Server Hosting</a></b></li> <li><a href="#"<b>E-Business Solutions</a></b></li> <li><a href="#"><b>Support</a</b></li> </ul> </div> </div> </div> <div class="body-wrapper"> <div class="content-wrapper"> <div class="main_table"> <div class="shared_table"></div> <div class="dedicated_table">d</div> <div class="ebusiness_table">e</div> </div> <div style="clear:both"></div> </div> </div> <div class="footer"> <ul> <li><a href=""><b>About Us</a></b> |</li> <li><a href=""><b>Privacy Policy</a></b> | </li> <li><a href=""><b>Terms of Service</a></b> |</li> <li><a href=""><b>Contact Us</a></b> |</li> <li><b>©2008 M and J Web Services</b> </li> </ul> </div> </div> </body> </html> Code (markup): and this is my stylesheet /*============================== SITE WRAPPER ===============================*/ html,body{ margin:0; padding:0; } p,h1,h2,h3,h4,h5,h5,ul,ol{ margin:0 0 1em 0; padding:0; } ul,ol{margin:0 0 1em 16px;} body{ font-family:Arial; font-size:12px; background:url(images/mjbg.gif); } .site-wrapper{ width:801px; margin-top:54px; margin-left:auto; margin-right:auto; } /*============================== HEADER WRAPPER ===============================*/ .header-wrapper { width:775px; height:90; margin-left:auto; margin-right:auto; } .logo{float:left} .header-menu { z-index: 0; margin-top: -40px; float:right; width:370px; height:10x; } .navbar ul { z-index: 1; flight:left; margin: 0; margin-top:10px; height:35px; width: 745; list-style-type: none; text-align: center; background:url(images/navbar.gif); background-repeat: no-repeat; } .navbar ul li { margin-top: 20px; padding: 0px 20px 0px 10px; display: inline; height: 33px; } .navbar ul li a { text-decoration: none; height: 33px; color: #FFFFFF; } .navbar ul li a:hover { color: #FBBD47; height: 33px; } /*============================== BODY WRAPPER ===============================*/ .body-wrapper { margin-top:-10px; width:801px; } /*============================== Tables ===============================*/ .content-wrapper { margin-top:20px; height:483px; width:801px; } .main_table{ height:483px; width:743px; margin:20 15px; padding:150px 14px 14px 14px; background:url(images/maintbl.gif); background-repeat:no-repeat; } .shared_table{ height:347px; width:243px; margin:-25px 0; float:left; background:url(images/innertbl.gif); background-repeat:no-repeat; float:left; } .dedicated_table{ position:relative; float:left; margin:-25px 0; height:347px; width:243px; background:url(images/innertbl.gif); background-repeat:no-repeat; } .ebusiness_table{ position:relative; height:347px; margin:-25px 0; float:left; width:243px; background:url(images/innertbl.gif); background-repeat:no-repeat; } /*============================== FOOTER ===============================*/ a { text-decoration: none } .footer { clear:both; text-align:center; } .footer ul { margin:10px; padding:0; list-style:none; } .footer ul li { display:inline } .footer ul li a { color:#000 } Code (markup): Anyone able to help?
try removing float in ur nav and use this code: .navbar ul { z-index: 1; margin: 0; margin-top:10px; height:35px; width: 745; list-style-type: none; text-align: center; background:url(images/navbar.gif); background-repeat: no-repeat; } Code (markup):
Well, removing the "float" won't change anything because it's currently not floated... because the code says flight:left; no such thing as flight, so the list's not floated at all. What you want to bring those words down is Line-height! You have a height on your ul already: height:35px; so on the a's where you have your actual text, make this also the same line-height: .navbar ul li a { text-decoration: none; height: 33px; line-height: 33px; (or 35px whichever you want) color: #FFFFFF; } By the way, your code is not valid. <li><a href=""><b>About Us</a></b> |</li> See, you have <a><b></a></b> That must be <a><b></b></a> If the b is opened inside the a then it must also close INSIDE the a. Not that a browser would notice the difference necessarily, but you never know when some new browser comes out and suddenly the error matters! Also, your doctype is pushed off to the side in your copy here at DP. Make sure that on your real site you have nothing, no spaces or anything, before that first <!DOCTYPE... otherwise Internet Explorer thinks there is NO doctype and goes into Retard Mode (aka quirksmode) meaning it will act like IE5.5 and below : (