HTML and CSS Reference
In-Depth Information
You could go in and change your HTML source around. This would work, but it would
introduce a problem. The order of the HTML in Listing 13.1 is sensible—the name of
the site is given first, and then the navigation menu. This is how users of non-CSS
browsers such as Lynx will read your page, and also how search engines and screen read-
ers will understand it as well. Moving the title of the page after the list of links doesn't
make much sense.
Instead, you can use CSS positioning properties to reformat the page without touching
the HTML file. Listing 13.4 is a style sheet to do exactly that.
Moving One Section Before Another
/* dunbar-move-13.4.css */
#header { padding: 1.25em 0 0.25em 0;
position: relative;
background-color: #404; }
#sitenav { position: absolute;
top: 0; right: 0;
border-bottom: 1px solid #DDDD00;
width: 100%;
background-color: #055; }
What's happening here?
The #header section encloses the #sitenav in the HTML source, so by setting it to
position: relative , it now becomes the containing block for the site navigation
Padding is added to the top of the #header section. This is where subsequent rules
will place the site navigation menu; the padding reserves the space for it.
Absolute positioning properties align the top-right corner of the #sitenav section
with the top-right corner of its containing block, the #header .
Giving a width of 100% to the #sitenav ensures it will reach across the full width
of its containing block, which is, in this case, as wide as the browser display win-
Finally, colors are swapped on the #header and the #sitenav to make them fit in
better with the overall design in their new locations, and a yellow border is added
to the bottom of the navigation links.
Figure 13.6 shows the effects of these changes.
Search WWH ::

Custom Search