Forum Moderators: not2easy
Can anyone recommend any comprehensive, online tutorials on how to make a basic, one-column, three-div CSS Web site?
I want to learn correctly.
basic, one-column, three-div CSS Web site
Truth to tell, I don't think I've ever seen a tutorial on making a one-column web page.
I would recommend looking at some of the better information about a basic two column layout, as these will give you sense for how html elements and CSS hang together, then when making a one column layout, you simply ignore all the fancy stuff about splitting things into two columns.
A one column layout doesn't require any fancy stuff, since the block level elements used to design a page automatically stack in one, vertical column anyway. So if you want a three div, one column layout (as in a header, content block, and footer, I presume), you would use this mark up...
<div id="wrapper">
<div id="header">
<!-- header content -->
</div>
<div id="content_outer">
<div id="content_inner">
<!-- content content -->
</div>
</div>
<div id="footer">
<!-- footer content -->
</div>
</div>
Notice that there is a div for each of the three sections, and one "wrapper" div around the whole thing. This wrapper div will allow us to control the layout's width, to center it, and gives a hook for applying backgrounds. ALso notice that the content section has a "content_outer" and a "content_inner." By splitting it up like this, we can apply a width to the outer portion, then use the inner portion to control margins and padding on the stuff inside. If we tried to do that all on ONE content div, we would run into browser problems with the different box models used to calculate box widths. This way we avoid those problems altogether.
Say you wanted this layout to be 700px wide, and centered. The following CSS would do it...
body{
text-align:center;
}
#wrapper{
width:700px;
margin:0 auto;
text-align:left;
}
#header, #content_outer, #footer{
width:100%;
}
#content_inner{
padding:20px;
}
So to bring it all together, here's a test page with content using the above, simple code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body{
text-align:center;
}
#wrapper{
width:700px;
margin:0 auto;
text-align:left;
}
#header{
width:100%;
text-align:center;
background:#963;
}
#content_outer{
width:100%;
background:#963;
}
#content_inner{
margin:0 20px;
padding:20px;
background:#fff;
}
#footer{
width:100%;
background:#963;
text-align:center;
}
#footer ul, #footer ul li{
margin:0;
padding:0;
list-style-type:none;
display:inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Header Content</h1>
</div>
<div id="content_outer">
<div id="content_inner">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</div>
</div>
</body>
</html>
Maybe this will get you off to a good start. :)
cEM
Thank you!
One of the most frustrating points is font sizing. I understand that I should not use px's when defining font-size.
But I don't understand that, if I'm now using divs to hold my content, how to make my page expand when/if a reader enlargens font size through his or her browser (especially if they use Firefox which can keep enlargening the font size)? After enlargening the font size two steps in FF, the text breaks, hides left and right, etc. The page is a mess.
Is this what liquid design means, that the page will keep expanding to accommodate enlargened font size? Can you teach me how to do this?
