Can someone point me to a tutorial?

[Geezer D]

If this can be done, of course.

What I want to do is make a horizontal navigation across the top of my page, with images that will change on rollover.

I know it can be done with javascript, but I just want to see if I can do it with only CSS.

The link images are all different widths (different words).
I've made all the link images with a split image, with what I want for the initially displayed image at bottom, and the rollover image at top, so I can use it as the background, and push the background down on rollover, if this is possible.

Similar to http://www.dynamicdrive.com/style/csslibrary/item/arrow_green_vertical_menu/
but that example uses plain text, and the same image for the background on all, and it's vertical.
I will use no text, as the images say what the links are.

I would imagine there's a tutorial on it somewhere, so you wouldn't have to explain it all here. (?)

Thanks in advance.

[Schmoopy]

http://www.seoconsultants.com/css/menus/tutorial/

Might be worth looking at, or just search

"how to make css horizontal menu" in google, good luck,

Jack.

[bluewalrus]

i think if you set a background image for the "a {" and then for "a:hover{" the other image. This will flip from one image to the other when the mouse is on it and you can put text over it.

[Geezer D]

i think if you set a background image for the "a {" and then for "a:hover{" the other image. This will flip from one image to the other when the mouse is on it and you can put text over it.

I don't want any text, though. The image says what the link is.

[Schmoopy]

Ok, here's what you could do:

CSS:



.link{
background:url(images/buttons/image.png) no-repeat;
}
.link:hover{
background:url(images/buttons/image_over.png) no-repeat;
}


Then for the HTML you would put this:



<a class="link" href="index.html"></a>


Hope this helps you,

Jack

[Geezer D]

That uses 2 different images, and doesn't specify any width, or move the background.
Doesn't do anything as I described.

Here's one of the link images: http://www.defossesdesign.com/about.png

They're all 80px tall, so I need to somehow make each li (list item) box 40px tall, but all with their own width, since they each say different words.
It would have the bottom part showing for the background, then the top would show on hover.

Or maybe I can't do it with a background, since the li will be empty?

Maybe put the image in the li, and somehow move it down on hover?

[Schmoopy]

Oh I see what you mean, then maybe you can use this (since I don't know what images you're working with you'll have to adjust it to your needs), also note that it's better to use a horizontal image that moves left or right on rollover than one that moves up or down:

CSS:



.link{
background: url(image.png) no-repeat;
background-position: 3px 5px;
}

.link:hover{
background: url(image.png) no-repeat;
background-position: 3px -85px;
}


Then just adjust the width according to how big the image you're working with is.

Here's also a link explaining in more detail: http://www.tanfa.co.uk/css/examples/rollover-images-no-preload2.asp

[Geezer D]

OK, so then repeat that for each one, and replace where it has "link" with the name of that link (like "about" and "images/about.png")?

[Schmoopy]

OK, so then repeat that for each one, and replace where it has "link" with the name of that link (like "about" and "images/about.png")?

Yea, so replace "index.html" with whatever page you want, and then replace the url(image.png) with wherever you image is stored and change the CSS positioning to suit how tall your images are, so if it's 80px you probably need to move it 40px down (if it was exactly half and half), but just change it to suit you,

say if you have any more problems.

[Schmoopy]

After taking your "about.png" image I have modified the CSS, here is what you need to get it to work:

CSS:



a.link, a.link:visited{
background: url(about.png) no-repeat;
background-position: 0px 0px;
display: block;
width: 125px;
height: 40px;
text-decoration: none;
}

a.link:hover{
background: url(about.png) no-repeat;
background-position: 0px -40px;
}


Then the HTML:



<a class="link" href="home.html"></a>


Hope this works for you.

Jack.

[Geezer D]

OK, almost there.

That last bit won't work, since all the images have different widths and images.

Anyway, here's what I have so far: http://www.defossesdesign.com/mockups/box/
CSS is at http://www.defossesdesign.com/mockups/box/styles.css

No working links, though, it just moves the background.
See the little blue dot in the top left corner of each? That's the a href :(

[Schmoopy]

Ok, think I've fixed this now, change your code to the following:

Add "display:block" to the link classes, e.g. ".about":




.about {
width:129px;
height:40px;
display:block;
background: url(about.png) no-repeat;
background-position: 0px -40px;
}

.about:hover{
width:129px;
height:40px;
background: url(about.png) no-repeat;
}



And then change your HTML to:



<li><a class="about" href="about.html"></a></li>


And do this for the others to, so that the class is contained in the <a> tag and not in the <li> one.

I did download your files and when I made these changes it definitely worked, hope this helps :)

Jack.

[Geezer D]

That done it!

Thanks, Jack!

[Schmoopy]

No problem :)