- 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 Main CSS Stylesheet (common.css)
The stylesheet, common.css, holds all the CSS style rules that are recognized by older browsers—as well as the newer browsers.
Create the style rules that control the text appearance rules for the basic elements on the page, such as a (link) elements, p (paragraph) elements, and h1 (header) elements.
Group the h1 and p selectors together to specify the style rules that they share in common and then specify the unique style rules for each separately. Grouping together selectors to specify any common style rules together is a good way of streamlining your stylesheets—and also makes it easier to change the styles for these elements at once if necessary.
Group the ID selectors, #tabmiddle1, #tabmiddle2, #tabmiddle3, #tabmiddle4, and #tabmiddle5, together and specify the styles rules for them all at once.
NOTE
Because the div elements that act as text boxes on this page and the tabs are precisely sized in pixels, specify the font and line-height sizes in pixels also rather than in relative units such as em or percent.
a {
outline: none;
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
}
h1, p {
background: transparent;
color: #000000;
font-family: verdana, helvetica, sans-serif;
margin-left: 3em;
margin-right: 3em;
}
h1 {
font-size: 13px;
margin-bottom: 0px;
}
p {
font-size: 11px;
line-height: 14px;
}
#tabmiddle1, #tabmiddle2, #tabmiddle3, #tabmiddle4, #tabmiddle5 {
font-family: verdana, helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}