HTML and CSS Reference
In-Depth Information
Fixing the header images with float
It's often true that there are multiple strategies to solving a layout problem with CSS,
and that's certainly the case here. The way we're going to solve it is to use
float
. You
already used
float
once, to lay out part of the Starbuzz page, before we switched to
using the CSS table layout. But there's no reason you can't mix and match different
strategies, like table display with
float
in the same page; in fact, it's very common. So
let's take a look at how we're going to do this.
heade
rLogo.gif
1
Split the header image into two images
We already did this for you; you'll find the images “headerLogo.gif ”
and “headerSlogan.gif ” in the “chapter11/starbuzz/images” folder.
header
Slogan.gif
2
Update your HTML to use these images
Next, you need to update your HTML to replace the existing header
image, which is one big 800-pixel-wide image, with the two images
we created in Step 1. We'll go ahead and give each image an id that
we'll use to select each of them in our CSS.
<div id="header">
<img src="images/header.gif" alt="Starbuzz Coffee header image">
<img id="headerLogo"
src="images/headerLogo.gif" alt="Starbuzz Coffee logo image">
<img id="headerSlogan"
src="images/headerSlogan.gif"
alt="Providing all the caffeine you need to power your life.">
</div>
3
Fix the images with CSS
Finally, you need to get the images laid out in the header correctly. If
you load the page now, you'll see both images in the header, right next
to each other over on the left side of the page.
B
ut now, th
e slogan i
mage is ri
ght next
to the log
o
im
age. We n
eed to mo
ve it over
here with
CSS.
