1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

z-index

Discussion in 'Web Development & Web Hosting' started by twizzle, Mar 14, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Anyone here help me with some CSS? I'm trying to learn it anf do a website based on it by Thursday. I'm currently having issues with the z-index. I want to overlay 2 images one on teh other. To do this it seems i need z-index in my css if i dont want to use tables.

    I've followed tutorials i find but it just doesnt seem to work on my page.

    Heres my html :-

    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1? />

    <title>Mobile Runtime
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
    <div class="mainimage">
    <img src="images/background1.png" />
    </div>
    <div class="headerimage">
    <img src="images/header.png" />
    </div>
    </body>
    </html>

    and here's teh CSS style sheet to go with

    body {background-color: #000000;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 50% -5%;
    }


    div.mainimage { margin-top: 75px;
    margin-left: 300px;
    z-index: 1;

    }


    div.headerimage {
    margin-top: 70px;
    margin-left: 340px;
    z-index: 2;
    }


    No matter what i do it always puts one image either above or below teh otehr one not overlaid. Anyone help?
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. MLP

    MLP Kilobyte Poster

    305
    19
    42
    Hi

    Try adding
    Code:
    position:relative
    in a div that contains the two other divs. I.e.

    Code:
    <body>
    [B]<div class="container">[/B]
    <div class="mainimage">
    <img src="images/background1.png" />
    </div>
    <div class="headerimage">
    <img src="images/header.png" />
    </div>
    [B]</div>[/B]
    </body>
    </html>
    
    with the CSS:
    Code:
    [B]div.container {
    position:relative;
    }[/B]
    
    div.mainimage {	margin-top: 75px;
    margin-left: 300px;
    z-index: 1;
    
    }
    
    
    div.headerimage {
    margin-top: 70px;
    margin-left: 340px;
    z-index: 2;
    }
    It might not work as my CSS skills aren't great. Have a look at this site for a better explanation.

    Hope this helps


    Maria
     
    Certifications: HND Computing
    WIP: 70-680, 70-270, 70-290
  3. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Thansk for that Maria, unfortunatley it didnt work. Looks like one time i'm gonna have to use tables to get it all aligned right.
    I just cant seem to get teh Z-index thing to work. Or maybe its teh whole of my CSS.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  4. MLP

    MLP Kilobyte Poster

    305
    19
    42
    I think I may have mis-informed you there! Try adding position:relative; to each of the div's CSS, so that your HTML is as it was, and the CSS is:

    Code:
    div.mainimage {	margin-top: 75px;
    margin-left: 300px;
    z-index: 1;
    [B]position:relative;[/B]
    
    }
    
    
    div.headerimage {
    margin-top: 70px;
    margin-left: 340px;
    z-index: 2;
    [B]position:relative;[/B]
    }
    Other than that, I'm not sure.

    Maria
     
    Certifications: HND Computing
    WIP: 70-680, 70-270, 70-290
  5. soundian

    soundian Gigabyte Poster

    1,460
    71
    107
    Putting the two images in different DIVs won't work. A DIV is a block level component and will always follow the flow of the page. A DIV will follow a DIV (unless you nest them of course, but then one image would still be in a different DIV to the other). The z-index only comes into play when two items are vying for the piece of screen real-estate so you have to make sure they're doing that first.
     
    Certifications: A+, N+,MCDST,MCTS(680), MCP(270, 271, 272), ITILv3F, CCENT
    WIP: Knuckling down at my new job
  6. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    104
    Soundian, thats excatlt what thier doing in my design. I have several images all overlaid. I just cant get it to work in CSS. Here's teh site in HTML www.squiretwizz.co.uk/mobile using tables its fine. But i want to try using CSS instead.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,

Share This Page

Loading...