PDA

View Full Version : Help with image layers


Windbrand
09-20-2011, 01:34 AM
Hi everyone,
I was wondering if it's possible to stack images on top of each other in html so that the position of the images stacked on top are relative to the bottom image, instead of being relative to the screen edges (eg, 100 pixels above bottom of screen, 200 pixels left, etc)? I want to create a simple image menu like this:

http://i.imgur.com/KgpKr.jpg

Where I have one large image on the bottom, and three image-links on top of it, aligned so that they're always in the same spot relative to the base image no matter what the computer screen resolution is. If I make them relative to the screen edges then computers with different resolutions would display the images out of order.

I'm pretty new to html, using Adobe Dreamweaver CS5.5 at the moment. This is what I have so far:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Main Playlist</title>
</head>


<body>

<!-- Layering priority low -->

<DIV STYLE="{z-index:1;}">
<p><img src="pictures/baseimage.png" alt="baseimage" align="middle"/></p>
</DIV>

<!-- Layering priority high -->
<DIV STYLE="{z-index:2;}">
<p><img src="pictures/button1.png" alt="button1" align="middle"/></p>
</DIV>

<DIV STYLE="{z-index:2;}">
<p><img src="pictures/button2.png" alt="button2" align="middle"/></p>
</DIV>

<DIV STYLE="{z-index:3;}">
<p><img src="pictures/button3.png" alt="button3" align="middle"/></p>
</DIV>

</body>
</html>


Quite obviously it's not right as I have no idea how to set the buttons so they are "X pixels from the top/bottom/left/right of the base image".

Thanks!

edbr
09-20-2011, 02:30 AM
heres a way using a class with margins for the images then by using a containing div positioned absolutely it will get what you want . but i suspect there is an easier way

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">

.container{position:relative; padding-top:auto; height:700px; width:300px; border:#666 solid 1px;}

.btm{ position:absolute; height:auto; bottom:0;border:#666 solid 1px}

.stac{margin-bottom: 10px; border:#666 solid 1px;
}
</style>
</head>

<body>
<div class="container">
<div class="btm">
<img class="stac" name="" src="" width="300" height="32" alt=""><img class="stac" name="" src="" width="300" height="32" alt="">
<img class="stac" name="" src="" width="300" height="32" alt="">
<img class="stac" name="" src="" width="300" height="32" alt="">

</div>

</div>


</body>

Windbrand
09-20-2011, 03:33 AM
Thanks for the reply.
I tried your code but the positioning is still wrong, the buttons now overlap but appear on the bottom left. The image I used in the first post is simply an example, they're not the dimensions of the images I'm actually using.
The base image is 388(width)x633(height), and the buttons are 245x53.

edbr
09-20-2011, 04:25 AM
i wasnt trying to write it for you but what i did works so if you use that principle and edit to suit i think you will get what you want