Bulletproof Web Design: Improving flexibility and protecting against worstcase scenarios with XHTML and CSS [Electronic resources] نسخه متنی

Why It's Bulletproof

We just took a pleasing tab navigation design from a high-profile Web site, ripped it apart, and reconstructed a similar system with less code that is easily updatable, more accessible to a wider range of browsers, devices, and assistive softwareand most notably is flexible, regardless of the size and amount of text placed within it.

Because of the steps we took to creatively align background images and assign colors, the entire tab set is scalable. If the user chooses to bump up the text size a few notches to increase readability, then the entire design will scale along with it (Figure 2.14).

In a matter of minutes, we can also change the wording and/or add or remove tabs for instant updates, simply by editing the unordered list that's used to structure the navigation items (Figure 2.15). All that needs to change is the text within each list item in our markup:

<ul id="nav">
<li id="t-intro"><a href="/">Home</a></li>
<li id="t-about"><a href="abou91">Why Lance Rules</a></li>
<li id="t-news"><a href="new90">The Latest News</a></li>
<li id="t-sponsors"><a href="sponsor90">People Who Like Lance</a></li>
</ul>