Constructing Fixed Layouts with a Simple CSS Framework - Review: working with liquid web page layouts
(Page 2 of 4 )
Before I begin coding a brand new CSS file for working with fixed web page layouts, I’m going to list its source files as they now stand. In this way, it’ll be much easier and quicker for you to recall how they were utilized for building a liquid design composed of three primary columns.
That being said, here are the files in question:
(definition for "reset.css” file)
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h2{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h3{
font: bold 14pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h4{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h5{
font: bold 11pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
h6{
font: bold 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
p{
font: normal 9pt Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
li{
font: bold 9pt Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
a:link,a:visited,a:focus{
font: bold 9pt Verdana, Arial, Helvetica, sans-serif;
color: #00f;
margin: 0 0 18px 0;
}
a:hover{
color: #c60;
}
/* class for any hidden element*/
.hidden{
display: none;
}
(definition for "liquidlayout_3cols.css" file)
#header,#footer{
padding: 10px;
background: #9cf;
}
#navbar{
padding: 10px;
background: #dcdcdc;
}
#navbar li{
display: inline;
}
#mainwrapper{
clear: both;
height: 100%;
overflow: hidden;
background: #eee;
}
#mainwrapper .leftcol{
position: relative;
float: left;
}
#mainwrapper .rightcol{
position: relative;
float: right;
}
#leftbar{
width: 20%;
}
#centerbar{
width: 59%;
}
#rightbar{
width: 20%;
}
/* section title */
.title{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #036;
background: #9cf;
margin: 0;
padding: 10px;
}
/* generic box */
.box{
background: #fff;
border: 1px solid #ccc;
margin-bottom: 18px;
}
.box h2{
font: bold 14pt Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
.box h3{
font: bold 13pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 10px 0 18px 0;
}
.box h4{
font: bold 12pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
.box h5{
font: bold 11pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
.box h6{
font: bold 9pt Tahoma, Arial, Helvetica, sans-serif;
color: #039;
margin: 0 0 18px 0;
}
/* generic container */
.content{
padding: 10px;
}
p{
font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
(definition for "liquidlayout_3cols.htm" file)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Liquid layout (3 columns)</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="liquidlayout_3cols.css" />
</head>
<body>
<div id="header">
<h2>This is the header section of the web page</h2>
<p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p>
</div>
<div id="navbar">
<h2>This is the navigation bar of the web page</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div id="mainwrapper">
<div id="leftbar" class="leftcol">
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
</div>
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
</div>
</div>
<div id="centerbar" class="leftcol">
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
</div>
</div>
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>Header goes here.</h2>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
</div>
</div>
</div>
<div id="rightbar" class="rightcol">
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p>
</div>
</div>
<div class="box">
<div class="title">SECTION TITLE</div>
<div class="content">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<h2>This is the footer section of the web page</h2>
<p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p>
</div>
</body>
</html>
After analyzing the signature of the three files above, I’m pretty sure that they’ll be familiar to you, right? In this specific case, they’re used together to construct an elastic web page layout made up of three main columns and the classic header and footer sections.
In addition, it’s clear to see how simple it is to take advantage of the functionality provided by the CSS framework. The whole procedure requires only working with two CSS files and an (X)HTML document. Period.
Okay, now that you hopefully recalled the full details regarding the creation of a three-column liquid web page layout, it’s time to continue adding more features to this CSS framework.
As I mentioned in the beginning, the framework in its current state lacks the ability to create fixed designs. So, taking into account that this limitation must be properly addressed, in the upcoming section I’ll be coding another CSS file that will be charged with performing this task.
To learn how this brand new file will be defined, please click on the link below and keep reading.
Next: Adding a file to the CSS framework for fixed designs >>
More Style Sheets Articles
More By Alejandro Gervasio
