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

Oak · #1 Mar 2nd, 2008, 20:50

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 · #2 Mar 3rd, 2008, 09:49

Quote:

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 · #3 Mar 4th, 2008, 10:50

Can someone please give some feed back?

Rob · #4 Mar 4th, 2008, 11:37

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 · #5 Mar 4th, 2008, 12:19

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 · #6 Mar 4th, 2008, 12:36

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 · #7 Mar 4th, 2008, 13:35

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 · #8 Mar 4th, 2008, 14:00

sorry, i misunderstood your code.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page looks straight in IE, FireFox makes everything look crooked. Simple Fix?	BlackReef	Web Page Design	5	Dec 20th, 2007 02:14
Using css to print straight to screen?	nate2099	Starting Out	9	Apr 8th, 2007 08:14
Background or img?	rubyfruit	Web Page Design	7	Nov 9th, 2006 06:22
Background and Resolution compatibility, My background gets cut off	Funion	Web Page Design	1	Dec 4th, 2005 04:42
error message cant get straight	monkboy12345	PHP Forum	1	Apr 15th, 2005 21:34

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css background img .. not so straight froward it seems?