CHAPTER 11
352
If you’re doing something similar, you may well need to fiddle with exact padding, positioning, and
so forth, but the basic building blocks are all here. As a result of all the work we’ve done in this
section, we now have a nicely executed Your latest route area of the page, with an interactive
elevation chart plotting Flickr images, shown in Figure 11-31.
Figure 11-31. The completed “Your latest route” section with tidy image rollovers
Of course, all of this would ultimately need to be hooked up to a powerful CMS to really be
exceptional, but well, this is a CSS book.
Summary
There you have it. This has been more of a brief weekend city break than two weeks by the
beach, but insightful nonetheless, I hope. I’ve really enjoyed pulling the Climb the Mountains
concept together for this second edition of CSS Mastery, especially with the freedom to cut loose
with some fresh CSS 3 ideas.
Naturally, there are oodles more bits and pieces in the Climb the Mountains site that I’d love to
have been able to walk through with you. Sadly, there just isn’t enough space in one book to go
into that level of exploration. Still, if you like a behavior or treatment in the site, and it isn’t covered
in this chapter, I think it should be easy to jump in, examine the source, and figure out how things
work. I’ve certainly done my best to structure the source code with clarity and sprinkle in a
number of helpful notes and references where possible.
Remember, the site will remain online at http://www.climbthemountains.com/cssm, and the
source code is available from www.friendsofed.com. Do feel free to take it, examine it, rip it apart,
put it back together again, and use it as inspiration for your own ideas and stunning CSS-
powered masterpieces.
3
CHAPTER 1
4
INDEX
355
Index
Numbers & Symbols
+ combinator, 332
1-pixel transparent GIF, 5
960 layout, 281, 282
1020 layout, 282
1040 layout, 282
1080 layout, 281, 282
A
absolute positioning, 60–61
description, 129
in relative container, 269–270
:active dynamic pseudo-class selector,
110
adjacent sibling selector, 29
:after pseudo-class, 68
Ajax, adding interactivity with, 304–306
almost standards mode, 22
anchor type selector, 109
annotating CSS files, 44
Asynchronous JavaScript + XML. See
Ajax
attribute selectors, 30–34, 285
determining external links, 116
form layout, 190
additions for advanced browsers,
193
browser support for, 191
IE version support for, 118
autocomplete.css, 281, 306
B
background images, 71–74
background-image property, 84
background-position property, 84
bitmapped corner mask, 81
block boxes, 57
block-level elements, 57, 119
blockquote
defining styling for, 324–325
layering, 323–325
blur radius attribute, 340
body classes
highlighting current page, 319–325
navigation control with, 319–325
overview, 319
INDEX
356
pairing with navigation class, 319–
322
body element
adding class names or id attribute
to, 38
unique IDs for, 319
border property, 51
border-collapse property, 181
border-image property, 86, 87
border-padding property, 182
border-radius property, 85, 92, 338–
339, 340
border-radius rule, 327
borders
applying to isolate bugs, 254
in li element, 329
table border models, 181
box model, 21, 51, 52
IE and, 53–54
margin collapsing, 54–57
boxes, rounded-corner, 74–83
fixed-width rounded-corner boxes,
75
flexible-width rounded-corner boxes,
78
box-shadow property, 92, 339–341
box-sizing property, 54
branding element, 226
browser bugs, 246
browser modes, 21, 22
browser support, 271, 273
BUG keyword, CSS comments, 44
bugs, 245–273
avoiding, 254
common, 264–271
fixing problems versus fixing
symptoms, 256
help resources, 256
hunting for, 246–256
workarounds, 260–264
bullet, custom, 134
button styled links, 119, 120, 128
buttons
Pixy-style rollovers, 121
rollovers with images, 120
C
caption element, data tables, 178, 182
captions
image overlay, 334–337
RGBa transparency, 334–337
cascade process, 35, 39
Cederholm, Dan, 81
cellspacing property, 182
center keyword, positioning images, 73
centering designs, 210–211
check boxes
form layout, 190
multicolumn, 197
child selector, 28, 264
Clagnut.com, 91
class names, 8–10, 11, 12, 38
class selectors, 26
classes, combining, 337–338
classitis, 11
clear class, multicolumn check boxes,
199
clear property, 64, 65
clear:both property, 343, 344
Climb Mountains (CTM) case study,
311–352
flexible grid use, 317–319
modifying image with caption, 333–
352
border-radius property, 338–339
box-shadow property, 339–341
caption image overlay and RGBa
transparency, 334–337
combining classes, 337–338
main elevation chart, 344–352
overview, 333
positioning lists and revealing
content, 341–343
rounding corners, 344
navigation control with body
classes, 319–325
highlighting current page, 319–
323
layering blockquote, 323–325
overview, 319
overview, 311–312
style sheet organization and
conventions, 314–317
targeting elements, 325, 332
adjacent sibling selectors, 331–
332
deep descendent selectors, 325–
329
:first-child pseudo-class, 329–
331
overview, 325