Essentially, this page is a combination of the ???Creating a boxout??? and
???Creating a sidebar with faux-column backgrounds??? exercises from earlier in the
chapter. A few changes have been made, however. The boxout has been duplicated
three times and placed within the sidebar, the float: right pair from .boxout has
been deleted (because the boxouts no longer need to float??”they are within a container
that itself is floated), and some bottom padding has been added (to ensure
there??™s a gap below the final paragraph of each boxout).
.boxout {
width: 180px;
padding: 0 10px 1px;
margin: 0 0 20px;
background: #e1e1e1 url(boxout-bottom.gif) 0 100% no-repeat;
}
Boxouts revisited: Creating multiple boxouts within a sidebar
There is an alternate way to create faux columns as well??”see step 5 of the ???Creating
flanking sidebars??? exercise later in the chapter.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
296
Also, the background from the faux columns exercise isn??™t there, because the
vertical line the boxouts create is enough to make the column visually distinct??”
another separator isn??™t necessary.
2. Add class values. While consistent style is good for a website, it??™s sometimes neat
to offer multiple styles for an element. This can come in handy for categorization??”
for example, each boxout in this design could contain information about a certain
area of the website, and therefore color coding them and providing each with an
icon (for those viewers with color vision difficulties) may help users navigate more
easily.
Pages:
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390