question about css layouts...

**bigfreak** · 02-02-2007, 11:12 PM

based on the feedback i got about not having scroll bars in a page, here's a tough question.

i am making a new site, it has a header and then the body is solid white. there is a background colour. I want to plan for text overflow, and have the site work.

Should i make the header one piece and then the body a seperate piece so tha it can flow?

Does any of this make any sense?

**LadynRed** · 02-03-2007, 11:40 AM

Yes, it makes sense, and yes that would be the method to use.

Use a "wrapper" that will contain the rest of your layout, set it to position: relative.

Then 'stack' your layout:
header
content
footer

If you're using horizontal navigation, you can put it under the header.
You can divide content into multiple columns if needed.
The content area will be what stretches vertically as needed.

**bigfreak** · 02:02 PM

oh man, now where did that dictionary go...

ihere's what i have so far shortly, maybe that will help me understand what the heck you're talkin about! I would like to change the nav so they change colour, but i'll get to that. I can't use the font as normal, because i think the font isn't a standard one.

http://www.insiteci.com/sample/perfect/

thanks!!

**LadynRed** · 05:56 PM

Ok.. try this:

Quote:

<!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=iso-8859-1"><title>Untitled Document</title>

<link href="justperfect_files/perfect.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainbody">
<div id="sidepics"></div>
<div id="text">

<h1>Welcome to Just Perfect Designs! </h1>
<p>This is our new website. </p>
</div>

</div>
<br class="brclear" /> 
<div id="footer">

</div> 

</div>

</body>
</html>

and CSS

Quote:

body {
margin: 0px;
padding: 0px;
font: 101% Arial, Helvetica, sans-serif;
background-color: #9eab69;
text-align: center;
}
#container {
position: relative;
width: 780px;
height: 595px;
margin: 0px auto;
}
/*#body, #header, #mainbody, #text, #sidepics{
position: absolute;
overflow: visible;
left: 414px;
width: 0px;
top: 484px;
height: 422px;
}*/

#mainbody {
height: 495px;
width: 780px;
/*top: 98px;
left: 0px;*/
font-size: 12px;
background-image: url(background_02.gif);
background-color: #FFFFFF;
border: 1px solid white;
text-align: left;
}
#sidepics {
float: right;
margin: 15px 20px 5px 10px;
height: 347px;
width: 106px;
display: inline; /* for IE 6 and below only */
/*top: 116px;
left: 656px;*/
background-color: #0000CC;
background-image: url(pics.gif);

}
#text {
/* top: 116px;
left: 7px;*/
width: 565px;
padding: 5px;
border: 1px solid blue;
}
#header {
width: 780px;
height: 97px;
/*left: 0px;
top: 0px;*/
background-image: url(background_01.gif);
border: 1px solid white;
}

img.floL {
float: left;
margin-left: 0px;
padding: 0px;
padding-top: 2px;
}

#text h1{
color: #9EAB69;
font-size: 120%;
font-family: "Trebuchet MS" sans-serif;

}
/* to clear floated elements */
.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

I took out the absolutely positioned stuff, you don't need it and it will defeat your 'stretching' body section.

**bigfreak** · 09:40 PM

wow, you're smooth!

now i just need to look at that and figure out what it all means.

I'll use the features in FF to play and see what does what, just the way i learn. Like how to not repeat the background. I know how to do it, just need to remember.

You're the goods kid!

there's just one thing... no dice in FF, doesn't work... hmmm what have i missed...

THANK YOU!!!!!

**bigfreak** · 02-03-2007, 10:27 PM

ok, when i play around with the css, it seems that the height of the background_02.gif div tag is the issue?

when i remove the height, it works, well until i make the font small, then it doesn't lol!

**LadynRed** · 02-04-2007, 11:06 AM

Take the height off of #mainbody.
The only time I could see any 'problem' with that is by shrinking the text down to such a small size, no one could read it anyway.

You can put in min-height: 400px, but IE doesn't support min-height, so that presents a problem if you were to use it.

I would also recommend that you not specify your font sizes in pixels. People with IE 6 and below will not be able to re-size the text to suit their needs. Better to use em or percentages. 70% is equal to 12px.

**bigfreak** · 02-04-2007, 03:06 PM

oh man, looks like i got it working!

thanks Lady! I can't add any more talkupation to you but i will when i can!

I'm going to play with it a little more and see what i can learn.

THANK YOU!

**dionak** · 02-04-2007, 09:36 PM

Nice one, LadynRed!