Hi Ashley, it won't be too difficult once you get to know how it works.
1. make the div that contains the main image a relative in css:
#image_award_div { position:relative }
2. put the main image into that div in html
3. prepare some additional styles for the upcoming awards images -
make their position "absolute" so you can place them wherever you
want:
.award1
{
position:absolute;
top: 20px;
left:20px;
}
4. add the prepared class names to the images that should be on top:
<img src="this_award.jpg" class="award1" />
and google up : "position absolute css" , "position relative css" ->
this will give you all the knowledge you need
2010/11/21 MrMusic <[email protected]>:
> Hello,
>
> I am trying to figure out how to layer multiple small images over a
> larger image. Let me explain what I am trying to do.
>
> I have a site where my members earn medals and badges. I have created
> a nice large image, filling almost the entire page, which is an image
> of an award display case.
> I want to be able to design, using CSS, a set where each medal and
> badge has its specific place over the display case image. Thus
> allowing me to simply program each members page as they earn a
> particular award.
> I understand doing it this way would make each award show up in its
> particular established spot, meaning they would not show up in order,
> which is fine.
>
> Can anyone help me with a template so I can get started with this. As
> a total newbie, I have tried to figure this out myself with no
> success.
>
> Any help with this project would be greatly appreciated.
>
> Ashley
>
> --
> --
> You received this because you are subscribed to the "Design the Web with CSS"
> at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
--
BAZINGA Designs
Igor Wnuk
Ul. PCK 5/20
24-100 Puławy
tel. 667 200 706
REGON: 060622686
NIP: 716-255-43-47
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
