HTML and CSS Reference
In-Depth Information
As shown in Figure 3.19c, the right edge of the inner division, with its solid
border, is now 0 pixels from the viewport's right edge and 0 pixels from its top.
It is actually outside the
body
element's border!
When does it make sense to use positioning? It is such a powerful tool that
authors are cautioned to use it sparingly and only for exceptional needs. For
example, suppose you are composing a blog post, and you want to complement
the information in the post with an element placed outside the post's content
area, such as in the page's header or footer. Such an element might serve as a
call-to-action link or a reminder icon. CSS positioning is also useful for the
proper placement of tooltip boxes, asides, and drop menus that are made to
appear in response to a user's actions.
he HTML code shown in Example 3.20 creates a simple horizontal navi-
gation menu with second-level drop menus by using relative and absolute
positioning. When the reader's mouse pointer hovers over a irst-level list item,
its nested list's display property is changed from
none
to
block
. Because the
irst-level list item is relatively positioned, its absolutely positioned child list
occupies the same space as its parent. It is only necessary to ofset the nested list
1 em down from the top and 0 pixels from the let edge to position it properly.
his technique works in most modern browsers. he links are just dummy
entries. It is let as an exercise for you to lesh out this skeleton code into an
attractive and useful navigational element.
Example 3.20: HTML skeleton code for creating a two-level horizontal
drop menu
<!DOCTYPE html>
<html>
<head>
<title>Example 3.20</title>
<style type="text/css">
ul { padding: 0; margin: 0; list-style: none; }
li { float: left; position: relative; width: 8em; }
li ul { display: none; position: absolute; top: 1em; left: 0; }
li > ul { top: auto; left: auto; }
li:hover ul { display: block; }
</style>
</head>
<body>
