Home arrow Style Sheets arrow Page 2 - Constructing Fixed Layouts with a Simple CSS Framework
STYLE SHEETS

Constructing Fixed Layouts with a Simple CSS Framework


If you’re searching for a guide to creating an extensible CSS framework that lets you build different web page layouts, you’ve come to the right place. Welcome to the third installment of a four-part series on building a simple CSS framework. This series walks you through creating a basic CSS framework which will help you to construct both liquid and fixed web designs very quickly, without having to spend endless, annoying hours coding multiple style sheets.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
March 05, 2009
TABLE OF CONTENTS:
  1. · Constructing Fixed Layouts with a Simple CSS Framework
  2. · Review: working with liquid web page layouts
  3. · Adding a file to the CSS framework for fixed designs
  4. · Building a two-column fixed web page layout

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 3 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials