39 With the div and ul
?¬‚ oated too, the ?¬‚ oated list items are
enclosed again.
Now we??™re getting somewhere. These ?¬‚ oated elements now nicely
shrink-wrap the li elements and our horizontal menu is starting to
take shape. Let??™s next make some space around the text??”it??™s really
jammed in there and actually touches the containing element on
the sides??”by adding some padding around the link??™s text. I am
going to temporarily put a rather excessive amount of vertical padding
here (1 em) to illustrate a key aspect of making these menus
work correctly.
#multi_drop_menus a {
background-color:#DDD;
padding:1em 6px;
}
makes the div enclose the ul
makes the ul enclose the li??™s
STYLIN??™ WITH CSS - CHAPTER 6 222
FIGURE 6.40 The gray background
of the link is clearly larger, but it has
spread out to vertically cover the
containing elements??™ borders.
As you can see in Figure 6.40, something isn??™t right here. The link??™s
background has become larger, but has spread itself vertically over
the containing elements, instead of pushing outward on them and
resizing them. The fact is that inline elements don??™t interact with
their containing elements in the way you might expect when you
apply padding and borders to them. Information about the vertical
padding of inline elements isn??™t passed up the hierarchy to the
containing elements in the same way as block level elements, so the
containing elements don??™t know that they should resize themselves
to accommodate the larger area now occupied by the link.
Pages:
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262