Member Avatar for HoneyBadger

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 because: n/a
  • 2 Contributors
  • 5 Replies
  • 155 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by weekendrockstar
Member Avatar for HoneyBadger

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>
Member Avatar for HoneyBadger

anyone?

Member Avatar for weekendrockstar

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.

Member Avatar for HoneyBadger

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 because: n/a
Member Avatar for weekendrockstar

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.