Prev | Current Page 20 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

1).
FIGURE 1.1 It takes nearly 1,000
characters of code to create the three
links above the picture.
The three links
XHTML: GIVING STRUCTURE TO CONTENT 9
The essential code is in green??”247 characters out of 956, or less than
26 percent. The remaining 74 percent is just gooey chocolate sauce.
Except for the href attributes, everything inside the tags is presentation
and could all be ripped out and converted into a few brief
de?¬? nitions in a style sheet. The table is not used to display data; its
purpose is solely to line everything up. The rest of the code is mostly
concerned with making rollovers work. Each link requires the following
information: a class to identify it to JavaScript, a forced nowrap
attribute to keep the words on the link together, and two JavaScript
function calls??”yeah, on every link. (As an aside, rollovers are easy
to create with CSS and require two simple CSS styles, as you will see
later.) Note also that a table cell that contains a nested span with a
class is required to display each tiny vertical line between the links.
Microsoft has recently made a decent effort to make its site
more standards-compliant, but if your site??™s source (sauce?) code
resembles the above, then read on. In the chapter on Interface
Components, you will see how to create a similar navigation element
with no more markup than a simple un-ordered list.


Pages:
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32