HTML and CSS Reference
In-Depth Information
With that in mind, let's consider the parts we'll need. Figure 8-2 shows what we'll use to
make this header.
Figure 8-2.
Our header components
We'll use CSS to accomplish the following with these components:
•
Position the logo and the marketing tagline image precisely where we want them
•
Tile the background image
•
Place the reflection as a background image
Positioning the Logo and Tagline
In this example, we're using images for the logo and tagline. It might be argued that a heading
(
h1
or
h2
element) might be more appropriate, but you know how marketing departments are
about their branding. However, we can place the images inside these elements like so:
<h1>
<img src="01-header/logo.gif" alt="TravelGo.com" />
</h1>
<h2>
<img src="01-header/getting-you-there.gif"
➥
alt="Getting you there since 1972" />
</h2>
At least this way we're providing some semantic meaning about the images (or the text that
appears in the
alt
attribute). This could benefit search engines and screen reader users, but it
also presents a small layout problem—headings, by default, have a lot of margin space around
them. So, we should switch these off like so:
#header h1,
#header h2 {
padding:0;
margin:0;
}
■
Note
We have used contextual selectors here—in other words, we're only affecting
h1
and
h2
elements
that are in the header. If you were to use headings elsewhere, they would not be affected by this CSS.
Now we need to move these images to the correct place in the header. By analyzing the
header graphic that was provided in the mock-up (we're trying to make this as real-life as
possible here!), we've ascertained that the logo is 8 pixels along and 5 pixels down from the
header's top-left corner. The tagline is 193 pixels along and 20 pixels down. We put these in the
correct place using absolute positioning:
