HTML and CSS Reference
In-Depth Information
The XHTML for this is as follows:
<div id="header">
<h1><img src="logo.gif" alt="TravelGo.com" /></h1>
<h2><img src="getting-you-there.gif" alt="Getting you there since 1972" /></h2>
<div id="headerlinks"><a href="/contact/">Contact Us</a> | <a
href="/sitemap/">Site Map</a> | <a href="/finder/">Store Locator</a></div>
<div id="headersearch"><form><input type="text" name="txtSearch" id="txtSearch" />
<input type="image" src="searchbutton.gif" alt="Search" /></form></div>
</div>
Unstyled, these sections would appear on the left of the header section (underneath the
logo, in fact, as we have already positioned them absolutely). Time to get CSS on the case.
Floating the Links into Place
Starting with the links section (
headerlinks
), we need to float that block to the right:
#headerlinks {
float:right;
}
The text is pretty small in the graphical mock-up, so we'll bump that down somewhat in
the CSS to match:
#headerlinks {
float:right;
font-size:0.8em;
}
Now we need to apply the background image. Figure 8-8 shows what the background
looks like (and the area that we want to be visible by default).
Figure 8-8.
The links background image
A larger background image is used so that if the user scales text up, the background image
reflows accordingly. To make sure this happens, we need to specify that the image is anchored
to the bottom left of the container:
#headerlinks {
float:right;
font-size:0.8em;
background: url(links-bg.gif) no-repeat left bottom;
}
