The first three
pairs in the rule style the header font (see Chapter 3
for more on styling type); the background pair works as per the one in step 4,
except that the solid background color was taken from the bottom pixel of the
background image. Also, as this image is applied at the top left, no positioning
values are required.
.boxout h2 {
font: bold 1.2em Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
background: #d7932a url(boxout-top-orange.gif) no-repeat;
}
6. Position the header. If you test the page, you??™ll see that the header has a gap at its
left and right. This is because the header is within the boxout div, which has 10 pixels
of padding on its left and right edges. By applying negative margins of the same
value to the header, the horizontal space it takes up is increased to span the entire
width of the boxout. Some padding is then added to ensure that the heading text
doesn??™t hug its container??™s edges. Next, the bottom-border setting shown following
adds a single-pixel white line under the header.
.boxout h2 {
font: bold 1.2em Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
background: #d7932a url(boxout-top-orange.gif) no-repeat;
margin: 0 -10px 10px;
padding: 5px 10px;
border-bottom: 1px solid #ffffff;
}
A final rule styles paragraphs within the boxout, differentiating them from other
text.
.boxout p {
font-size: 0.9em;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
276
Note that because of the way the header??™s background is styled, using an image that
blends into a solid color, there??™s no chance of the background running out, even if the
page??™s text is massively zoomed (see the following image).
Pages:
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375