FIGURE 6.37 The four types of elements
that will make up our menu
are displayed with their default
positioning.
As Figure 6.37 shows (thanks to the borders and background we
added), the block level elements ?¬? ll the width of the browser window
and the link, which as an inline element, shrink-wraps its
content. The list items (li) are presently stacked above each other,
which is perfectly correct because they are block level elements. Of
course, for a horizontal menu, we need them to sit side-by-side, so
let??™s ?¬‚ oat them, so that they do that (Figure 6.38). We modify the li
rule so it looks like this
#multi_drop_menus li {
border:2px solid blue;
list-style-type:none;
?¬‚ oat:left;
}
FIGURE 6.38 Once we ?¬‚ oat the
list items, the div and the ul snap
closed.
makes the list items sit side by side
DESIGNING INTERFACE COMPONENTS 221
Hmm, what happened to our boxes? Well, once we ?¬‚ oat the list
items, there is no un-?¬‚ oated content in the ul (and therefore the
parent div) so both close up, and the list items hang down. We really
want those elements to enclose the list items, so what??™s to be done?
If you said ???Float them, too!??? then you obviously were paying attention
in the Floating and Clearing section of Chapter 4, as this simple
step solves the problem nicely (Figure 6.39).
#multi_drop_menus {
border:3px solid green
?¬‚ oat:left;
}
#multi_drop_menus ul {
border:2px solid red;
?¬‚ oat:left;
}
FIGURE 6.
Pages:
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261