HTML and CSS Reference
In-Depth Information
■
As in the preceding section, if you put a space between the two parts, it becomes a descendant selector.
To style elements that have both classes applied to them, there must be no space in the selector. it's a subtle, but
important difference.
Note
The styles for the
figure
and
figcaption
classes in figcaption_safe.css are exactly the same as in figcaption.css
apart from the selectors. The amended rules look like this:
.figure.floatleft
{
margin-left: 40px;
}
.figure.floatright
{
margin-right: 10px;
}
.figcaption
{
display: block;
font-weight: bold;
padding: 10px;
text-align: center;
}
If you test figcaption_safe.html in a browser, it looks the same as Figure
7-16
.
■
i have added an internet Explorer conditional comment to set the width of the
wrapper <div>
to
650px
for
iE 6, which doesn't support the
max-width
property. There's another problem with iE 6 that i explain in “Dealing with
the iE 6 Double-margin Bug” at the end of this chapter.
Note
Making the Images and Captions Adapt to the Screen Width
The style rule for the
wrapper <div>
sets its maximum width to
650px
. If the browser viewport is narrower, the
text automatically reflows. The images and captions need to be equally adaptive. The simple way to scale the
images is to remove the
width
and
height
attributes from the
<img>
tags, and to give the
figure
class (or
<figure>
elements) a percentage width. At the same time, you need to set the maximum width of the images to
100%
to
prevent them from spilling out of their containers.
In figcaption_adapt.html, the
width
and
height
attributes have been removed from the
<img>
tag:
<div class="figure floatleft"><img src="images/nice seafront.jpg" alt="Nice seafront">
<div class="figcaption">Nice seafront from la Colline du Château</div>
</div>
Two new style rules have been added to figcaption_adapt.css:
.figure {
width: 61.5%
}
.figure img {
max-width: 100%;
}
