...

View Full Version : stacked, nested divs HELP!!



CraigB
04-29-2011, 02:41 AM
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


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


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 :(

CraigB
04-29-2011, 03:10 AM
this is what it is supposed to look like...
http://neaweatherwatcher.com/images/screenshot.jpg

bullant
04-29-2011, 03:30 AM
Your html has some errors in it.

Maybe put it through the w3c html validator (http://validator.w3.org/#validate_by_upload) first and fix the html.

Then maybe put the css through the w3c css validator (http://jigsaw.w3.org/css-validator/#validate-by-upload) 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.

teedoff
04-29-2011, 03:45 AM
Just to add, frontpage is terrible! lol...There are much better FREE text editors out there.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum