Moving from s to

Kristof — Mon, 26 Jan 2009 15:55:59 +0000

The title is actually misleading. I'll be explaining how to ditch tables and move to a more CSS-centered approach of your website.

There is still a large number of webdesigners and webdevelopers that use tables over divs and CSS to design their website. This article is meant as a "getting started" tutorial to help you move from tables to divs.

This is in no way a complete guide to CSS-centered design, and it certainly doesn't explain about all the niceties of CSS-centered design. It's meant to help people move away from tables and start appreciating CSS-centered design.

Using a doctype

The first thing you want is a doctype. More specifically, you'll want a STRICT doctype. Most of the problems people encounter at first when using divs instead of tables arise from using transitional doctypes. Strict doctypes will make sure that all browsers look upon your CSS in more or less the same way - you eliminate a lot of the margin/padding/alignment problems by using STRICT doctypes. Use the following at the very top of your documents.

Yes, you can use 1.1 if you prefer. It's even better, since there is no confusion between strict, transitional or framesets in this XHTML standard.

Designing for Divs

Being a good webdesigner doesn't just mean coming up with fancy graphics. Being a good webdesigner also means knowing the limitations of (X)HTML, CSS and keeping those in mind when designing. To make your life easier, here are a few rules of thumb.

Separate the header from the content from the navigation from the footer from the disclaimer from the sidebar. That doesn't mean your layout has to be columnar or in blocks - it just means that you should see the HTML while designing the page. Know where the different sections of your website will be and layout accordingly;
Use elaborate CSS where possible to substitute for images;
Use background images where possible to substitute for elaborate and complex HTML;

Centering your web layout

Instead of using a master table and setting the width to 100% and then fitting the actual table with your design, you can use the following the autocenter your web layout.

Consider the following HTML content.


This div will be perfectly centered.

Pair the HTML content with the CSS below.

body, html
{
     margin: auto;
}

#wrapper
{
     margin: auto;
}

Setting the margin to "auto" will make sure your browsers autocenters the layout by calculating the left and right margins necessary to center the layout.

The Wrapper

The wrapper div is a container that you set to the width you want your website to have. It's the box that you'll be working in. You can omit this if you want your website to be "fullscreen".

Creating columnar layout

Creating columnar layout is simple. Use float to make certain DIVs align left or right, automatically. Give them a width to work with and you're set. Use clear to clear to reset the alignment.

Consider the following HTML content.


     
          This is the left column
          This is the right column

There are several ways to make the left column align left and the right column align right. The method you choose is based on what column you want to have priority. The column you want to have priority should be declared first. The float property you need is the result of this decision. If you want the RIGHT column to have priority, then you first declare the RIGHT column and then set the float property to RIGHT.


     
          This is the right column

Vice versa, you first declare the LEFT column if you want to do so, then set float to LEFT.


     
          This is the left column
          This is the right column

Problem is: if one of both columns is shorter than the other, the longest column will start to take up to the space left by the shorter column. To avoid this, give the suspected longest column a width. If you want to stop floating divs, use the "clear" property and then either left, right or both.


     
          This is the left column
          This is the right column
     
     This will reset to the full width of your wrapper. Ideal for a footer, for example.

You can also use
but that's not the nicest way to clear your floats.

Questions?

Questions? Post them in the comments and I'll answer them. Most of them. At least the ones pertaining to CSS and/or this article.

riajobs.org

Kristof — Fri, 27 Jun 2008 05:43:32 +0000

Peter Elst just launched riajobs.org. Riajobs.org is a community-based jobboard. Amazingly enough, the site is free - even for companies that want to post jobs. There's of course the odd feature that requires a fee but even then, 20 percent of the monthly revenue will be donated to charity.

As I write this entry, jobs are being added to the site. The few jobs currently posted originate from all over the globe. Community support looks strong and will be a major success factor for riajobs.org.

The only thing this site needs is a little space for potential candidates and freelancers to leave an impression and the matchmaking site will be complete. And whaddayaknow? Peter already added that to the list of features to be added "in the near future".

Let's hope riajobs.org is not going to turn into another "enter ALL of your details including highschool friends and that female teacher you had a crush on and all the different types of pasta you've eaten in your life and all of the places you visited" setup, but, instead, a simple 1-minute setup. I've always felt that careersites asked way too much information. Just the basics and company and candidate will sort things out themselves, thank you very much.

I believe "niche" websites like this will become the ultimate future. A small company in the Netherlands has set-up a jobsite aimed solely at the creative industry and it's becoming increasingly popular as well.

Let's root for riajobs.org! From the community, for the community and, eventually, by the community.

sentient beings » CSS

riajobs.org