STYLIN??™ WITH CSS - CHAPTER 7 266
To further play up this effect, I have ?¬‚ oated one heading one way
and one the other. As the liquid layout is resized, the two elements
change their relative position, adding to the overall effect. Also, the
header needs to be opened up vertically. Some margins on the elements
will take care of that.
#header h1 {
margin:.5em 0 0 0;
}
#header h1 span {
font-size:.85em;
}
#header h2 {
margin:4em 0 0 6.25em;
color:#999;
}
#header h3 {
?¬‚ oat:right;
margin:0 0 0 0;
color:#FFF;
}
These simple styles give this visual effect in Figures 7.17A and B.
FIGURES 7.17A AND 7.17B The
right-?¬‚ oated subhead moves under
the left-aligned main head as the
page is resized.
Stylin??™ with CSS text
a designer??™s guide, second edition
text
page titles for sub-pages (not on
home page)
home page??”a New Riders book,
etc., text
BUILDING WEB PAGES 267
THE CONTENT AREA
The main adjustment needed for the center-column content area is
to get the text to move up next to the photograph. This is achieved
by ?¬‚ oating the photograph left. Whenever I do this, I always add a
right and bottom margin of perhaps .5 em to the ?¬‚ oated image to
ensure the text doesn??™t touch it.
#content img {
?¬‚ oat:left;
margin:0 10px 5px 0;
}
Next, I add some styles for the paragraph next to the picture. I don??™t
want too much text here, and I also want the list that follows to start
below the image, so this is a chance to make a feature of this text
and make it fairly large with plenty of line spacing.
Pages:
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307