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.
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.
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>
Two new style rules have been added to figcaption_adapt.css:
.figure {
width: 61.5%
.figure img {
max-width: 100%;
Search WWH ::

Custom Search