Home arrow Style Sheets arrow 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
(Page 1 of 4 )

Introduction

Since the major advantage of using a CSS framework like this lies in its ability to reuse a set of predefined selectors and classes, in the last article I left off explaining how to apply this concept to build a liquid web page layout. This layout was comprised basically of two main columns, along with the typical header and footer sections.

To be frank, building this popular type of layout is reduced to including a couple of CSS files into an (X)HTML document, and creating the pertinent structural markup. It was that simple.

However, any decent CSS framework must be capable of working with different kinds of designs, a feature our framework lacks as it currently stands. Of course, it’s necessary to fix this crucial issue, so in this third episode of the series, I’ll be coding another CSS file, which will permit us to build fixed layouts as simply as we can create liquid ones.

Now that you’ve been introduced to the subject of this tutorial, it’s time to continue expanding the functionality of this CSS framework. Let’s get going!


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 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials