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.

$2.89
- OR -

Matt Machell

Matt MachellA man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.

He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.

He likes music with loud guitars and games with obscure rules.

His website can be found at: http://www.eclecticdreams.com

He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.

See All Postings From Matt Machell >>