Help with image layers

Windbrand · 09-20-2011, 02:37 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:

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:

Code:

<!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!

sunfighter · 09-20-2011, 03:50 PM

You don't need to use z-index. I give you an example below. The three divs inside the main are positioned relatively so they are a distance from the top of the main div. All will position together. This example will have them in the top left corner because there are no other items in the body. But when you get a page ready you can move them as a group, just position the main anywhere and any how you want. If you need it attached to the bottom of the page = place a footer div in your code and place the main inside of the footer.

PS. I used a background color because you do not have my image but show a commented background -image where you can place yours.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>New document</title>

<style type="text/css">
#main {
//background-image: url('images/6.png');
background-color: blue;
width: 100px;
height: 200px;
}
#div-1a {
background-color:#d33;
color:#fff;
width: 100px;
height: 35px;
 position:relative;
 top:25px;

}
#div-1b {
 background-color:#3d3;
 color:#fff;
 width: 100px;
height: 35px;
 position:relative;
 top:50px;
}
#div-1c {
 background-color:#33d;
 color:#fff;
 width: 100px;
height: 35px;
 position:relative;
 top:75px;
}
</style>
</head>

<body>

<div id="main" >
<div id="div-1a"></div>
<div id="div-1b"></div>
<div id="div-1c"></div>
</div>

</body>
</html>

Windbrand · 09-21-2011, 01:14 AM

Thank you for your help. I used your idea and made my own and it worked great.