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;
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
Search WWH ::

Custom Search