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
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
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"
alt="Providing all the caffeine you need to power your life.">
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.
Search WWH ::

Custom Search