logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-20-2011, 01:34 AM   #1
Windbrand
 
Join Date: Sep 2011
Posts: 2
Default Help with image layers

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!
Windbrand is offline   Reply With Quote
Old 09-20-2011, 02:30 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

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

Code:
<!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>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 09-20-2011, 03:33 AM   #3
Windbrand
 
Join Date: Sep 2011
Posts: 2
Default

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.
Windbrand is offline   Reply With Quote
Old 09-20-2011, 04:25 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:36 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com