css background img .. not so straight froward it seems?

[Oak]

I know how to add images/background images, but in this situation the hover efect has thrown me!..having problems.

If you take a look at this page you will find the css included, I will create separate doc once the page is done.

http://www.capoeiracanal.co.uk/index-home.php

The code bellow shows 2 ways in which an image has been added, for both methods I can's see how can I repeat it for a different img?

line 85-91

HTML: Select all

#hoverpage ul#outer li div em {display:block; width:190px; height:300px; float:left; background:transparent url(img/current5.gif) no-repeat; margin-right:10px;}

#hoverpage ul#outer li.p1 div em {background-position: 21px 25px;}
#hoverpage ul#outer li.p2 div em {background-position: 21px 50px;}
#hoverpage ul#outer li.p3 div em {background-position: 21px 75px;}
#hoverpage ul#outer li.p4 div em {background-position: 21px 100px;}
#hoverpage ul#outer li.p5 div em {background-position: 21px 125px;}

HTML: Select all

 #hoverpage ul#outer li div img {border:1px solid #888; float:left; margin: 0px 0px 0px -225px;}

then applying this to the html page.

HTML: Select all

<img src="img/Map2.jpg" alt="Map of Capoeira Canal's studio locations"/>

(I have just edited this post in the hope that I have made myself question clearer)

Thanks

[Oak]

This is how it has been done for one image, how can I repeat it for a different img?

I mean how do I apply another image with different styles?

[Oak]

Can someone please give some feed back?

[Rob]

I think no one has replied because they dont totally understand your question.

Please explain more clearly what you are trying to achieve Oak, because it confused me and most likely others.

[Oak]

An image has been added using the the code bellow. I want to add an additional image but can not work out how.

I am thinking I need to change (em) and then repeat everything else?

HTML: Select all

 line 85-91

#hoverpage ul#outer li div em {display:block; width:190px; height:300px; float:left; background:transparent url(img/current5.gif) no-repeat; margin-right:10px;}

#hoverpage ul#outer li.p1 div em {background-position: 21px 25px;}
#hoverpage ul#outer li.p2 div em {background-position: 21px 50px;}
#hoverpage ul#outer li.p3 div em {background-position: 21px 75px;}
#hoverpage ul#outer li.p4 div em {background-position: 21px 100px;}
#hoverpage ul#outer li.p5 div em {background-position: 21px 125px;}

http://www.capoeiracanal.co.uk/index-home.php

[Rob]

ok, it looks like you've gone down the one image for many nav items route.

This is avery good method to ensure flicker free navigation.

You wil need to edit your image current5.gif

Add on the additional new image portion.

Then

Code: Select all

#hoverpage ul#outer li.p6 div em {background-position: 21px 150px;}

[Oak]

Unless I am misstaken this will only show the img on li.p6 (page 6) of the hover nav.

HTML: Select all

ul#outer li.p6

I can also add an image using this code bellow, but I still can not work out to
do it for more than one image on the same page.

#hoverpage ul#outer li div img {border:1px solid #888; float:left; margin: 0px 0px 0px -225px;}

Then placing the code bellow in the body:

HTML: Select all

<img src="img/map.jpg" alt="Map of Capoeira Canal's studio locations"/>

[Rob]

sorry, i misunderstood your code.