IMO the display case is not content, meaning that it should be a background
image. The awards themselves are more arguably content, but does it make
more sense to have the award image as content or use BG images instead?
Again, I think BG images makes more sense.
For markup I'd do it in a list:
<ul class="awards">
<li class="award1"><span>award 1</span></li>
<li class="award2"><span>award 2</span></li>
<li class="award3"><span>award 3</span></li>
<li class="award5"><span>award 5</span></li>
</ul>
.awards { width:500px; height: 500px; position: relative; }
.awards li { width: 100px; height: 100px; display: block; overflow: hidden;
}
.awards li span { width: 100px; height: 100px; margin-left: -9999px; }
.award1 { background-image: url('/awardimages/award-1.jpg'); }
.award2 { background-image: url('/awardimages/award-2.jpg'); }
.award3 { background-image: url('/awardimages/award-3.jpg'); }
.award4 { background-image: url('/awardimages/award-4.jpg'); }
.award5 { background-image: url('/awardimages/award-5.jpg'); }
/* all together/one after the other */
.awards li { float: left; }
/* each in their own spot */
.awards li { position:absolute; }
.award1 { top: 0; left: 0; }
.award2 { top: 0; left: 100px; }
.award3 { top: 0; left: 200px; }
.award4 { top: 0; left: 300px; }
.award5 { top: 0; left: 400px; }
Kevin
On Sat, Nov 20, 2010 at 6:39 PM, MrMusic <[email protected]> wrote:
> 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]
--
--
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]
