Stylin' with CSS: A Designer's Guide 2nd Edition

Prev | Current Page 285 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"

12.
FIGURE 7.12 The improved menu
styling.
The menu??™s div that extended across the page before is actually still
there but now is transparent. The left margin on the ul is removed,
which moves the menu all the way to the left, and a small bottom
margin creates space between the menu and the content area.
TRANSPARENCY ON THE DROP-DOWNS
The multi_level_menu.css ?¬? le also has a capability to add transparency
to the drop-down part of the menu. I??™ve coded the style sheet
so all you need to do is add the class transparent to the menu??™s containing
div like this:

and the menu immediately becomes transparent (Figure 7.13).
FIGURE 7.13 Simply adding the
transparent class to the menu??™s div
renders all the menu??™s drop-downs
with a nice see-through effect.
Actually, the CSS speci?¬? cation uses the term opacity, which is, of
course, the antonym of transparency??”as something gets more
transparent, it becomes less opaque.
Confusingly, there are three different ways of creating opacity
between the various browsers.
1. The IE method: ?¬? lter:alpha(opacity=90);
2. The Mozilla (Firefox) method: -moz-opacity:0.9;
3. The CSS3 Standards method (Safari and other SBCs):
opacity:0.9;
values 0 to 100
values 0 to 1
values 0 to 1
BUILDING WEB PAGES 257
So the transparency rule in the menu style sheet looks like this:
div.

Pages:
273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297

An Account of the English Colony in New South Wales, Volume 2 (page 492) Danny's Own Story (page 397) Account of a Tour in Normandy, Volume 2 (page 83)

Electronic Books

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"