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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    stacked, nested divs HELP!!

    I hope someone can help me. I am completely new to css and am banging my head over this. I am designing this page in FP2003 (I know it's outdated but I haven't created a webpage in years). In preview, everything looks exactly as it should. In a browser, only the text is visible. What am I doing wrong?

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    
    <link rel="stylesheet" type="text/css" href="siteLayout.css">
    </head>
    
    <div id="wrapper">
    
    	<div id="title">
    	</div><!-- end title div -->
    	
    	<div id="nav">
    	</div><!-- end nav div -->
    	
    	<div id="white">		
     		<div id="content">			
    																	Lorem ipsum 
    		
    		</div><!-- end content div -->			
    	</div><!-- end white div -->
    	
    	
    	
    	<div id="footer">
    
    	</div><!-- end footer div -->		
    
    
    </div><!-- end wrapper div -->
    
    </body>
    </html>
    CSS
    Code:
    body{
    	background-color:	#d7d7d7;
    	
    };
    
    #wrapper{	
    	width			:	1000px;
    	height		:	100%;
    	background-color :	d7d7d7;
    	background-image:	none;
    	margin-top		:	0px;
    	margin-bottom	:	0px;
    	margin-left		:	auto;
    	margin-right	:	auto;
    	padding		:	0px;
    	
    };
    
    	
    #title{
    	height		:	132px;
    	width			:	1000px;
    	margin-top		:	-4px;
    	margin-bottom	:	0px;
    	padding		: 	0px;
    	background-image:   url('images/new-layout_01.jpg');
    };
    
    #nav{
    	height		:	61px;
    	width			:	1000px;	
    	margin-top		:	-4px;
    	margin-bottom	:	0px;
    	padding		: 	0px;
    	background-image:   url('images/new-layout_02.jpg');
    };
    
    #white{
    	display		: 	inline-block;   
    	height		:	100%;
    	width			:	1000px;	
    	margin-top		: 	-4px;
    	margin-bottom	: 	0px;
    	background-image:   url('images/new-layout2_02.jpg');		
    };
    	
    #content{	
    	
    	margin-left		:	75px;	
    	height		:	100%;
    	width			:	850px;
    	
    };
    
    #footer{
    	
    	height		:	118px;
    	width			:	1000px;
    	background-image:   url('images/new-layout_05.jpg');
    
    
    };
    #title, #nav, #white, #footer are to reside within #wrapper. Stacked on on top the other. #content resides within #white.

    The only way I can view this in a browser is to put IE into compatibility mode
    Last edited by CraigB; 04-29-2011 at 02:19 AM.

  • #2
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is what it is supposed to look like...

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Your html has some errors in it.

    Maybe put it through the w3c html validator first and fix the html.

    Then maybe put the css through the w3c css validator to make sure it is all ok as well.

    But looking at your image, I don't see why you would need to stack any elements on top of anything else. You could just set appropriate background images and colours on elements.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Just to add, frontpage is terrible! lol...There are much better FREE text editors out there.
    Teed


  •  

    Posting Permissions

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