...

View Full Version : Disappearing divs when fixing relative positioning...



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"> <!-- entire 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> <!-- entire page -->

</body>
</html>

abduraooft
11-16-2010, 07:27 AM
I am trying to fix the white areas left behind by relative positioning :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.

phpdeveloper
11-16-2010, 05:14 PM
If possible then please give us site URL.
It is help full to us check with some css tools to solve this problem.

A5H13Y
11-16-2010, 07:06 PM
If possible then please give us site URL.
It is help full to us check with some css tools to solve this problem.

Unfortunately it is not online yet, still in the development stage, or I would (& it's not my personal site so I can't just put it online).

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum