Tài liệu Pro CSS Techniques- P4 docx

Figure 7-7. Problem solved!
If we resize the text somewhat, you’ll notice that the page reflows accordingly, as shown in
Figure 7-8.
Figure 7-8. Same page with resized text
CHAPTER 7
■
CSS LAYOUTS122
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 122
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The addition of the footer (admittedly, a footer with no actual content), which is then
given the clear:both; CSS property/value pairing, solves the problem of the outer element
collapsing underneath these floated items—but it’s including additional markup for the sake
of it, some might argue. There are ways that you can avoid inserting seemingly superfluous
markup like this and still manage floated items effectively, something which we cover later in
this chapter.
The main issue with this fixed-width layout is still that it won’t allow text to resize com-
pletely. Eventually you’ll run out of horizontal room for the text. So with that in mind, let’s look
at a more flexible CSS layout.
The Liquid Layout
As its name suggests, a liquid layout is one that reflows to fill the available space. Some people
swear by this layout as it gives the person viewing your site control (“I want my window this
size”). However, this layout has its own dangers:
• If the window is resized to maximum, reading large blocks of text can become difficult;
scanning from the end of a line to a new line is not easy.
• If the window is sized down quite a lot, elements of the page may collapse in on each
other and overlap in all sorts of weird and not-so-wonderful ways if you don’t do your
math correctly.
In short, the flexibility that a liquid layout offers may come at a price, depending on how
your site visitors set their browsers. But caveat emptor!
Here’s the CSS for a liquid layout of the same page design. Rather than set a specific width
for the wrapper container, we’ve specified a margin in the body element (40 pixels at each side).

Because a block-level element will take up 100 percent of the available width by default, the
wrapper will stretch to fill whatever size the browser window is; there’s no need to specify
a width here.
CHAPTER 7
■
CSS LAYOUTS 123
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 123
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
body {
margin:10px 40px;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
}
#wrapper {
text-align:left;
background:#dade75;
border:1px solid silver;
}
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
background:#fff url(nav-to-content-trans.gif) repeat-y left;
float:right;
width:75%;
}
#content-inner {
padding:5px 15px 0 15px;

}
#navigation {
width:25%;
float:left;
padding-top:15px;
}
#footer {
clear:both;
}
See Figure 7.9 for the result, at various widths.
CHAPTER 7
■
CSS LAYOUTS124
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 124
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 7-9. Liquid layout at different sizes
The width of the navigation and the content add up to 100 percent (75 percent + 25 percent).
However, if you were to add a border to either of these elements (even a one-pixel border), you
wouldn’t have enough room for the two elements to sit side by side, since they are floated. One
item would wrap underneath the other (as shown in Figure 7-10). Try not to mix and match in
this way or, if you must, shave off the percentage values just a little—perhaps 24% and 74%—
and try resizing the screen to see what effect this has.
CHAPTER 7
■
CSS LAYOUTS 125
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 125
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 7-10. Be careful when adding widths of floated items; if they add up to more than 100
percent, wrapping like this can occur.
■

Tip
You may have wondered why we included both a
content-wrapper
and a
content-inner div
—
why not just one container for the content? This is a simple workaround to a problem you’ll encounter when
calculating widths of elements, especially when using a flexible design. When you’re adding padding to an
area, such as around the text in the main content,
padding
adds to the widths you’ve defined and may take
the total over 100 percent. It is often much less problematic to use an outer container on which you specify
the width, and then apply the padding, border, or margin properties on the inner container. That way, these
properties can work independently and won’t cause issues with calculating widths. Purists might argue that
adding another
div
is a waste of markup, but we feel it is a minor inconvenience to make the CSS work
cross-browser. As long as you use sensible
id
attributes for these
div
s, it’s a highly practical compromise.
The issue is related to how browsers understand the Box Model, which defines how the width of content in
a block-level element is calculated and rendered alongside borders, margins, and padding widths. Earlier
versions of IE got the calculation wrong, thus causing untold problems for cross-browser designs. We dis-
cuss the Box Model problem—and the hack that solves a lot of the problems associated with it—in Chapter 6
(we also present a hack-less alternative).
Elastic Layouts
As you learned from the previous example, with the liquid layout the browser window is stretched
wide and the content becomes difficult to read. What you really want is a page width that works

