Hello, I have spent days and days on this--many hours, and I've been all over the tutorial Web sites many times. I cannot get my navigation bar to horizontally center on the page in all browsers. I would really, really appreciate some help. Here's the code I'm trying right now: html { margin: 0; padding: 0; } body { background: #FFFFFF url; text-align: center; color: #000000; font: 11px verdana, sans-serif; margin: 0px; padding: 20px 0px 20px 0px; } a { color: #7B5146; font-weight: bold; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } img { border: 0px solid #7B5146; } #wrapper { width: 778px; margin: auto; text-align: left; } #header p { font-size:18px; font-style:italic; color:#000000; font-family:Georgia, "Times New Roman", Times, serif; } #header p.more { padding-right: 22px; } #header { height: 230px; background: url(images/KnechtMusic_gray.jpg) no-repeat; background-position: top center; } #header div { padding: 0px 0px 0px 0px; } #header p { margin: 0px; padding: 0px; } #header a { color:#FFFFFF; } #nav { width: 1400px; height:48px; background-repeat:no-repeat; display:inline; float:center; } #nav a { font-size:13px; font-style:italic; color:#BE8571; font-family:Georgia, "Times New Roman", Times, serif; padding: 5px 5px 5px 5px; display:inline; float:center; border-right-style: inset; border-right-color: #76644f; } #nav a:hover { color:#000000; text-decoration:none; } .lastchild { border-right: none 0px !important; } #body { background: url(images/body_bg.gif) repeat-y; clear: both; width: 100%; } #body-top { background: url(images/body_top.gif) no-repeat; } #body-bot { background: bottom url(images/body_bot.gif) no-repeat; padding: 21px 25px 15px 42px; } #about-box { float: left; width: 315px; } #about-box ul { margin-left: 8px; } #express-box { float: right; width: 327px; } #foot { width: 738px; margin-left: 20px; background: url(images/foot_bg.gif) repeat-y; } #foot-top { background: url(images/foot_top.jpg) no-repeat; } #foot-bot { background: bottom url(images/foot_bot.gif) no-repeat; padding: 13px 21px 12px 28px; } #what-box { float: left; width: 332px; } #what-box img.left { margin-left: 10px; } #what-box ul { float: left; margin-left: 2px; width: 184px; } #news-box { float: right; width: 316px; } #news-box ul { float: left; margin-left: 2px; width: 184px; } #footer { margin: 14px; text-align: center; } h2 { margin: 0px; padding: 0px 0px 10px 0px; font:Arial, Helvetica, sans-serif; font-size:20px; font-style:italic; color:BE8571; } h2 b{ color:#BE8571; } ul { margin: 0px; padding: 0px; } li { margin: 0px; padding: 0px 0px 5px 20px; list-style: none; background: 0px 3px url(images/bullet.gif) no-repeat; } p { margin-top: 0px; margin-bottom: 10px; } div.narrow-text { margin-right: 18px; } img.left { float: left; padding-right: 14px; padding-bottom: 16px; } #body p.more { padding-top: 6px; } #news-box p.more { padding-top: 0px; margin-top: 0px; } p.more { text-align: right; } .clear { clear: both; }
First in your nav div's, take out the "float:center;". I've never heard of it. Now, try "margin:0 auto;" in its place. If that doesn't work can you post the html so I can see that part too, or even a link to the site?
I appreciate the replies. You can view the result of my index page here: http://knecht.freewebhosting360.com/. I made the following changes and it's still not centered. Other suggestions?: } #nav { width: 1400px; height:48px; background-repeat:no-repeat; display:inline; margin:0 auto; } #nav a { width: 1400px; font-size:13px; font-style:italic; color:#BE8571; font-family:Georgia, "Times New Roman", Times, serif; padding: 5px 5px 5px 5px; display:inline; margin:0 auto; border-right-style: inset; border-right-color: #76644f; }
Ok, in your html... change <div id="nav"> to <div id="nav" align="center"> And for the css, try this. html { margin: 0; padding: 0; } body { background: #FFFFFF url; text-align: center; color: #000000; font: 11px verdana, sans-serif; margin: 0px; padding: 20px 0px; } a { color: #7B5146; font-weight: bold; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } img { border: 0px solid #7B5146; } #wrapper { width: 778px; margin: 0 auto; text-align: left; } #header p { font-size:18px; font-style:italic; color:#000000; font-family:Georgia, "Times New Roman", Times, serif; } #header p.more { padding-right: 22px; } #header { height: 230px; background: url(images/KnechtMusic_gray.jpg) no-repeat; background-position: top center; } #header div { padding:0; } #header p { margin: 0px; padding: 0px; } #header a { color:#FFFFFF; } #nav { width: 788px; height:48px; background-repeat:no-repeat; } #nav a { font-size:13px; font-style:italic; color:#BE8571; font-family:Georgia, "Times New Roman", Times, serif; padding: 5px; border-right-style: inset; border-right-color: #76644f; } #nav a:hover { color:#000000; text-decoration:none; } .lastchild { border-right: none 0px !important; } #body { background: url(images/body_bg.gif) repeat-y; clear: both; width: 100%; } #body-top { background: url(images/body_top.gif) no-repeat; } #body-bot { background: bottom url(images/body_bot.gif) no-repeat; padding: 21px 25px 15px 42px; } #about-box { float: left; width: 315px; } #about-box ul { margin-left: 8px; } #express-box { float: right; width: 327px; } #foot { width: 738px; margin-left: 20px; background: url(images/foot_bg.gif) repeat-y; } #foot-top { background: url(images/foot_top.jpg) no-repeat; } #foot-bot { background: bottom url(images/foot_bot.gif) no-repeat; padding: 13px 21px 12px 28px; } #what-box { float: left; width: 332px; } #what-box img.left { margin-left: 10px; } #what-box ul { float: left; margin-left: 2px; width: 184px; } #news-box { float: right; width: 316px; } #news-box ul { float: left; margin-left: 2px; width: 184px; } #footer { margin: 14px; text-align: center; } h2 { margin: 0px; padding: 0px 0px 10px 0px; font:Arial, Helvetica, sans-serif; font-size:20px; font-style:italic; color:BE8571; } h2 b{ color:#BE8571; } ul { margin: 0px; padding: 0px; } li { margin: 0px; padding: 0px 0px 5px 20px; list-style: none; background: 0px 3px url(images/bullet.gif) no-repeat; } p { margin-top: 0px; margin-bottom: 10px; } div.narrow-text { margin-right: 18px; } img.left { float: left; padding-right: 14px; padding-bottom: 16px; } #body p.more { padding-top: 6px; } #news-box p.more { padding-top: 0px; margin-top: 0px; } p.more { text-align: right; } .clear { clear: both; } Code (markup): I change a few things. There was still a float=center in there, your width for the #nav was set at 1400 changed to 788 (same width as your #wrapper) and removed the display inline from the #nav. Works fine for me, let me know if its what you need.
Sorry to bother you again, but I made the changes you suggested (which worked great on the index page) on another page, but the navigation is still left aligned. If it's not too much trouble, I'm wondering if you could take a look at that page. I replaced <div id="nav"> with <div id="nav" align="center"> in the html page, but the navigation is still left aligned. The url to this page is http://www.knecht.freewebhosting360.com/solosduets.html. The CSS is this: html { margin: 0; padding: 0; } body { background: #FFFFFF url; text-align: center; color: #000000; font: 11px verdana, sans-serif; margin: 0px; padding: 10px 0px 10px 0px; } a { color: #BE8571; font-weight: bold; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } img { border: 0px; } #wrapper { width: 788px; margin: auto; text-align: left; } #header p { font-size:18px; font-style:italic; color:#000000; font-family:Georgia, "Times New Roman", Times, serif; } #header p.more { padding-right: 22px; } #header { height: 160px; background: url(images/knechtmusic_gray2.jpg) no-repeat; background-position: top center; } #header div { padding:0; } #header p { margin: 0px; padding: 0px; } #header a { color:#FFFFFF; } #nav { width: 788px; height:48px; background-repeat:no-repeat; } #nav a { font-size:12px; font-style:italic; color:#BE8571; font-family:Georgia, "Times New Roman", Times, serif; padding: 5px; border-right-style: inset; border-right-color: #76644f; } #nav a:hover { color:#000000; text-decoration:none; } .lastchild { border-right: none 0px !important; } #body { clear: both; width: 100%; } .table1 {width:200px; margin:auto; font-size:12px; border:1px solid #000000; } #foot { width: 738px; margin-left: 20px; background: url(images/foot_bg.gif) repeat-y; } #foot-top { background: url(images/foot_top.jpg) no-repeat; } #foot-bot { background: bottom url(images/foot_bot.gif) no-repeat; padding: 13px 21px 12px 28px; } #what-box { float: left; width: 332px; } #what-box img.left { margin-left: 10px; } #what-box ul { float: left; margin-left: 2px; width: 184px; } #news-box { float: right; width: 316px; } #news-box ul { float: left; margin-left: 2px; width: 184px; } #footer { margin: 14px; text-align: center; } h2 { margin: 0px; padding: 0px 0px 10px 0px; font:Arial, Helvetica, sans-serif; font-size:20px; font-style:italic; color:#000000; } h2 b{ color:#000000; } ul { margin: 0px; padding: 0px; } li { margin: 0px; padding: 0px 0px 5px 20px; list-style: none; background: 0px 3px url(images/bullet.gif) no-repeat; } p { margin-top: 0px; margin-bottom: 10px; } div.narrow-text { margin-right: 18px; } img.left { float: left; padding-right: 14px; padding-bottom: 16px; } #body p.more { padding-top: 6px; } #news-box p.more { padding-top: 0px; margin-top: 0px; } p.kmlogo { text-align: center; } .clear { clear: both; }
Poor kathyk. You were given the worst, deprecated code. Align=center was removed for a reason! The margin: 0 auto did not work on your menu because you first set a width on it, but then set it to display: inline. Inlines may NOT have widths and cannot be centered in the traditional way. Leaving the menu in its native state, a block, and you could have centered it fine.