Using a dl to mark up an FAQ looks something like this:
...cut...
And if you add a few hooks to the markup you can leverage :target to make the answers
hidden by default, but visible when the corresponding link is clicked. The following is the way
faq.html is constructed:
CHAPTER 8 n CASE STUDY: FAQ FACELIFT 168
...cut...
I have already taken the lead and filled in this markup in faq.html. Open it up in a
browser and take a look. You should see something akin to Figure 8-2.
Figure 8-2. The default layout of the FAQ example
CHAPTER 8 n CASE STUDY: FAQ FACELIFT 169
This is a perfectly usable document. Each question has an answer and, more importantly,
each answer has an id that enables it to be bookmarked. Clicking any of the links will immediately
jump the browser to that answer, which is just what you want.
Now open firebug.css and add the following styles at the bottom:
.faq dt,
.faq dd {
margin: 0;
padding: 0;
}
.faq dd {
margin-top: -3em;
padding-top: 3.3em;
position: absolute;
top: 0;
left: -999em;
}
.faq dd:target {
position: static;
}
These rules did the following:
1.
Pages:
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243