CHAPTER 7
■
CSS LAYOUTS126
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 126
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
alongside the font size so that the two aspects are linked in some way. If the font size is reduced,
the line length—and along with it the page width—comes down accordingly, and vice versa.
Thankfully, there is a method for accomplishing this goal: the elastic layout.
In an elastic layout, when you change the font size, other elements scale up or down
accordingly. You use em measurements rather than pixels or percentages. An em is directly
related to the size of the typeface, so if you specify a width for the wrapper in terms of ems,
when you increase the font size the width of the wrapper goes up as well.
The first step is to set a sensible baseline. On most browsers, the default font size is 16 pix-
els. If you can knock the default down to 10 pixels in the CSS for the body, calculations will be
a lot easier from that point on. You can do this by setting font-size in the body to 62.5%
(62.5 percent of 16 = 10):
body {
font-size:62.5%;
}
Then, knowing that each em represents 10 pixels at the default font size, you can use ems
for subsequent measurements. For example:
h1 {
font-size:2em
}
would give you level 2 headings of 20 pixels at the default font size, but these headings would
scale up if the user prefers.
Let’s look at the amended style sheet for the elastic layout. As before, the HTML is
unchanged; only the CSS is different. The significant changes are highlighted in bold:
body {
margin:0;

padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
font-size:62.5%;
}
#wrapper {
font-size:1.4em;
width:56em;
margin:10px auto;
text-align:left;
background:#dade75;
border:1px solid silver;
}
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
CHAPTER 7
■
CSS LAYOUTS 127
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 127
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
width:40em;
}
#content-inner {
padding:5px 15px 0 15px;
}

#navigation {
width:15em;
float:left;
padding-top:15px;
}
#footer {
clear:both;
}
The effect is best demonstrated with another comparative screen shot (Figure 7-11). This
one shows the page in IE 6/Win set at the five font-size intervals available in the View ➤ Text
Size menu.
Figure 7-11. Elastic design in IE at five font sizes
CHAPTER 7
■
CSS LAYOUTS128
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 128
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The two-column widths scale up, as does the text content; the only item that does not
scale up is the heading, as this is a fixed-width img element. Given that, you could just as easily
use scaling text for that area.
When Elastic Layouts Attack!
Predictably, there’s another gotcha to mention now. An elastic layout is perhaps too helpful to
users. What if they scale things up so much that the page doesn’t fit in the browser window?
Silly them, you might be tempted to say, but there will be times when you’ll want to take back
some control. Here’s where a hybrid layout comes in.
Elastic Layout: Constrained
In the constrained version—a slight tweak of the previous version—you use ems for sizing the
text and the widths of the wrapper, navigation, and content divs. However, you stop them from
growing too big by setting a percentage for the max-width property. For the wrapper div, let’s tell
the browser that the maximum it should go up is 95 percent of the browser viewport. The navi-

gation and content are constrained to 25% and 75%, respectively. Here is the amended CSS:
body {
margin:0;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
font-size:62.5%;
}
#wrapper {
font-size:1.4em;
width:56em;
max-width:95%;
margin:10px auto;
text-align:left;
background:#dade75;
border:1px solid silver;
}
CHAPTER 7
■
CSS LAYOUTS 129
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 129
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
width:73%;

max-width:73%;
}
#content-inner {
padding:5px 15px 0 15px;
}
#navigation {
width:25%;
max-width:25%;
float:left;
padding-top:15px;
}
#footer{
clear:both;
}
■
Note
Notice that the two widths are
73%
and
25%
for the content and the navigation, respectively. Choos-
ing
75%
and
25%
causes IE/Win to show the unsightly wrapping effect demonstrated earlier in this chapter.
For best effect, try this version and compare it to the previous version using a browser
such as Firefox, Netscape 7 or 8, or Opera. Internet Explorer? Ah, well, this will only work if you
are using IE 7 or above. Earlier versions do not support the max-width CSS property. However,
IE 6 and earlier also don’t offer limitless scope for scaling fonts up like other browsers do, so

you probably don’t need to worry about this problem too much. You aren’t likely to be able to
scale the page design up so that it’s bigger than the browser window anyway.
Figure 7-12 shows the web page at the default size, then notched up a bit in the second
screen. In the third screen, the width goes no further but the text scales up further within the
upper boundaries that have been set.
CHAPTER 7
■
CSS LAYOUTS130
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 130
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 7-12. Elastic design with an upper width constraint
CHAPTER 7
■
CSS LAYOUTS 131
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 131
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
■
Tip
Just as you can use the
max-width
CSS property to set upper width constraints, you can also apply
limits the other way using the
min-width
property. Try amending the code and see the effect for yourself.
Resolution-Dependent Layouts
An interesting technique that you might like to employ is the resolution-dependent layout.
(Actually, that’s a bit of a misnomer, as it’s not the resolution of your monitor but the size of
the window in which you’re currently viewing a web site that we’re interested in.) With this
technique, you display one view of your page as a default (normally a smaller window size)
but for users who are viewing the site in a large window, you display an adapted design that

maximizes that space available. This layout is not the same as a liquid layout, which resizes
continually as you move the browser window’s sides around; instead, once a “trigger” point is
reached the layout changes and affects the content. You can see a good example of this tech-
nique on Simon Collison’s web site CollyLogic (www.collylogic.com/), as shown in Figure 7-13.
Figure 7-13. Simon Collison’s adaptable page layout on CollyLogic.com
On his site, Simon uses a combination of
• CSS (for the default styling options)
• JavaScript (to check for window resize events)
• DOM scripting (JavaScript that dynamically changes CSS display property values of the
affected elements)
CHAPTER 7
■
CSS LAYOUTS132
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 132
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
■
Note
It is possible to use floated elements to achieve a similar effect. If the screen is big enough, the
extra column floats back up into view, but if not, the column wraps. This is a difficult effect to pull off con-
vincingly without it appearing to be a bug, though!
We won’t cover this technique in detail, but Simon explains how it’s done here:
www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/.
Two Columns or Three?
So far we’ve seen a simple two-column design at work using various layout methods. What if
we want to add in another column or two? In theory it’s just a matter of doing your sums cor-
rectly and making sure the figures don’t add up to more than 100 percent. But as you add more
columns to your design you may well run into issues regarding the source order (in other words,
the order in which the different sections appear in the HTML source) and the display of those
columns. Let’s see how adding columns works in an example page.
Say we want to add to the content area a new column for related links. To do this, we’ll

place the column inside the content’s outer container (content-wrapper); then we’ll use a float
to push the main content over to one side of that content-wrapper. The related links will be
floated on the other side. Here’s the CSS with relevant parts highlighted in bold:
body {
margin:10px 40px;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
}
#wrapper {
text-align:left;
background:#dade75;
border:1px solid silver;
}
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
width:75%;
}
#content-inner {
width:70%;
padding-left:15px;
float:left;
}
CHAPTER 7
■

CSS LAYOUTS 133
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 133
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
#navigation {
width:25%;
float:left;
padding-top:15px;
}
#related {
float:right;
width:25%;
}
#related ul{
margin:0;
padding-left:15px;
}
#related h2 {
font-size:large;
}
#footer {
clear:both;
}
■
Note
We’re applying our third column to the liquid layout that we discussed earlier. Also notice that we’ve
added just a smidgen of style to the links in the right column to remove some of the default padding in the
list items.
The body of the page has also changed to accommodate the new links in the added column:
<body>
<div id="wrapper">

