31).
DESIGNING INTERFACE COMPONENTS 211
FIGURE 6.31 By adding vertical padding,
the borders of each list item are
exactly halfway between each line of
text, and we get a nicely positioned
dividing line when we style the list
item??™s bottom border.
By adding the top and bottom padding to increase the height of the
li elements instead of creating space between them, the top and
bottom edges of the li elements are exactly halfway between each
line of type. Now when you style either their top or bottom edges,
you get a line exactly halfway between them.
Now let??™s do some more cleanup on this list (Figure 6.32).
1. Remove the bullets.
2. Set the margins on the ul element so that the list is better positioned
within the div.
3. Indent the list items so they are not ?¬‚ ush with the edge of the
rules.
FIGURE 6.32 Now we pad the list
elements, remove the bullets, and
indent the text with respect to the
dividing lines.
Here are the changes to the markup:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:160px;
font-size:.75em; margin:20px;}
STYLIN??™ WITH CSS - CHAPTER 6 212
ul {border:0; margin:10px 30px 10px 1.25em; padding:0;
list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding:.3em 0;
text-indent:.5em}
The most notable modi?¬? cation made at this step is using the
list-style-type property, with a value of none, to remove the bullets.
Pages:
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250