...

View Full Version : Aligning Menu Items



IamHe
05-06-2011, 12:12 PM
I orgionally got help with this from Bullant about a month ago but im now trying to make an alteration but am not having much look.

i have a div menu code and at current the menu items are centerd within the div container.

i want them to start from the left rather than the centre.

would really appreciate any help.

thanks


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#menuContainer {
width: 900px;
overflow: hidden;
border: 1px solid red;
margin: 0px auto 0px auto;
}
#menu {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
position: relative;
left: 50%;
}
#menu li {
float: left;
position: relative;
right: 50%;
}
#menu li a {
margin: 0px 10px 0px 10px;
padding: 5px 5px 5px 5px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="menuContainer">
<ul id="menu">
<li><a href="link1.htm">item1</a></li>
<li>|</li>
<li><a href="link2.htm">item2</a></li>
<li>|</li>
<li><a href="link3.htm">item3</a></li>
<li>|</li>
<li><a href="link4.htm">item4</a></li>
</ul>
</div>
</body>
</html>

teedoff
05-06-2011, 03:13 PM
#menuContainer {
width: 900px;
overflow: hidden;
border: 1px solid red;
margin: 0px auto 0px auto;

Might have something to do with the code in orange. Remember, anything with a specified width less than its containing element, AND margin left and right set to auto, will center itself.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum