Bottom aligned horizontal list menu

HTML & CSS
1

Hi everyone. I’m just getting back into web development after a long time, and I’m a bit rusty, so please excuse any dumb mistakes!
I’m trying to build a really simple horizontal menu using an unordered list. This is at the bottom of a large gradient bar, which is supposed to change with a rollover background that lines up with the rest of the bar. I’m having trouble getting this to work - I’ve tried several methods but I can’t seem to get the text to sit at the bottom and the mouseover background to stay where it is. I’ve managed both, but not at the same time!
Here’s the relevant css as it looks now:

.nav{
position:absolute;
	top:0px;
	height: 89px;
	left:340px;
	right: 0px;
}
.nav ul{
	list-style: none;
	padding: 0;
	border: none;
	height: 89px;
	font-size:18px;
	line-height:155px;	
}
 
.nav li {
	float: left;			
	height: 89px;	
}
 
 
.nav li a{
	color: #FFFFFF;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom:0px;
	height: 89px;
}
 
.nav li a:hover{
	background-image: url(images/top/over.gif);
	padding-left: 5px;	
	padding-top: 68px;
	padding-bottom:0px;
	color: #FFFFFF;
	height: 89px;
}

Here’s the html where it’s called in:

<div class="nav"><ul>
<li><a href="blah">home page</a></li>
<li><a href="blah">Profile</a></li>
<li><a href="blah">testimonials</a></li>
</ul></div>

I’ve uploaded a sample page here if anyone wants to take a look. The full css file is [url=oxdance.com/test/ah.css]here.

All help gratefully received!

2

it’s a bit tricky (for me anyway) to help because two images, presumably one of which is the one which needs to line up with the menu, isn’t loading: both have http://192.168.0.2/ahphotography/… addresses. (is 192.168.0.2 a local IP address? think it is). anyway, maybe change those to normal working addresses to help people see what’s what.

3

this might be helpful

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
<style type="text/css">

*
{
	padding: 0;
	margin: 0;
}

body { background-color: black; }

#nav
{
	position: absolute;
	top: 0px;
	left: 340px;
	list-style: none;
	font-size: 18px;
}

#nav li
{
	float: left;
	display: block;
}

#nav li a
{
	color: #FFFFFF;
	padding: 89px 5px 0px 5px;
	display: block;
}

#nav li a:hover
{
	background-image: url(images/top/over.gif);
}



</style>
</head>
<body>

<ul id="nav">
<li><a href="blah">home page</a></li>
<li><a href="blah">Profile</a></li>
<li><a href="blah">testimonials</a></li>
</ul>

</body>
</html>
4

thanks for your reply. Sorry about the broken images - yes that’s my local server, and of course it all looked fine to me! Should be working fine now.
Nearly there. With a bit of fiddling round I found that with your code I can get what I want by reducing the top padding to 64px and dropping the top positioning down 4px - otherwise the text hangs down below the background image and the mouseover image doubles up on itself…

I’ve updated my test page at the above address to show the new css.

It seems a bit hacky all this pixel-jiggering I’ve done, but it seems to work in a few browsers all though I haven’t tested it in the dreaded ie yet (that involves kicking my kids off the windoze machine, so I’ll wait till they’re at school tomorrow)

Also I’d prefer it if the text wasn’t right on the bottom of the graphic, but I’m sure I can come up with something to do about that… not quite sure what yet…

Any idea how to make it less hacky?

edit -also I’ve added a highlight class to show which page you’re on and again I’m having trouble getting the bg to line up… at the moment it’s just

.currentpage{
	background:url(images/top/current.gif);
}
5

Hi, me again! I’d forgotten I had been messing around with where the background wrapped around and had manually wrapped it within the rollover image, which was why my select image wasn’t lining up!

It’s all sorted now and seems to work in all the browsers I’ve thrown it at, with a little bit of minor weirdness in ie6 (rollover not showing up). It still seems a little hacky because I basically had to keep trying different values in the top padding until one worked, but unless you’ve got any better ideas I reckon it’ll do the job!

here’s the css I’ve ended up with:

.nav{
position:absolute;
	top:0px;
	height: 89px;
	left:340px;
	right: 0px;
	list-style: none;
	font-size:18px;
}
.nav li {
	float: left;			
	display:block;	
}


.nav li a{
	color: #FFFFFF;
	padding: 67px 5px 0px 5px;
	display:block;
}

.nav li a:hover{
	background-image: url(images/top/over.gif);
}
.currentpage{
	background-image: url(images/top/current.gif);
}

and here’s the html:

<div class="nav"><ul>
<li><a href="blah">home page</a></li>
<li><a href="blah" class="currentpage">Profile</a></li>
<li><a href="blah">testimonials</a></li>
</ul></div>

Thanks for your help Johnyboy. It’s very much appreciated!