Hi all I have a problem I dont know how to centre a navbar it always just centres the end button or so on. I havent found an efficient fix on many google searches so please help, thanks. HTML Code: <div id="navbar"> <ul> <li>Home</li> <li>About Me</li> <li>Photos</li> <li>Contact</li> </ul> </div> CSS Code: #navbar { position: relative; top:10px; left:50%; } ul{ list-style-type: none; position: fixed; margin: -10px; } li { display: inline; border: 2px solid #000000; font-family: Futura, Tahoma, sans-serif; color: #ffffff; border-radius: 5px; width: 100px; background-color: #cc0323 }
Full CSS Code: html { max-width: 1200px; margin: 0 auto; background: #eee; /* Fills the page */ position: relative; /* Fix for absolute positioning */ } h2 { font-family: Verdana; font-weight: bold; text-align: center; padding-top: 25px; padding-bottom: 25px; color: #acd1b2; } img { height: 170px; width: 170px; box-shadow: rgba(0,0,0,0.2) 10px 10px; } #navbar { margin: auto; text-align: center; } #navbar li { text-align: left; } #header { position: relative; top: -10px; background-color: #3c4543; border-top-left-radius: 15px; border-top-right-radius: 15px; margin-left: auto; margin-right: auto; } ul{ list-style-type: none; position: fixed; margin: -10px; } li { display: inline; border: 2px solid #000000; font-family: Futura, Tahoma, sans-serif; color: #ffffff; border-radius: 5px; background-color: #cc0323 } #left{ width: 45%; float: left; } p { font-family: Tahoma; font-size: 1em; } #right{ width: 45%; float: right; } table { border: #000000 1px solid; background-color: #acd1b2; float: right; margin-right: 10px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } td { height: 75px; width: 75px; } td img { height: 75px; width: 75px; box-shadow: none; } th { font-family: Verdana; font-size: 1em; font-weight: normal; color: #3c4543 } #bottom_left{ border-bottom-left-radius: 15px; } #bottom_right{ border-bottom-right-radius: 15px; } #footer{ clear: both; position: relative; bottom: -20px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; height: 75px; background-color: #3c4543; } #button{ border: 2px solid #000000; float:left; position: relative; left: 229px; bottom: -20px; border-radius: 5px; background-color: #cc0323; height: 30px; width: 150px; } #button p{ position: relative; bottom: 10px; font-size: 0.8em; color: #acd1b2; text-align: center; } .bold{ font-family: tahoma; font-weight: bold; font-size: 1.2em; font-variant: small-caps; color: #ffffff; } Full HTML Code: <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Result</title> </head> <body> <div id="header"> <div id="navbar"> <ul> <li>Home</li> <li>About Me</li> <li>Photos</li> <li>Contact</li> </ul> </div> <h2>Home</h2> <div id="footer"> <div id="button"> <p>Send me an <span class="bold">e-mail</span>!</p> </div> </div> </body> </html> it didn't work :/ I may have put something preventing it from working but I cant see what...