#content p {
font-size:1em;
line-height:140%;
margin-bottom:.75em;
}
Finally, a few small tweaks to the default list styling complete the
content area for this page (Figure 7.18).
#content ul li {
margin: 0 0 0 16px;
padding:.3em 0;
font-size:.8em;
}
I mentioned back in Chapter 4 the
importance of applying a width to
?¬‚ oated elements, but this is not necessary
with images; they are already
inherently ?¬? xed width, so they can
be ?¬‚ oated without a corresponding
width rule.
ensures the bullets aren??™t hanging
left out of the containing ul
vertical space between the list
items
smaller text size for the bullets
STYLIN??™ WITH CSS - CHAPTER 7 268
FIGURE 7.18 The styled content
area. The ?¬‚ oated image has small
right and bottom margins so the text
does not touch it.
THE RIGHT PROMO COLUMN
All I have in this column is the image of the book cover and a
list of links. With the padding on the container provided by the
3_col_liquid_faux.css style sheet, I don??™t need to do anything to
the image. The list requires just a few styles to remove the bullets,
reduce the type size, and better space the type. I also add a class to
the ?¬? rst list item so I can bold it. (I would prefer to use a :?¬? rstchild
style and avoid adding the class, but you guessed it, IDWIMIE6.)
Here??™s the CSS, which gives the result shown in Figure 7.
Pages:
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308