0

Guys I creating a layout with several different pictures. but when I put them on the site they stack on top of each other. They should be in their respective places on the layout.

Instead when I load them, they bunch up in the middle one of top of the other.
I tried using the z-index(see code below) but I can't get it to work.


Here's my code:

<html>
<head><TITLE>This is the Title</TITLE></head>
<style type="text/css">
 body {
 text-align: center;
}

#container {
 margin: 0 auto;
 width: 1024px;
}

#toppage {
 position: relative;
 top: 0px;
 left: 0px;
 z-index: 10;
}

#picture {
 position: relative;
 top: 30px;
 left: 0px;
 z-index: 20;
}

#nextpicture {
 position: relative;
 top: 0px;
 left: 325px;
 z-index: 30;
}
</style>

<div id="container">

<body bgcolor="white">

<div id='toppage'><p align="center"><img src="headerpicture"</p></div>

<div id='picture'><p align="center"><img src="picture1"/></p></div>

<div id='nextpicture'><p><img src="picture2"/></p></div>

</body>
</div>
</html>

Edited by HoneyBadger: n/a

2
Contributors
5
Replies
6
Views
5 Years
Discussion Span
Last Post by weekendrockstar
0

well guys I KINDA got it to work....

everything is in it's proper place. but I had to use negative numbers in the z-index.
Which in tuns means I have huge scroll bars for empty space.

why did adding negative z-index cause large empty spaces to appear?

Here's my new code:

<html>
    <head><TITLE>This is the Title</TITLE></head>
    <style type="text/css">
    body {
    text-align: center;
    }
     
    #container {
    margin: 0 auto;
    width: 1024px;
    }
     
    #toppage {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 10;
    }
     
    #picture {
    top: 30px;
    left: 0px;
    position: relative;
    z-index: 20;
    }
     
    #nextpicture {
    top: -383px;
    left: 44px;
    position: relative;
    z-index: 30;;
    }
    
    #thirdtpicture {
    top: -678px;
    left: 742px;
    position: relative;
    z-index: 40;
    }
    </style>
     
    <div id="container">
     
    <body bgcolor="white">
     
    <div id='toppage'><p align="center"><img src="headerpicture"</p></div>
     
    <div id='picture'><p align="center"><img src="picture1"/></p></div>
     
    <div id='nextpicture'><p><img src="picture2"/></p></div>
   
    <div id='thirdpicture'><p><img src="picture3"/></p></div>
     
    </body>
    </div>
    </html>
0

What browsers have you tried? IE tends to have similar problems with z-index. If the problem occurs in other browsers I am not positive what the cause would be.

0

I was using Firefox, I used Firefox both inside my Linux virtual machine and my Windows host, and it had these same huge scroll bars on the side and bottom.

Edited by HoneyBadger: n/a

0

Hmm I'm not positive why you'd have this problem however one slight thing I noticed is that your css for the thirdpicture div has an extra 't' in the class definition "thirdtpicture". Not sure that that would fix any problem but it could cause at least a bit of a problem for that div because it's not actually being affected by css. And there's an extra semicolon at the end of nextpicture. Again, not sure that'll fix anything but it could still be taken out. If those do not fix anything then let us know and I'll keep trying to think of something.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.