- A Tabbed Interface
- Project 12: Transitional CSS and Javascript Strategies
- Creating the Base Graphics for the Tabs and Assembling the Tab Table
- Planning the Project and Dividing It into Logical Modules
- Creating the XHTML Base
- Creating the Main CSS Stylesheet (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 Functions
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating the Base Graphics for the Tabs and Assembling the Tab Table
Each navigational tab is made up of three tiny graphics and the label text, assembled into a small table.
Create the basic outline shape of the tab. Make the inside of the tab itself transparent and make the outside corners the same color as the background color of your page.
){kind=small}
Figure
12.2 The tab showing the transparent area (the checkered area) in Photoshop.
Slice the image. You only want to obtain the two side segments. Save each slice as a GIF with transparency.
Note that the corners outside of the tab have a white background. This background color should match the background color you intend to use on your page.
Select a 1-pixel wide segment of the middle section. Save this as a GIF with transparency.
){kind=small}
Figure
12.3 The three graphics: the tab sides, and the one-pixel-wide center graphic.
The checkered area is the transparent area.
Pre-assemble the tab elements into an HTML/XHTML table.
The tab consists of a small table with three table cells. Each table cell has a different background image. The left and right side table cells have a fixed width, but the middle table "stretches" to accommodate the text that is placed inside it.
The graphic dot.gif is a 1x1 pixel transparent GIF that is used to hold the side tds open.
<!-- The tab "table" ---> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td background="images/tableft.gif"> <img src="images/dot.gif" alt="" width="8" height="24" border="0"></td> <td id="tabmiddle4" background="images/middle.gif">tab text</td> <td background="images/tabright.gif"> <img src="images/dot.gif" alt="" width="7" height="24" border="0"></td> </tr></table>
NOTE
Why not simply use the tab graphics as img src files instead of as background images for the table cells? This is possible, of course, but we're going to use a bit of CSS trickery to make the graphics invisible in older browsers, as you'll see later in this project.
){kind=small}
Figure
12.4 The tab "table" shown with the table borders visible (left),
borders off (center), and with a background color set. The background color
"shows through" the transparent areas of the GIFs.
NOTE
Normally, when you create a GIF with transparent areas, you make the areas surrounding the actual image transparent. However, if you make GIFs with the main areas set as transparent and the "background" areas in the same color as the background of your page, the "background" areas essentially act as masks. Then you can use CSS to "color" the main area of the element. This is a great way to create graphical elements that you can reuse again and again.