Disappearing divs when fixing relative positioning... [Archive]

A5H13Y

11-15-2010, 10:57 PM

I am trying to fix the white areas left behind by relative positioning by absolute positioning divs and placing them within relatively positioned divs. This works for the logos and white background in the header, however, when I do it for the pictures and link bar, they just disappear. I don't know if it's a problem with my z-indexing (although I don't think it is). Any ideas?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Class of 2014</title>

<style type="text/css">

div.page {
margin:0 auto;
width:900px;
}

div.header {
width:900px;
}

div.white_header {
width:750px;
height:160px;
position:absolute;
left:75px;
bottom:-20px;
z-index:2;
}

div.picture {
background-color:#000000;
width:712px;
height:94px;
position:absolute;
left:467px;
bottom:300px;
z-index:3;
}

div.lehigh_logo {
width:375px;
height:38px;
position:absolute;
top:25px;
left:75px;
z-index:2;
}

div.class_of_2014 {
width:245px;
height:70px;
position:absolute;
left:577px;
z-index:1;
}

div.link_bar {
width:750px;
height:36px;
position:absolute;
left:447px;
bottom:257px;
z-index:3;
}

div.links {
font-weight:bold;
width:750px;
height:36px;
position:absolute;
left:65px;
bottom:315px;
z-index:4;
}

div.grey_divider {
width:900px;
position:absolute;
left:425;
z-index:1;
}

div.body {
width:900px;
height:525px;
background-color:#999999;
top:500px;
}

a:link {
color:white;
text-decoration:none;
}

a:visited {
color:black;
text-decoration:none;
}

a:hover {
color:black;
text-decoration:none;
}

a:active {
color:black;
text-decoration:none;
}

li {
display:inline;
padding-right:40px;
}

/* fix relative positioning white space problem */

div.rel_logos {
position:relative;
z-index:1;
float:left;
}

div.rel_white {
position:relative;
z-index:2;
float:left;
}

div.rel_greydivider {
position:relative;
z-index:1;
float:left;
}

div.rel_picture {
position:relative;
z-index:3;
float:left;
}

/*END CSS*/
</style>

</head>

<body>

<div class="page"> 

<div class="rel_logos">
<div class="lehigh_logo">
<img src="lehigh_logo.png" />
</div>
</div>

<div class="rel_logos">
<div class="class_of_2014">
<img src="class_of_2014.png" />
</div>
</div>

<div class="header">
<img src="brown_header_bg.jpg" />
</div>

<div class="rel_white">
<div class="white_header">
<img src="white_header_bg.png" />
</div>
</div>

<div class="rel_picture">
<div class="picture">
<img src="pictures.png" />
</div>
</div>

<div class="links">
<ul>
<li><a href="http://www.lehigh.edu">Lehigh</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

<div class="rel_greydivider">
<div class="grey_divider">
<img src="grey_divider.jpg" />
</div>
</div>

<div class="body">
</div>

</div> 

</body>
</html>

A5H13Y

11-16-2010, 07:09 PM

:confused: Are you talking about the browser specific default value of margin applied on the <body> element? If so, add *{margin:0; padding:0;} into your CSS to nullify all such properties in all elements.

What I mean is this... When using position:relative, a white space appears where the image would be, and when I move the image, it stays there since I guess I'm only moving a copy of the image (it's kind of confusing for me, I've just recently self-taught myself CSS). So I discovered a fix by absolutely positioning images & putting a relatively positioned div around them. My problem is that it worked for the 1st couple, but now it's making the images disappear.