Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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>

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you for your help. I used your idea and made my own and it worked great.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •