10.1. Alignment of Images and Text
As we learned in Chapter 7, CSS defines the float property to aid in the alignment of images and text. float corresponds to the deprecated align attribute associated with the HTML <img> tag .
Figure 10-1 is a reminder of the way we can make text under an image wrap to the left margin, simply by defining a float property for that image. In this case, the image has its float property set to left, which is precisely equivalent to the effect of the old HTML tag <img align="left">.
Here's the HTML that produces Figure 10-1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Provides Great Flexibility</title>
</head>
<body>
<img src="/images/kod.jpg" style="float: left; width: 112px;
height: 177px; margin: 0 1.5% 0;" />
<p>The image on the left shows a footbag player making the kick
of the day on the Footbag Freaks site. This caption appears
next to the image and has some significant advantages over
the earlier table-based layout. For example, if you resize
the browser window, you'll see this text wrap so that it
wraps neatly back under the image. Of course, to create that
effect, I had to write a longer caption than you'd normally
use. The image on the left shows a footbag player making the
kick of the day on the Footbag Freaks site. This caption
appears next to the image and has some significant advantages
over the earlier table-based layout. For example, if you
resize the browser window, you'll see this text wrap so that
it wraps neatly back under the image. Of course, to create
that effect, I had to write a longer caption than you'd
normally use. The image on the left shows a footbag player
making the kick of the day on the Footbag Freaks site. This
caption appears next to the image and has some significant
advantages over the earlier table-based layout. For example,
if you resize the browser window, you'll see this text wrap
so that it wraps neatly back under the image. Of course, to
create that effect, I had to write a longer caption than
you'd normally use.</p>
</body>
</html>
Recall also from Chapter 6, that you can use the clear property to force a new paragraph (or any other HTML block element, for that matter) to drop below any floating elements with which it would otherwise share the width of the page.
For example, imagine we wanted to break the text in Figure 10-1 into two paragraphs, and guarantee that the second would never appear to the right of the image, no matter how wide the user opened the browser. We could achieve this by applying to our code the minor modifications that appear in bold below. The product of this HTML is shown in Figure 10-2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using clear to Force Paragraphs to Left Edge of
the Window</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<img src="/images/kod.jpg" style="float: left; width: 112px;
height: 177px; margin: 0 1.5% 0;" />
<p>The image on the left shows a footbag player making the kick
of the day on the Footbag Freaks site. This caption appears
next to the image and has some significant advantages over the
earlier table-based layout. For example, if you resize the
browser window, you'll see this text wrap so that it wraps
neatly back under the image. Of course, to create that effect,
I had to write a longer caption than you'd normally use. The
image on the left shows a footbag player making the kick of
the day on the Footbag Freaks site.</p>
<p style="clear: left;">This caption appears next to the image
and has some significant advantages over the earlier
table-based layout. For example, if you resize the browser
window, you'll see this text wrap so that it wraps neatly back
under the image. Of course, to create that effect, I had to
write a longer caption than you'd normally use. The image on
the left shows a footbag player making the kick of the day on
the Footbag Freaks site. This caption appears next to the
image and has some significant advantages over the earlier
table-based layout. For example, if you resize the browser
window, you'll see this text wrap so that it wraps neatly
back under the image. Of course, to create that effect, I
had to write a longer caption than you'd normally use.</p>
</body>
</html>
10.1.1. Placing Text On Top of Images
A final technique for the arrangement of text relative to images allows the placement of text on top of a graphic. In print circles, this is sometimes referred to as knockout type , as it "knocks out" part of the image and replaces it with text. However, I'll also show you how to use a screen to avoid the complete knockout of the image.
There's actually nothing terribly tricky about this technique. You just position both the graphic and the text so that they overlap, and make sure that the z-index of the text is higher than that of the graphic. You can handle this second requirement either by specifying the text after the image is defined, or explicitly assigning z-index values as described in Chapter 6.
In fact, the hardest part about this technique is getting the type's size and position just right, so that it creates the desired effect over the graphic. It's usually best to use pixel font sizes in these cases. Since images are made of pixels, and therefore have fixed pixel dimensions, any text that you need to line up with an image should use the same units for its dimensions.
Figure 10-3 shows a simple example of the use of knockout type. Here, we had a nice, neutral background, so any dark color would do. I used black, though red or dark blue would do equally well.
Figure 10-3. Knockout Type Using CSS Positioning
Here's the HTML that produces the page in Figure 10-3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>'Knockout Type' in CSS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="position: relative;">
<img src="/images/kod.jpg" width="112" height="177"
alt="Jase D performs a perfect Show Pony" />
<h3 style="position: absolute; left: 3px; top: 3px;
font: bold 14px Arial, Helvetica, sans-serif;">Kick<br />
Of The<br />
Day!</h3>
</div>
</body>
</html>
That works quite well, but what if you really wanted the knockout type to appear over the body of the footbagger? Figure 10-4 shows a first attempt at this, which involves simply repositioning the text in Figure 10-3 onto a single line.
Figure 10-4. Knockout Type Over Non-Neutral Background
The result isn't very satisfactory, is it? Some of the type is illegible. Some of it is readable. And, clearly, changing to, say, a white font will fix part of the problem, but make other aspects of it worse. We could fiddle around with color combinations and come up with one that shows reasonably well across the entire non-neutral background, but the result is always likely to feel a little artificial.
There is a way to fix this. It involves using a background image behind the knockout type, a subject I won't treat in detail until Chapter 11. But, for now, you can see how this works in Figure 10-5. I've placed a white screen behind the text that we're displaying, with the result that the black type displays well, while the underlying image shows through as if it were being slightly shadowed.
Figure 10-5. Using a Background Screen on Knockout Type Over Non-Neutral Background
Here's the HTML that produces the effect shown in Figure 10-5. The background graphic, halfscreen-white.gif, is available in the images directory of the code archive[1].
[1] I'm indebted for this trick, as I am for so much of my CSS knowledge, to Eric A. Meyer. He, in turn, credits Todd Fahrner for teaching him this technique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>'Knockout Type' in CSS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="position: relative;">
<img src="/images/kod.jpg" width="112" height="177"
alt="Jase D performs a perfect Show Pony" />
<div style="position: absolute; left: 0; top: 65px;
font: bold 14px Arial, Helvetica, sans-serif;
background: url(/images/halfscreen-white.gif)
center repeat;">Kick Of The Day!</div>
</div>
</body>
</html>
The details of how this background is displayed will be explained in Chapter 11.