Chapter 12: Transitional CSS and JavaScript Strategies

(modified for web presentation)

A Tabbed Interface

Creating web sites that take advantage of the CSS and JavaScript capabilities of modern browsers, while still accommodating older browsers, is a headache faced by every site creator. In this project we'll explore some ways of dealing with this issue.

Note: Reading HTML code on a web page is a pain! Before reading this chapter I highly recommend that you do download the code first.
You may also wonder why some of the code snippets are overflowing out of the yellow boxex into the right side navigation area. This is not a mistake - I've chosen to represent the code as it's written (using the CSS white-space: pre; style attribute) so that the code can be read legibly, without erroneious line breaks. Again though...make your life easier, and just download the code. :)

Sections

Getting Started
Creating the Base Graphics for the Tabs and Assembling the Tab
Planning the Project and Dividing It into Logical Modules
Creating the XHTML Base
Creating the Main CSS Spreadsheet (common.css)
Creating the Supplemental CSS Style Rules (advanced.css)
Creating the Basic Document Object Creation Script (docobj.js)
Creating the Tab Navigation Script (tabs.js)
Modifying the XHTML Markup to Call the Function

To Top of Page