fishcuisine Posted December 24, 2010 Report Share Posted December 24, 2010 Hello, I have my new Nav bar looking pretty good. It is a little short; about 6" short. How can I extend it out to cover 1050 px? I wonder... Codes: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="SushiMenu1"> <meta name="description" content="Horizontal menu item1"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Sushi Menu</title> <style type="text/css"> #menu{ font-family: arial, sans-serif; line-height: 1.3; color: #000000; font-size: 11px; font-weight: normal; } #menu{ padding:0; margin:0; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } #menu li a{ padding: 0 10px; height: 25px; display: block; text-decoration:none; text-align: center; line-height: 25px; background-color: #660033; color: white; } #menu li a:hover{ background-color: #663366; } #menu ul ul{ position: absolute; top: 22px; visibility: hidden; } .style1 {color: #B7C8C5} </style> </head> <body> <div id="menu"> <ul> <li><a href="#nogo"><span class="style1"></span>HOME</a> </li> <li><a href="#nogo">CHEF DIPLOMA COURSE</a> </li> <li><a href=”#nogo”>METROPOLIS TOKYO</a> </li> <li><a href=”#nogo”>LOCATION</a> </li> <li><a href=”#nogo”>INQUIRE</a> </li> <li><a href=”#nogo”></a> </li> <li><a href=”#nogo”></a> </li> <li><a href=”#nogo”></a> </li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 24, 2010 Report Share Posted December 24, 2010 The quickest thing to do to make the menu 1050px wide is this:- #menu{ font-family: arial, sans-serif; line-height: 1.3; color: #000000; font-size: 11px; font-weight: normal; padding:0; margin: 0 auto; /*was margin: 0; the auto will center it in windows over 1050px wide*/ width: 1050px; } #menu ul{ padding:0; margin:0; } #menu li{ width: 131.25px; position: relative; float: left; list-style: none; margin: 0; padding:0; } You have 8 menu tabs (three have no text yet) so 1050 / 8 = 131.25px so use 131.25px. Some browsers will process decimal places, some will use 131px which will mean 2px spare at the right end which you probably won't notice. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.