HTML and CSS Reference
In-Depth Information
Figure 11-4.
The menu's top margin is pushing the header away from the top of the browser window
4.
Resize the width of the browser window. The horizontal relationship between the
header and sidebar remains unchanged. This is because no offsets have been
specified. so, although the header has been removed from the flow of the document,
it has been fixed in the same position it would occupy normally. The horizontal
position is exactly what you want, but you need to eliminate the effect of the top
margin. you also need to fix the width.
5.
set the
top
offset to zero, and give the header the same
width
and
max-width
as
the
wrapper<div>
.
#header {
background-image: url(../images/yachts banner.jpg);
background-repeat: no-repeat;
height: 127px;
position: fixed;
top: 0;
width: 100%;
max-width: 1000px;
}
6.
save the style sheet, and test the page again in a browser. As Figure
11-5
shows,
the header now looks fine, but the menu and top of the page content are hidden
behind it.
