ptg16476052440 LESSON 15: Advanced CSS: Page Layout in CSS
Workshop
The workshop contains a Q&A section, quiz questions, and activities to help reinforce
what you’ve learned in this lesson. If you get stuck, the answers to the quiz can be found
after the questions.Q&A
Q Is it ever okay to use tables for layout?
A CSS layouts generally are more efficient and versatile than <table>-based
code, but if you are careful to test your layout tables in a browser such as
Lynx to make sure that the site is usable without tables and you always use the
role=presentation attribute, you can probably get away with it. Tables aren’t
awful for laying out a page, and CSS can be tricky when you’re dealing with grid-
based designs. In general, though, you’re better off using CSS whenever you can.
Q Which are better measurements for layouts, pixels or percentages?
A Some web designers, especially those from a print background or who have picky
clients to please, swear by pixels. With some patience, you can get close to pixel-
perfect designs in CSS. Other designers like percentage measurements, which scale
with the size of the text window. There’s no clear-cut advantage to any approach,
however; all have their pros and cons. You can experiment with a variety of mea-
surement types, and don’t be afraid to mix and match them sensibly on your site—
for example, designating column widths in percentages but also setting pixel-based
min-width and max-width values.
Q Are there problems with using ems for layout?
A Only if you’re not careful. The biggest problems result from setting margins, pad-
ding, or positioning properties based on em values and then changing the font size
of those values. For example, you might overlook the effects of the font-size rule
buried in these declarations:
#sidebar { right: 1em; top: 1em;
text-align: right; color: white;
font-family: Verdana, sans-serif;
font-size: 50%; }This won’t actually be located 1 em in each direction from the corner of its contain-
ing block; it will be 0.5 em from the right and 0.5 em from the top. If you are going
to change the font size within a section that uses ems for dimensions or placement,
set the font-size rules on the contents of the box, as done in this chapter’s style
sheets with #sidebar h3 { ... } and #sidebar ol { ... } rules. You could
also add an extra <div> inside the sidebar and set the font-size rule on that <div>.