Horizontal navigation menu using images

[AsteroidMonkey]

Hey Guys,

Looking for a little help…

I am tryin to create a horizontal nav menu following chris’ tutorial- TUTORIAL

I think I’ following it pretty much spot on, changing the sizes as I need them to fit obviously. My problem is the actual buttons aren’t showing up when I test the page in any browser.

Here is a shot of the nav menu

And here is my HTML…

Home


Platforms


Sources


Editor


Contact

AND CSS…

ul#nav {



}

ul#nav li {

display: inline;

}

ul#nav li a {

display: block;

height: 83px;

text-indent: -9999px;

float: left;

}

ul#nav li.home a {

width: 198px;

background: url(images/nav-home.jpg) bottom center no-repeat;

}

ul#nav li.platforms a {

width: 220px;

background: url(images/nav-platforms.jpg) bottom center no-repeat;

}

ul#nav li.sources a {

width: 190px;

background: url(images/nav-sources.jpg) bottom center no-repeat;

}

ul#nav li.editor a {

width: 191px;

background: url(images/nav-editor.jpg) bottom center no-repeat;

}

ul#nav li.contact a {

width: 221px;

background: url(images/nav-contact.jpg) bottom center no-repeat;

}

ul#nav li a:hover {

background-position: center center;

}

Thanks for any help you can give.

[zackw]

im guessing its the links to your images… try putting background:url(../images/nav-home.jpg) bottom center no-repeat;

if you can post a link I can help you much better

[AsteroidMonkey]

It worked!

Thank you so much can’t believe I missed that.

Cheers mate.

[AsteroidMonkey]

Thanks guy, much appreciated!

[zackw]

I never put my images and css in the same folder :) but thats just me

[Author]

Posts