The final
boxout will look like that shown in the image to the right:
the corners are rounded; the plain background of the content
area darkens slightly at its base; and the heading is on
a colored background with a gradient (not obvious in a
grayscale book, but if you check out the completed files,
you??™ll see it??™s orange) and a white stripe beneath it to help
make the boxout??™s heading and content distinct.
1. Examine the web page. Open boxout.html and look at the page??™s body content.
The content of the web page is within a wrapper div. The bulk of the page content
is a bunch of paragraphs. The boxout comprises a div with a class value of boxout,
and this is placed before the content the boxout is supposed to float right of. (In
other words, by placing the boxout before the other content, the other content
will wrap around it once the boxout is floated.)
2. Style the wrapper and body. The boxout-starting-point folder contains the
images from the ???Adding padding, margins, and backgrounds to a layout??? exercise
earlier in this chapter, so add the body and #wrapper rules from that exercise to
style the page??™s general layout.
body {
background: #4d4d4d url(page-background.gif) repeat-x;
}
#wrapper {
width: 600px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
padding: 20px 20px 50px;
}
Creating a boxout
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
274
3.
Pages:
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373