HTML and CSS Reference
In-Depth Information
Q Are there problems with using ems for layout?
A Only if you're not careful. The biggest problems result from setting margins,
padding, 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 con-
taining 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 chap-
ter'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> .
Quiz
1. Which property tells the text to start flowing normally again, after a floated col-
umn?
2. How do you designate the containing block for an absolutely positioned element?
3. What kind of rules would you write to change an ordered list of navigation links
into a horizontal navigation bar?
Quiz Answers
1. The clear property can be used after floated columns—for example, if you want a
footer to reach across the entire browser window below the floated columns.
2. You set the containing block by changing the position property, usually to a value
of relative (with no offset properties designated).
3. Listing 13.7 has an example of a style sheet with rules to do that, using the dis-
play property.
13
 
Search WWH ::




Custom Search