Category Archives: Web Design

Here’s the 2 Column Fixed CSS layout that will be covered in the tutorial below.

There’s still a lot of people in the web design world that are still using tables for layout. Quite often this is due to lack of education or the fact that the person creating a web page has learnt how to use tables and is therefore reluctant to drop their inline styles and table layouts for CSS.

I came into the industry when table layouts were rife and there was no other way of creating graphical layouts without the use of tables so when CSS was finally supported by the leading browsers and we could finally forget about Netscape 4.2, it was difficult to change my way of thinking.

However, to create web pages that are standards compliant, cross browser compatible and accessible you’ll need to start using HTML and CSS correctly. Within this post, I’ll be guiding you through a basic CSS layout which you can then adapt to your requirements. Continue reading →

Within the Use HTML the right way post last week, I explained that it’s OK to use tables when you’re dealing with tabular data.

I’d therefore like to explain how to markup tables properly so that they can also be accessible. Continue reading →

Semantic markup is the way forward and has been for some time. Using CSS to style semantic markup separates the presentational code from the content making things simpler for the designer whilst also making the site much more accessible, and search engine friendly.

However, even people that embrace this method come unstuck when deciding which tag or array of tags to use for certain scenarios whilst the easiest and correct solution doesn’t always stand out. Continue reading →

Each browser has it’s own default rules and when it comes to padding and margin’s it can cause havoc when creating the CSS for a website.

However, there is a simpler solution than trying to change the code for each indivdual element that’s causing problems.

Using the following code at the start of a CSS document will set all padding and margin’s to zero and give you a consistent starting point.


* {
padding: 0;
margin: 0;
}