<div id="header">
<img src="swanky-header-graphic.gif" alt="Swanky header graphic"➥
width="377" height="41" />
</div>
<div id="content-wrapper">
<div id="content-inner">
<p>We flew with Czech Airlines ... </p>
</div>
<div id="related">
<h2>Related Links</h2>
<ul>
<li><a href="/prague/">Prague diary</a></li>
<li><a href="/sydney/">Sydney diary</a></li>
<li><a href="/italy/">Italy diary</a></li>
</ul>
</div>
</div>
CHAPTER 7
■
CSS LAYOUTS134
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 134
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<div id="navigation">
<ul>
<li><a href="day1.html">Day 1 (arrival)</a></li>
<li><a href="day2.html">Day 2 (kutna Hora)</a></li>
<li><a href="day3.html">Day 3 (Prague Castle)</a></li>
<li><a href="day4.html">Day 4 (up the towers, Karlstejn Castle)</a></li>
<li><a href="day5.html">Day 5 (Metro tour)</a></li>
</ul>

</div>
<div id="footer"></div>
</div>
</body>
You can see the result in Figure 7-14.
Figure 7-14. We added the third column to the right of our page.
Changing Layouts at the Flick of a Switch
People often mention the need for multiple-page templates when dealing with content man-
agement systems (CMSs). The pages typically have common themes but can differ significantly
in layout, such as the following:
• Pages with navigation on the left
• A page with no left navigation at all
• A three-column layout
• A page with only a header and one large image taking up the entire content area
(a splash page)
CHAPTER 7
■
CSS LAYOUTS 135
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 135
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
It is a mistake to assume that each page needs to be built differently. Using CSS, you can
create a page structure that contains all the necessary hooks. Think of placeholders in your
CMS or editable areas in a template on something like Dreamweaver, but use CSS to display or
hide sections depending on what type of page you are in. You specify the page type by using
an id or class attribute in the body element, which, through use of contextual selectors in the
CSS, affects the rendering of elements further down in the document tree.
Let’s look at another example page. A corporate design, this page needs
• A header, for branding and search
• A breadcrumb trail
• Left navigation

• Content
• A third column for related information
• A footer that contains copyright information, back-to-top links, and so forth
This will be the default layout. Let’s take a look at how that page could be built before we
start switching the layout. Here’s the complete page—CSS first:
body {
margin:10px 40px;
padding:0;
text-align:center;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:62.5%;
}
#wrapper {
text-align:left;
border:1px solid #033;
position:relative;
font-size:1.4em;
}
#header {
background-color:#033;
color:#fff;
padding:10px;
}
h1 {
padding:0;
margin:0;
}
#breadcrumb {
background: #009F9F;
color:#fff;

padding:5px 10px;
}
CHAPTER 7
■
CSS LAYOUTS136
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 136
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
#breadcrumb a {
color:#fff;
}
#content-wrapper {
padding-left:9em;
padding-right:11em;
}
#navigation {
position:absolute;
top:6.8em;
left:0;
}
#related {
position:absolute;
top:6.8em;
right:10px;
}
#navigation ul, #related h2 {
margin-top:0;
padding-top:0;
}
#related ul {
margin:0;

padding-left:15px;
}
#related h2 {
font-size:large;
}
#footer {
padding:5px 0 5px 160px;
clear:both;
background: #D9FFF8;
font-size:0.8em;
color:#030;
}
And now the (X)HTML that refers to it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"➥
" /><html xmlns=" /><head>
<title>Default document layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="switcher.css" rel="stylesheet" type="text/css" />
</head>
CHAPTER 7
■
CSS LAYOUTS 137
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 137
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
<body id="cols3">
<div id="wrapper">
<div id="header"><h1>Fictional TravelCo &trade;</h1></div>
<div id="breadcrumb">
You are here: <a href="/travel/">Travel</a> &gt;
<a href="/travel/destinations/">Destinations</a> &gt; Europe

