CSS in Website Design - Tips #1 - December 15th, 2006

Seeing as CSS driven design is steadily becoming the most standards-compliant method of design, I thought I would write a few articles detailing tips, tricks and general good practice in CSS. To start with, I’ve written a basic guide to some layout issues.

Centering a Web Page with CSS
In terms of the CSS knowledge required, centering a web page is very easy to do. However, it can be easy to inadvertently do it in a way that is incompatible with some browsers, causing rendering problems.

Firstly you need to “wrap” all your content in a grouping tag such as a “div”, placed just inside the body tag, and set a width on it in the CSS:

#wrapper{
width:800px;
}

The normal way of now centering the page is to set the margins on the #wrapper div to “auto” for the sides (and whatever you want for the top and bottom. I’m setting them to 0):

#wrapper{
width:800px;
margin:0 auto;
}

Now this is fine in all popular browsers, but unfortunately older browsers such as IE5 don’t recognise the “auto” value. To get around this and assure complete compatibility, IE5 has a slight quirk in that you can add the text-align attribute to the “body” selector in the CSS and it will align nested tags as specified. However, centering the wrapper in this way will also centre all text within the wrapper (in all browsers). To get round this we align the text within the wrapper back to the left.

So the finished CSS would be:

body{
text-align:center;
}
#wrapper{
width:800px;
margin:0 auto;
text-align:left;
}

Rik Weber
Web Developer

Posted in Web Design | No Comments »

Website Colours - December 8th, 2006

When it comes to website design, choosing the right colour scheme (or “color” scheme as web designers and programmers are forced to write!) is one of the most important parts of the process. Choosing the right scheme for the subject of your content can dramatically enhance the look and feel of your website.

Website designers often overlook the importance of choosing browser-compatible colours. At present browsers only see 256 colours, and the major browsers only share 216 of those. This means choosing obscure colours in either your style sheet or in an image can lead to undesirable appearances in different web browsers.

To be sure your website doesn’t fall foul of this compatibility problem, it is best to stick to “web safe” hexadecimal colour codes. Most image editing packages have the option of choosing only web safe colours when creating your “masterpieces”, or you can click on the following link for a helpful palette of browser-safe colours.

Rik Weber
Web Developer

Posted in Web Design | 1 Comment »

« Previous