Because you can use multiple class values in CSS, it??™s possible to simply add
a second class value to each of the boxout divs and then create an override rule
for each in CSS.
3. Add new CSS rules. In the multiple-boxouts-starting-point folder, you??™ll find a
bunch of images with the boxout-top- prefix. These are additional tops for the
boxouts, each of which has a different color and icon. By using three contextual
rules, overrides are created, setting a new background color and image for each of
the three heading classes defined in step 2.
.questionsHeader h2 {
background: #d72a49 url(boxout-top-questions.gif) no-repeat;
}
.chatHeader h2 {
background: #2a84d7 url(boxout-top-chat.gif) no-repeat;
}
.toolsHeader h2 {
background: #d72ab0 url(boxout-top-tools.gif) no-repeat;
}
Note that these rules must be placed after the .boxout h2 rule in the CSS, because
the CSS cascade ensures that the rule closest to the element is applied. If these
were placed above the .boxout h2 rule, they would be overridden by it, resulting
in the boxouts all retaining their default appearance.
The following image shows what your page should now look like.
PAGE LAYOUTS WITH CSS
297
7
Creating flanking sidebars
Although some sites can be designed around a two-column model, you??™ll frequently need
more.
Pages:
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391