A little about Vernon...

Hey there everybody, I’m Vernon. I’ve been a full-time freelance web designer since 2002 and can honestly say it’s been a great journey.

If you’re interested, take a look at my services site and let me help you with your project.

You are currently browsing the archives of the CSS category.

0

CSS Fluid Layout Tutorial
January 15th, 2007

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

NowCSS is a new site that just launched at the beginning of this month and looks to be a great new resource. It is a site dedicated to help you learn HTML and CSS the proper, and professional way with tutorials, code examples, articles, downloads, free layouts, and Wordpress themes.

Creating a CSS Fluid layout is something that has been covered many times in different ways. The truth is that knowing how to make a CSS fluid layout is something that every web developer should know how to do.

This tutorial shows you some easy steps to make it happen. When I create fluid layouts I like to create a 95% layout (just like the little bit of space on the left and right), but this tutorial shows you how to create a 100% fluid layout. Good tutorial overall and it looks like there’s great stuff to come from NowCSS.

0

Digital Web has a great article/tutorial on Generating Dynamic CSS with PHP.

How to store and reuse values in style sheets is a quite popular discussion across many forums and mailing lists. The tutorial focuses on using PHP as the programming language of choice to accomplish generating dynamic CSS.

The tutorial will walk you through the design of a basic site layout using CSS. The layout includes a header, menu and content area. You will then learn how to assign three different color schemes using PHP and also how to easily switch between each one or add new schemes. The great thing is this can all be done from a single script.

Enjoy learning how to generate dynamic CSS using PHP. Don’t forget to impress your friends with your newfound knowledge!

0

Over on 24 Ways, Nate Koechley has posted a great tutorial on creating Intricate Fluid Layouts in Three Easy Steps (creating Fixed Width layouts is also an option).

Nate developed the layout system, YUI Grids CSS, with three components which can be used together or independently. From 24 Ways:

The Three Easy Steps

  1. Choose fluid or fixed layout, and choose the width (in percents or pixels) of the page.
  2. Choose the size, orientation, and source-order of the main and secondary blocks of content.
  3. Choose the number of columns and how they distribute (for example 50%-50% or 25%-75%), using stackable and nestable grid structures.

This is a great tutorial and will help those not exeperienced with CSS the opportunity to create fluid (or fixed) CSS layouts easily.