Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Pennsylvania, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disappearing divs when fixing relative positioning...

    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?


    Code:
    <!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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I am trying to fix the white areas left behind by relative positioning
    Are you talking about the browser specific default value of margin applied on the <body> element? If so, add
    Code:
    *{margin:0; padding:0;}
    into your CSS to nullify all such properties in all elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Posts
    149
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Give site URL

    If possible then please give us site URL.
    It is help full to us check with some css tools to solve this problem.

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Pennsylvania, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by phpdeveloper View Post
    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).

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Pennsylvania, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Are you talking about the browser specific default value of margin applied on the <body> element? If so, add
    Code:
    *{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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •