Hi
I'm having some real trouble with a header I have created within a
container. I have two problems; firstly the menu (a horizontal UL) will not
centre within the surrounding header, despite attempts to use the following
within the #header declaration:
margin-left: auto;
margin-right: auto;
The image above the list is easily centred using the 'text-align' property,
but this is not true of the UL, any ideas?
Secondly the drop down menu is appearing beneath other content within the
page, is this a z-index issue, or is it due to the list overlapping the div
it is in?
Here is an image displaying the problems:
http://www.aoti12.dsl.pipex.com/problem.jpg
#container: red border
#header: green border and blue background
Here is the CSS for the container and header/menu:
----------------------------------------------------------------------------
---------------
/*This contains the whole page*/
#container {
position:absolute;
width:100%;
border: 5px solid red; /* for testing purposes */
}
----------------------------------------------------------------------------
---------------
#header {
position:absolute; /* This means the element is positioned exactly upon the
page*/
width:100%; /* percentage of the page to be filled horizontaly */
left:0;
background-color:blue;
border: 3px solid green;
}
/* Unordered Lists, i.e. main buttons */
#header ul {
padding: 0;
margin: 0;
list-style:none;
}
/* List items, i.e. menu buttons */
#header li {
float: left;
position: relative;
width:120px; /* width of each 'button', should be > than largest text */
margin:-1px; /* so boxes don't overlap */
}
/* List item links, i.e. main buttons */
#header li a {
font-family: arial, helvetica, serif;
display: block;
text-decoration: none;
font-weight:bold;
color: #777;
background-image: url("../images/button2.gif");
background-repeat:repeat-x;
padding: 2px;
border: 0px solid #ccc; /* border around buttons, set to 0 */
border-width:0px 1px; /* place border only on left and right sides */
text-align:center;
font-size:11px;
}
/* Hover Styles for main item, i.e. main buttons when mouse-over */
#header ul li a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Sub-menu unordered lists */
#header li ul {
display: none;
position: absolute;
margin:0px 1px; /* So sub menu aligns on left not right */
}
/* Sub Menu list item */
#header li ul li {
width: 119px; /* 1 pixel less than parent menu width, so that they match
up*/
}
/* Sub Menu links, i.e. sub-menu buttons when mouse-over */
#header li ul li a {
text-align:left;
font-weight:normal;
border: 0px solid #ccc;
border-width: 0px 1px 1px; /* top, sides, bottom */
background-image:none;
}
/* Hover Styles for sub-menu, i.e. sub-menu buttons when mouse-over */
#header li ul li a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* to override top and left in browsers other than IE, which will position
to the top right of the containing li, rather than bottom left */
#header li>ul {
top: auto;
left: auto;
}
/* lists nested under hovered list items, the magic that makes the menus
'pop' up*/
#header li:hover ul, #header li.over ul {
display: block;
}
#header #content {
clear: left;
}
----------------------------------------------------------------------------
---
any help greatly appreciated, i'm learngin CSS throught trial and error, i
have been 'trialing' this problem afr too long!
Thanks
Faz