ptg16476052Laying Out the Page 43115
such as Lynx will read your page, and also how search engines and screen readers will
understand it. 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 15.4 is a style sheet to do exactly that.
LISTING 15.4 Moving One Section Before Another
/ dunbar-move-15.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?
n 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
links.
n 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.
n Absolute positioning properties align the top-right corner of the #sitenav section
with the top-right corner of its containing block, the #header.
n 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-
dow.
n 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 15.6 shows the effects of these changes.