View Full Version : Help me center menu bar

01-22-2012, 04:56 PM
Im trying to make the basic of a website. But I center both my header and the menu bar still both arent in the center.




@charset "utf-8";
/* CSS Document */

#Header {
background-position:center top;
margin-top: 100px;
height: 280px;
width: 900px;
margin-left: auto;

body {
background-image: url(images/webpattern.png);
background-repeat: repeat;
background-position: left top;

ul#awesome-menu {
width: 900px; margin: 0px auto;
list-style: none;

ul#awesome-menu li { display: inline; }

ul#awesome-menu li a {
display: block; float: left; height: 50px;
background-image:url(images/menu-sprite.png); text-indent: -9999px;

ul#awesome-menu li a.home {
width: 180px; background-position: 0 0;

ul#awesome-menu li a.download {
width: 180px; background-position: -180px 0;

ul#awesome-menu li a.store {
width: 180px; background-position: -360px 0;

ul#awesome-menu li a.forum {
width: 180px; background-position: -540px 0;

ul#awesome-menu li a.contact {
width: 180px; background-position: -720px 0;

ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
background-position: 0 -50px;

ul#awesome-menu li a.download:hover, ul#awesome-menu li a.download:focus {
background-position: -180px -50px;

ul#awesome-menu li a.store:hover, ul#awesome-menu li a.store:focus {
background-position: -360px -50px;

ul#awesome-menu li a.forum:hover, ul#awesome-menu li a.forum:focus {
background-position: -540px -50px;

ul#awesome-menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
background-position: -720px -50px;

a { outline: none; }


<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="style.css" type="text/css" />



<div id="Header"></div>

<ul id="awesome-menu">
<li><a href="#home" class="home">Home</a></li>
<li><a href="#download" class="download">Download</a></li>
<li><a href="#store" class="store">Store</a></li>
<li><a href="#forum" class="forum">Forum</a></li>
<li><a href="#contact" class="contact">Contact</a></li>


01-22-2012, 05:06 PM
Hello Theteva,
Some redundancy in your CSS there, margin: 0 auto; sets your left/right margins so there is no need to set those again.

Try making your CSS look like this to center it -

ul#awesome-menu {
width: 900px;
margin: 0 auto;
padding: 0;
list-style: none;

I didn't try it but that gap your seeing looks like ul's default 40px left padding.

01-22-2012, 05:32 PM
It worked thanx very much :D

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum