Creating a Three-Column Liquid Layout with a CSS Framework - Review: the source files of the initial CSS framework
(Page 2 of 4 )
Before I proceed to show you how to use the functionality of the CSS framework constructed in the preceding tutorial, I will list its two source files as they were defined initially. In doing so, you’ll be able to recall much more easily how they can be used for building a two-column web page layout.
Having said that, it’s time to leave the boring theory behind and show some action, right? So, here are the respective signatures of the two source files that compose this CSS framework, along with a basic example that illustrates how to use them in a concrete case:
(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_2cols.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: 80%;
}
/* 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;
}
/* headers for containing box */
.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_2cols.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 2 columns</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="liquidlayout_2cols.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>
<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>
Regardless of their seemingly complex signatures, the three source files shown above are actually pretty easy to follow. As you’ll surely recall, the first of these files comes in useful for assigning default values to typical elements of a web page, while the second one is tasked with defining the selectors and classes required for building a two-column liquid web document layout.
At the end of the previous example, a basic (X)HTML file is utilized to display the aforementioned layout, including some generic containers and title sections as well. Not too hard to understand, right?
Now that you hopefully recalled how the previous CSS framework can be used for constructing a liquid two-column design, it’s time to continue adding more features to it. In this case, I’m going to add to the framework another source CSS file, which will be charged with rendering a liquid layout comprised of three main columns.
To learn more about how this brand new CSS file will be coded, please click on the link below and read the following section.
Next: Coding a brand new CSS file >>
More Style Sheets Articles
More By Alejandro Gervasio
