CSS Tabs for Beginners Support

Tabs are a staple of website navigation. They provide a great visual metaphor for users, and they nicely round off otherwise boxy layouts. This beginning level tutorial is about creating tabs in XHTML and CSS, keeping your mark-up solid, but the visuals more interesting. The method will work in most modern browsers, and we'll cover a few exceptions and workarounds for those it doesn't work with later on.

 

You'll need basic knowledge of HTML and CSS. Fortunately, if you're using Dreamweaver MX2004, it'll help you by autocompleting the CSS and providing basic XHTML pages to work with. Watch out for problems with plain old Dreamweaver MX, as it's CSS rendering isn't perfect, so Design View may not look as it does in a browser.

 

The tutorial will take you through the changes we make to the CSS showing how the different alterations affect the end result. The full source code is included at the end of the article, as is a quick example of how to customise the technique.