...

View Full Version : Help me center menu bar



Theteva
01-22-2012, 05: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.

IMAGE

http://img687.imageshack.us/img687/3903/helpmep.png

CSS


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

#Header {
background-image:url(images/header%20top.png);
background-position:center top;
margin-top: 100px;
height: 280px;
width: 900px;
margin-left: auto;
margin-right: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;
background-position:center;
margin-left:auto;
margin-right:auto;
}

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; }


HTML


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

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

</head>

<body>



<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>
</ul>

</body>
</html>

Excavator
01-22-2012, 06: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;
background-position:center;
}


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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum