Tim Nash "stuff" Blog

Top 5 CSS layout tips

67
Hi there, this post was originally on Venture Skills blog which is now defunct, but I have moved it over here to save it from vanishing forever. However I haven’t done anything other then copy and paste so their maybe formatting or broken links. Also note comments will be switched off by default on these posts

So we brought you some great CSS tips to help with accessibility over the weekend, and we discussed how layout helps users get into your page with our look at stumblers and Diggers habits, now its time to introduce the layouts… These are our favourite CSS layout sites and scripts, enjoy

Learning from scratch

Our first site is a step by step (12 pages worth) guide to developing a CSS based site, after all unless you understand the concepts you will never fully be satisified with the other articles. Its set at a good pace for intermediate coders with at least some CSS experience and is worth a read regardless of background or ability screenshot from creating a CSS Layout http://www.subcide.com/tutorials/csslayout/index.aspx Inpatient people may wish to skip to the important bit, hacking your code to work in that other browser.


53 perfect layouts (fixed width)

Its amazing but most web sites have been designed with the same layouts be they tabled or tableless since the start of the web, this does however mean that finding a base point for your designs can be easy and not to painful an experience. So simply select a basic site layout and go.screenshot from 53 fixed layout templates http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/ All of these layout are fixed width hold on for some more stretchy ones!


Even more great layouts

If 53 fixed layouts were not enough here are some more both fixed and stretched layouts for ultimate flexibility. These 40 layouts are again completely CSS styled without any tables. screenshot from 40 fixed and fluid layout templates http://blog.html.it/layoutgala/


Getting it in the Middle

Enough of this handing you it all on the plate! you want to do it yourself and one of the biggest questions that most developers who are coming from tables ask, how do I centre my divs? Well here is the answer or rather several answers, now you can have your site neatly centred particularly useful when combined with a fluid layout. screenshot from Centred divs http://www.maxdesign.com.au/presentation/center/

The ultimate answer

We held the best till last if you haven’t already bookmark the YUI Yahoo user interface site it is a great resource both for clever javascript and some great CSS resources. One of its best features is the CSS grids and this is our last and best tip, use grids it has several great features including. screenshot from Yahoo user interface http://developer.yahoo.com/yui/grids/

  • Supports fluid-width (100%) layouts.
  • Supports easy customization of the width for fixed-width layouts.
  • Flexible in response to user initiated font-size adjustments.
  • Template columns are source-order independence

screenshot from Yahoo user interface http://developer.yahoo.com/yui/grids/ That’s it we are done, go get your layouts sorted, and please no more table based designs you have no excuse now! This post is our attempt at the ProBlogger group project hope you enjoyed it.

Consulting

While I no longer offer personal consultancy if you are interested in going further then please let us know at Coding Futures


67 comments