Problems with css menu, using "li class"

[noahnordqvist]

I recently started working on my first actual website and wanted to try out "li class"-command with unique menu-bars, unfortunately, I couldn't make it align properly, and I was wondering if someone could help me?

Here's the css code for the menu and the #nav (these are written inside the same DW-document, named style.css):


#menu {
width:944px;
height:100px;
margin-bottom:10px;
float:left;
}

ul#nav li.hem {
list-style:none;
}

ul#nav li.kontakt {
list-style:none;
}

ul#nav li.ommig {
list-style:none;
}


ul#nav li.hem a:link, a:visited {
height:80px;
width:315px;
padding:10px;
background:url(menubar1.jpg);
float:left;
}

ul#nav li.kontakt a:link, a:visited {
height:80px;
width:308px;
padding:10px;
background:url(menubar3.jpg);
float:left;
}


ul#nav li.ommig a:link, a:visited {
height:80px;
width:320px;
padding:10px;
background:url(menubar2.jpg);
float:left;
}

ul#nav li.hem a:hover {
background:url(menubar1hovered.jpg);
}

ul#nav li.kontakt a:hover {
background:url(menubar3hovered.jpg);
}

ul#nav li.ommig a:hover {
background:url(menubar2hovered.jpg);
}

ul#nav li.hem a:active {
background:url(menubar1presseddown2.jpg);
}

ul#nav li.kontakt a:active {
background:url(menubar3presseddown2.jpg);
}

ul#nav li.ommig a:active {
background:url(menubar2presseddown2.jpg);
}



Also, here's the html-code for the menu:

<div id="menu">

<ul id="nav">
<li class="hem"><a href="#"></a></li>
<li class="kontakt"><a href="#"></a></li>
<li class="ommig"><a href="#"></a></li>
</ul>

</div>

[Nile]

Did you want the text to be centered vertically and horizontally?
Please post a link to the page on your site that contains the problematic script so we can check it out.

[noahnordqvist]

I want it to be horizontal!

Here's the site: http://www.noah.cssninja.se

[Nile]

The reason that the lists are not lined up is because the area in the div isn't great enough to allow the width of three or more lists.


#menu {
width:944px;
height:100px;
margin-bottom:10px;
float:left;
}

You could make each image and li smaller or you can make the menu div's width bigger.