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

Custom Search