</div>
<div id="content-wrapper">
<div id="content-inner">
<p>This is the content area for some fictional corporate site. ... </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="/linkdest1/">Nav link 1</a></li>
<li><a href="/linkdest2/">Nav link 2</a></li>
<li><a href="/linkdest3/">Nav link 3</a></li>
<li><a href="/linkdest4/">Nav link 4</a></li>
<li><a href="/linkdest5/">Nav link 5</a></li>
</ul>
</div>
<div id="related">
<h2>Related Links</h2>
<ul>
<li><a href="/related/">Related link</a></li>
<li><a href="/related/">Another link</a></li>
<li><a href="/related/">And another</a></li>
</ul>
</div>
<div id="footer">Legal mumbo jumbo goes here</div>
</div>
</body>
</html>
■
Note
For this layout, we’ve used absolute positioning on the left and right columns, which we placed

using ems rather than floats. We chose this approach because the left and right columns appear after the
content in the source order and the main page content will change in size depending on the browser window
width. Width calculations are troublesome for floated layouts (because, as mentioned earlier, it’s not possible
to calculate widths in CSS as 100 percent minus 200 pixels, for example). By using absolute positioning on
the left and right navigation elements and setting padding on the body content to match their widths, we can
achieve a liquid layout regardless of the HTML source order.
CHAPTER 7
■
CSS LAYOUTS138
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 138
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
This layout is a hybrid of techniques:
• The overall page container is liquid, so text reflows as you resize the window.
• The left and right columns (the main navigation and the related-links sections, respec-
tively) are positioned absolutely using ems. This gets around the source order problem
that can occur with floated layouts; it’s as if we’ve placed the columns over the top of
the main content, and that content has been pushed in using padding-left and
padding-right properties so that the text does not show underneath those two columns.
Figure 7-15 shows the net result.
Figure 7-15. A simple but typical three-column layout
The main content is significantly larger (in terms of quantity) than the content in the side
columns, but the page layout holds together well, even when the window width is stretched
wide. As we explained earlier, when you position an element absolutely, you remove it from
the document flow and the outer containing element can collapse in underneath if no other
content is there to pad it out. If there were more content in the absolutely positioned block,
the situation in Figure 7-16 could occur.
CHAPTER 7
■
CSS LAYOUTS 139
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 139

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 7-16. Content pops out of the outer container (absolute positioning).
Later in this chapter we’ll refer you to another layout that gets around this problem. For
now, though, we wanted you to at least be aware of this potential hiccup in the layout, as you
may well come across it yourself and wonder about the cause.
In the body element for the source code is an id:
<body id="cols3">
In the CSS, there’s currently nothing making use of that, so we’ll make some changes:
body#cols3 #content-wrapper {
padding-left:9em;
padding-right:11em;
}
body#cols3 #navigation {
position:absolute;
top:6.8em;
left:0;
}
body#cols3 #related {
position:absolute;
top:6.8em;
right:10px;
}
Now the CSS is telling the browser to lay out the two divs at the sides and add padding to
the main content only if they are contained in a document with a body id of cols3. If another
page calls that style sheet but has a different id in the body (or no id at all), it will ignore those styles
and simply present the markup in the order it appears in the source, as shown in Figure 7-17.
CHAPTER 7
■
CSS LAYOUTS140
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 140

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 7-17. This page has ignored the contextual styles applied to the three content areas.
So, make sure that you have the correct id in the <body> tag (cols3) and the browser will
know which piece of the CSS it should use to render the web page.
■
Note
We’ve used
cols3
as the
id
rather than
3cols
—which would be a more appropriate name—
because an
id
cannot start with a number, according to the XHTML recommendations defined by the W3C
(
www.w3.org/TR/html4/types.html#h-6.2
).
Switching the Design to a Splash Page
Let’s consider another variant of this design: a splash page that doesn’t require any left or right
navigation (but the header and footer should remain). The first thing we need to do is change
the id value in the body element:
<body id="splash">
Next let’s define display rules that will apply only if the page has an id in the body of
splash (contextual selectors, as you’ll recall):
/* Splash page styles */
body#splash #content-wrapper {
padding-left:1em;
padding-right:1em;

}
CHAPTER 7
■
CSS LAYOUTS 141
732Xch07FINAL.qxd 11/1/06 1:59 PM Page 141
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.