PARTS:
Part 5
Part 6
Part 7
Part 8
Part 9
Part 10
Part 11
Part 12
Part 13
Part 14
Part 15
Part 16
Part 17
Part 18
Part 19
Part 20
Part 21
Part 22
Part 23
Part 24
WHAT'S HOT
Charles Wyke-Smith
"Stylin' with CSS: A Designer's Guide 2nd Edition"
JavaScript can
also toggle this property to cause elements to appear or disappear
when de?¬? ned user actions occur. Let??™s look at an example that combines
what we have just learned about position and the display
properties.
block by default
inline by default
STYLIN??™ WITH CSS - CHAPTER 4 128
Positioning/Display Example
During the summer of 2007, I coded the CSS for icyou.com, a videosharing
site about healthcare created by the company for whom
I work, Bene?¬? tfocus.com. Almost every page of this site offers an
index of small thumbnail pictures that you can click to play related
videos. To save screen real estate, we decided to have the description
of each video only appear when the user moused over the
thumbnail, as shown here in Figure 4.27.
Here??™s how we did that. First, this is the markup of one thumbnail
FIGURE 4.27 A thumbnail on the
icyou.com site displays an informational
pop-up when the user mouses
over it.
POSITIONING ELEMENTS 129
which, unstyled, looks like this (Figure 4.28).
Pages:
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
also toggle this property to cause elements to appear or disappear
when de?¬? ned user actions occur. Let??™s look at an example that combines
what we have just learned about position and the display
properties.
block by default
inline by default
STYLIN??™ WITH CSS - CHAPTER 4 128
Positioning/Display Example
During the summer of 2007, I coded the CSS for icyou.com, a videosharing
site about healthcare created by the company for whom
I work, Bene?¬? tfocus.com. Almost every page of this site offers an
index of small thumbnail pictures that you can click to play related
videos. To save screen real estate, we decided to have the description
of each video only appear when the user moused over the
thumbnail, as shown here in Figure 4.27.
Here??™s how we did that. First, this is the markup of one thumbnail
FIGURE 4.27 A thumbnail on the
icyou.com site displays an informational
pop-up when the user mouses
over it.
POSITIONING ELEMENTS 129
Bobby is a #2 Diabetic who weighed 274 pounds. After a
change in diet he is no longer on medication. Runtime: 46
sec.
Living with Diabetes; Bobby's story
which, unstyled, looks like this (Figure 4.28).
Pages:
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173