The menu looks like the attached, which looks like nothing I've seen on any of my test browsers. Can someone look at what's going on please and tell me where I'm going wrong? It's supposed to be a straight line, not staggered.
The width of the main content is 1000px.
doctype:
Code: Select all
<!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">
menu html, just beneath the <body>. It's not nested inside any other <div> Selected menu items have a seperate id attached so the colour stays on the page selected:
Code: Select all
<div id="menu">
<ul>
<li><a href="index.html" title="" id="homeselected" accesskey="1">home</a></li>
<li><a href="about.html" accesskey="2" title="">about</a></li>
<li><a href="consultation.html" accesskey="3" title="">consultation</a></li>
<li><a href="contact.html" accesskey="4" title="">contact</a></li>
<li><a href="links.html" accesskey="5" title="">links</a></li>
</ul>
</div>
the css for the menu, which is like it is because it's the only way I know how. I'm open to suggestions on making this better:
Code: Select all
#menu {
background-color:#none;
width: 500px;
height: 27px;
margin: 0px auto;
font-size:10px;
padding-left:500px;
padding-right:0px;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style:none;
}
#menu li {
display:block;
}
#menu a {
display: block;
float: left;
width: 100px;
padding: 7px 0px;
text-align: center;
text-decoration: none;
text-transform:lowercase;
font-weight: bold;
background: #000000;
color:#ffffff;
}
#menu a:hover {
background: #ffffff;
color:#000000;
}
a#homeselected {
background: #ffbd11;
color: #000000;
}
a#aboutselected {
background: #7b0009;
color: #000000;
}
a#consultationselected {
background: #a2ce54;
color: #000000;
}
a#linksselected {
background: #ff3b1c;
color: #000000;
}
a#contactselected {
background: #c77b38;
color: #000000;
}
Should I have this as inline instead of block?=
Code: Select all
#menu li {
display:block;
}
It's impossible for me to test because it looks perfectly fine on everything I've got, but then I'm up to date. Why don't people update! It's free ffs!