I can’t stand articles that make you read two pages before getting to the point. With that in mind, let’s look at how I think css code should be organized.

In a nutshell: css code should be divided up into at least 4 separate pages:

1. page-structure.css
2. text-styles.css
3. misc.css
4. ie-styles.css

How about we call this the ‘killer’ css structure.

Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.

(more…)

Another good book from the boys and girls at Sitepoint - a well written book that walks you through the techniques of modern web design.

Over the last few years a whole bunch of CSS / web standards based books have hit the market. Some were good and some sucked
but there was one thing that was been consistent about them: they all reflected the maturing web design community.

You need to pay attention the word maturing: there were still a few technnical things that had not exactly settled in terms of how web designers should do things.

HTML Utopia: Designing Without Tables using CSS is among the first books I’ve seen that demonstrates a maturity in web design.

WHAT IS THIS BOOK ABOUT

It’s all about modern web design practices and techniques. The following topics are covered over 450 pages:

01. Basics
02. CSS 101
03. CSS Code
04. Validation & Backward Compatibility
05. Color
06. Fonts
07. Text Effects
08. Simple CSS Layouts
09. Three-Column Layouts
10. Fixed-Width Layouts
A. CSS Miscellaneous
B. CSS Color Reference
C. CSS Property Reference

WHO IS THIS BOOK FOR?

If you are a total noob to web design, this is not the book for you. You can start with my free web design tutorial to get your feet wet, then you’ll be ready to buy this book!

You need to have a basic understanding of HTML and CSS. Once you have that, this book would quickly guide you through the sometimes thorny path to web design nerd glory.

Again, a book worth getting.

Stefan Mischook

www.killersites.com
www.killerphp.com

This book is a mirror image of the book Web Design with Dreamweaver 8 by the same author - except this book is for hand coders.

A good title for people new to modern web design practices that include:

• CSS for layouts
• Semantic code
• Accessibility in web design

The topics are covered within the context of small usable projects, that can easily be adapted to your own web design work.

Though published in 2005, the material is still relevant and still is a pretty good buy.

This book should probably be on any web designers/developers desk.

Web design has changed drastically since this book’s first edition came out … and thankfully Web Design In A Nutshell has been updated accordingly.

As with all of Oreilly’s ‘Nutshell’ books, Web Design In A Nutshell covers each topic in a concise and yet complete manner making it both a great learning title (for people with some web design skills,) and a great reference.

Some of the topics covered:

• CSS - basics, page layout methods, hacks, tricks etc
• HTML, XML and XHTML
• Accessibility
• Web graphics

… and so much more.

Besides the core coverage of the material itself, this book is also packed with great references to web sites and other good books on web design.

Get the book.

One of the fundamental problems people have with CSS page-level layout is matching CSS div heights. Others might call this ‘matching column heights’ in web pages.  

In this article/video (see below,) we are going to solve this problem using a lesser known JavaScript method: the Matching Columns Script.

Let’s start  out by checking out a diagram that illustrates the problem:

People have come out with different solutions including the ‘Faux columns’ hack:  using a vertically tiled background image to create the illusion of a column.

The ‘Faux columns’ hack/trick works, but it does have some limitations:

• You have to mess around with background images when creating the fake/faux columns effect - there is even more mucking about when you have liquid layouts.
• You won’t be able to use CSS border styling (on your div’s that create the columns) because it would reveal the hack.

THE BETTER WAY TO HANDLE THIS PROBLEM: DOM SCRIPTING (JavaScript)

JavaScript (sometimes called ECMA script,) is the programming language built into all the browsers that allow geeks/nerds, to have practically total control over how things appear in a web page - it’s very powerful.

Note: DOM scripting (the term,) is a quick way to describe using JavaScript to control a web page’s structure. If this makes no sense, don’t worry about it as you need no programming knowledge to use the technique that is covered here. 

 WHY IS THE JAVASCRIPT METHOD BETTER?

You are better off with the JavaScript method (rather than the ‘Faux columns’ hack, ) because:

1. Once it is applied, you don’t have to worry about it as it automatically adjust itself to change with your page(s).
2. It is much easier/faster to apply than the ‘Faux columns’ hack.

 GETTING STARTED

Attached with this article you will find the files you need to apply the script:

1. The Javascipt file.
2. The CSS document.
3. A sample web page that puts it altogether.

Now it’s time to watch the video to learn how to use it.

 MATCHING DIV HEIGHTS VIDEO

CONCLUSION

There is one downside to this technique:

It won’t work if people have JavaScript turned off. Fortunately, the vast majority of people out there have it on. Last time I checked my own stats, nobody had JavaScript disabled.

That said, though it looks a lot better when your columns heights match, I would not consider it mission-critical to a website. That is to say; people will still be able to use the website, so I am willing to accept that for some rare (paranoid) individuals, the columns will not match.

Source Files