Reset the margin and padding on the definition term (dt) and definition data (dd) elements
2. Adjusted the margin-top on the dd to bring it up 3em (thereby overlapping the dt, so
that the dt is still visible if the dd is linked to in the fragment identifier; that is, as a
jump reference)
3. Adjusted the padding-top on the dd to push its contents down 3.3em so they are not
overlapping the dt, to create a little breathing room
4. Positioned the dd absolutely (taking it out of the normal flow) and pushed it off the left
side of the page so it is out of view (which is more accessible than display: none)
5. Set the dd to be statically positioned (that is, placed back in the normal flow) when it is
the :target (the fragment identifier in the URI string)
nTip If you already use a universal reset in your style sheets, you can skip step 1.
Before you save the file and take a peek at the page again in a browser, add just a few more
basic layout styles to keep the design from feeling too claustrophobic:
CHAPTER 8 n CASE STUDY: FAQ FACELIFT 170
.faq dt {
font-weight: bold;
margin: 1em 0 0;
}
.faq dd > :last-child {
margin-bottom: 0;
padding-bottom: 0;
}
These styles will give the dt a little room on top and keep the last child of any of the dd elements
from adding any unwanted gaps to the layout. Now save the file and refresh the
browser to see your handiwork. You should see just the list of questions.
Pages:
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244