HTML and CSS Reference
In-Depth Information
Figure 11-5.
The header has been fixed, but the top of the page is now hidden
7. To fix the horizontal menu below the header, you need to add
position
to the
#nav
style rule, and set its value to
fixed
. The header is
127px
high, so the
top
offset for
the menu needs to be the same. you also need to apply the same
width
and
max-
width
values as in step 5. The amended rule looks like this:
#nav {
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
height: 40px;
position: fixed;
top: 127px;
width: 100%;
max-width: 1000px;
}
8. The menu is now in position, but the main content is still hidden. To bring it into
view, you need to change the top margin in the
#main
style rule. it's currently
15px
,
so you need to add the height of the menu (
40px
), the menu's top margin (
15px
), and
the menu's
top
offset to get the new amount (
197px
). Change the value like this:
#main {
width: 64%;
margin:
197px
1% 10px 35%;
background-color: #FFF;
padding: 18px 0;
}
9.
if you save the style sheet and test the page now, the header and menu remain fixed
onscreen in all modern browsers. However, iE 6 doesn't support fixed positioning.
Although iE 7 does, it has problems with displaying the sidebar correctly. To
