Seaford Crown FC (<!-- m --><a class="postlink" href="http://www.seafordcrownfc.co.uk">http://www.seafordcrownfc.co.uk</a><!-- m -->)
Im trying to work out where Im going wrong with the positioning of the CSS menu and I have tried hundreds of different ways to try and get the menu underneath the banner as opposed to on top of it and just cant work it out.
Heres the CSS that I feel is neccessary to the menu
#navigation {
position:absolute;
top:5em;
left:0;
width:6em
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: -1px;
left: 6px;
width: 10em;
}
#menu dt {
cursor: pointer;
colour: #FFFFFF;
background: #FF0000;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
#menu dd {
position: absolute;
z-index: 100;
background: #FF0000;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}
#menu ul {
padding: 2px;
background: #FF0000;
}
#menu li {
background: #FF0000;
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
background: #FF0000;
text-decoration: none;
display: block;
}
#menu li a:hover {
text-decoration: underline;
background: #FFFFFF;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {
text-decoration: none;
color: #222;
}
#mentions a:hover{
text-decoration: underline;
}You are using absolute positioning for #menu and dd. This takes it out of normal flow and positions it within the bounds of its parent which is the body. Removing the positioning puts it below the image.
Im trying to work out where Im going wrong with the positioning of the CSS menu and I have tried hundreds of different ways to try and get the menu underneath the banner as opposed to on top of it and just cant work it out.
Heres the CSS that I feel is neccessary to the menu
#navigation {
position:absolute;
top:5em;
left:0;
width:6em
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: -1px;
left: 6px;
width: 10em;
}
#menu dt {
cursor: pointer;
colour: #FFFFFF;
background: #FF0000;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
#menu dd {
position: absolute;
z-index: 100;
background: #FF0000;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}
#menu ul {
padding: 2px;
background: #FF0000;
}
#menu li {
background: #FF0000;
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
background: #FF0000;
text-decoration: none;
display: block;
}
#menu li a:hover {
text-decoration: underline;
background: #FFFFFF;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {
text-decoration: none;
color: #222;
}
#mentions a:hover{
text-decoration: underline;
}You are using absolute positioning for #menu and dd. This takes it out of normal flow and positions it within the bounds of its parent which is the body. Removing the positioning puts it below the image.