Two-column with narrow footer Method: POSITIONED Layout: LIQUID The example in this section creates a right sidebar column using absolute positioning.. A List of links and news Copyr
Trang 1Layouts Using Absolute Positioning
Absolute positioning can also be used to create a multicolumn page The advantage is that the order of the source document is not as critical as it is
in the float method, because element boxes can be positioned anywhere The disadvantage is that you run the risk of elements overlapping and content being obscured This makes it tricky to implement full-width elements below columns (such as the footer in the previous example), because it will get over-lapped if a positioned column grows too long
When working with absolute positioning, remember that every element you position is removed from the normal flow If content you expect to be at the bottom of the page is sitting at the very top, it’s because you positioned (and thus removed) all the elements above it that were “holding it down.” This is something to keep in mind while troubleshooting
Two-column with narrow footer Method: POSITIONED
Layout: LIQUID
The example in this section creates a right sidebar column using absolute positioning The resulting layout is shown in Figure 16-12 Note that the footer design has been modified for the sake of simplifying the template (full-width footers are problematic, as mentioned earlier)
Footer appears only under the main content.
Figure 16-12 Two-column layout with absolute positioning.
Trang 2The Markup Markup Notes
<div id="header">
Masthead and headline
</div>
<div id="main">
Main article
</div>
A <div id="extras">
List of links and news
</div>
<div id="footer">
Copyright information
</div>
This style sheet absolutely posi-tions the “extras” div element against the right side of the page and 100 pixels down from the top
to leave room for the header ele-ment The “main” content div is given a right margin wide enough
to make a space for the newly posi-tioned box
A�
The Style Sheet
B #header {
height: 70px;
background: #CCC;}
C #main {
D #extras {
background: green;
padding: 10px;} /* adds space within colored box */
E #footer {
padding: 15px;
background: #666; }
body {
font-family: verdana, sans-serif;
font-size: small;
margin: 0;
padding: 0;}
ul { padding: 0px; }
li {
list-style: none;
margin: 10px 0; }
WARNING
Because this template places columns
a specific pixel measurement from the top, it may not be appropriate for pages with headers that may expand taller The solution is to create another containing
div after the header just for the columns,
so that the sidebar can be placed in its top-right corner This will keep the side-bar below the header regardless of its size The trade-off is a bit of unnecessary markup.
WARNING
Because this template places columns
a specific pixel measurement from the top, it may not be appropriate for pages with headers that may expand taller The solution is to create another containing
div after the header just for the columns,
so that the sidebar can be placed in its top-right corner This will keep the side-bar below the header regardless of its size The trade-off is a bit of unnecessary markup.
Style Sheet Notes
In this example, we know that the header is exactly 100 pixels tall (70 height plus 30 pixels of padding)
The 30% right margin makes space for the column that is 25% of the page plus 5% space between the columns
The “extras” div is positioned absolutely 0 pixels from the right edge of the browser and exactly
100 pixels down from the top The margins applied to the main content were also applied to the footer div That is to prevent the footer from being overlapped by
a long sidebar
B�
C�
D�
E�
Style Sheet Notes
In this example, we know that the header is exactly 100 pixels tall (70 height plus 30 pixels of padding)
The 30% right margin makes space for the column that is 25% of the page plus 5% space between the columns
The “extras” div is positioned absolutely 0 pixels from the right edge of the browser and exactly
100 pixels down from the top The margins applied to the main content were also applied to the footer div That is to prevent the footer from being overlapped by
a long sidebar
B�
C�
D�
E�
Trang 3Three-column (narrow footer) Method: POSITIONED
Layout: LIQUID
In this template, both sidebar columns are absolutely positioned, and mar-gins are applied to both sides of the main content to make way for the side-bars The resulting layout is shown in Figure 16-13
Footer appears only under the main content.
Figure 16-13 Positioning two sidebars in a three-column layout.
<div id="header">
Masthead and headline
</div>
A <div id="main">
Main article
</div>
B <div id="links">
List of links
</div>
B <div id="news">
News and announcements
</div>
<div id="footer">
Copyright information
</div>
Because absolute positioning is not order-dependent, the main content div can appear in its pref-erable position first in the docu-ment source
Only the “links” and “news” div
elements are positioned in this layout
A�
B�
Trang 4The Style Sheet
#header {
background: #CCC;
}
#main {
}
C #links {
background: fuchsia;
}
C #news {
background: green;
}
E #footer {
padding: 15px;
background: #CCC;
}
Style Sheet Notes
The style sheet is essentially the same as that for the previous example, with
the exception that margins have been applied to both sides of the “main” and
“footer” div elements to make room for columns on both sides The
com-ments within the style sheet provide information on what key properties are
doing
The “links” and “news” divs are positioned against the left and right
edges of the browser window (technically, it’s the initial-containing block),
respectively
The width of the positioned columns is narrower than the margins on the
main content div to allow space between columns
The footer gets the same margin treatment as the main content column to
make sure the side columns do not overlap it
C�
D�
E�
Trang 5Three-column with rules and padding between columns Method: POSITIONED
Layout: FIXED
In this three-column layout, all three columns are absolutely positioned in a fixed layout In addition, borders and padding have been added between col-umns For reasons of simplicity, the footer has been omitted altogether in this example because there is no way to keep it at the bottom of the page without using JavaScript or jumping through some CSS hoops that are beyond the scope of this chapter The result is shown in Figure 16-14
Footer has been removed from this example Because all three blocks are positioned (and thus removed from the normal flow), there is no easy way to keep the footer at the bottom of the page.
Rules and padding have been added to this layout.
Figure 16-14 Three positioned columns in a fixed-width layout.
The Markup
A <div id="container">
<div id="header">
Masthead and headline
</div>
B <div id="main">
Main article
</div>
B <div id="links">
List of links
</div>
B <div id="news">
News and announcements
Trang 6Markup Notes
Because this is a fixed-width layout, all of the content has been wrapped
in a “container” div
All three content-containing div elements are absolutely positioned The
main content div can appear first in the source document
The Style Sheet
C #container {
#header {
background: #CCC; }
#main {
top: 100px;
border-left: solid 1px black;
border-right: solid 1px black;
padding: 0px 10px; /* 10 pixels padding left and right */
background-color: aqua; }
#links {
top: 100px;
padding: 0 8px; /* 8 px padding left and right */
background: fuchsia; }
#news {
top: 100px;
padding: 0 8px; /* 8 px padding left and right */
background: green; }
body {
font-family: verdana, sans-serif;
font-size: small;
margin: 0;
padding: 0; }
ul { padding: 0px; }
li {
list-style: none;
margin: 10px 0; }
A�
B�
Trang 7Style Sheet Notes
The “container” div has a fixed width (750 pixels) and its position is set
to relative to establish it as a containing block for the positioned column elements
All three content divs (“links,” “main,” and “news”) are absolutely posi-tioned below the header
The values for left (that is, the distance from the left edge of the con-taining block area) are relative to the left edge of the entire element box
(including margins) for each div, not just the content area
Whenever you add padding, margins, or borders to a fixed-width layout structure, you need to do some math to make sure the sum of the element widths plus all their extras does not exceed the total container width
In the example, the 750 pixel overall width is divided into two 150 pixel sidebars and a 450 pixel main column Although it may be tempting to set the width of each div to these values, unfortunately, that won’t work The width property applies only to the content area
Figure 16-15 breaks down all the measurements that span the width of the
“container” div You can easily match the values in the figure to the ones used in the preceding style sheet
8 + 134 + 8
8 + 134 + 8 1+10 + 428 + 10+1
750px
Figure 16-15 Calculating widths, margins, borders, and padding.
WARNING
If you need to support Internet Explorer 5 and 5.5 for Windows, your work isn’t fin-ished IE5 incorrectly implements the box model and applies the width property to the outer edges of the element A workaround for providing a different set of width properties just for IE5/5.5(Win) is provided in Chapter 14, Thinking Inside the Box With the release of IE7, many developers have chosen to stop supporting IE5, but of course, whether you choose to support it or not depends on the nature of your site and your own server statistics.
C�
D�
E�
F�
Trang 8Now you should be ready to take on an absolutely positioned
layout In this exercise, we’ll use the same content to create
a two-column, elastic layout (Figure 16-16) using absolute
positioning.
Open olympus.html and save it as a new document named
elastic-olympus.html.
Delete the copyright information paragraph at the end of
the document This layout does not include a footer.
Next, add the necessary markup Once again, add a div
named “container” around everything, and divide the
content into three divs: “header,” “main,” and “extras.”
In the style sheet, set up the page by giving the “container”
div a width and setting its position to relative to establish
a containing block for the positioned columns Because
this is an elastic layout, the width should be specified in
em units We’ll use a conservative 40em so that the layout
can be resized larger a few intervals before running off the
typical 1024-pixel wide monitor.
#container {
width: 40em;
position: relative;
}
Give the header a height (also in em units), padding, and
a background color as we’ve been doing throughout this
chapter.
#header {
height: 4em;
padding: 1em;
background-color: #CCC;
}
Now we can position the “extras” div Add this rule to your
style sheet to position the sidebar box below the header
and give it a width of 10em with 1 em of padding on the
left side.
#extras {
width: 10em;
position: absolute;
top: 6em;
left: 0;
padding-left: 1em;
}
Finally, make room for the positioned sidebar by adding a
margin on the left edge of the “main” content div I’ve added
an 12em margin to make room for the 11em-wide sidebar
plus 1em space between columns.
#main {
margin-left: 12em;
}
1.
2.
3.
4.
5.
6.
7.
Save the file and open it in a browser It should look like the layout shown in Figure 16-16 Try using the text zoom feature on your browser to make the text larger and smaller and see the elastic layout at work
The page width expands when text is sized larger.
Figure 16-16. Two-column, elastic layout.
8.
exercise 16-2 | Elastic layout with positioned column
Trang 9Centering a Fixed-Width Page
All of the fixed-width examples we’ve seen so far have been aligned on the left side of the browser window with empty space to the right of it Although you see plenty of left-aligned pages, many designers choose
to center their fixed-width pages in the browser window to split up that potentially awkward left-over space
This section looks at two methods for centering a fixed-width page: the official CSS way and an effective creative solution that works in all CSS-compliant browsers (even Netscape 4) We’ll use these methods to cen-ter the fixed-width three-column page we made earlier (Figure 16-17)
Figure 16-17 Centering a fixed-width
page element.
Figure 16-17 Centering a fixed-width
page element.
Adding color to columns is an effective way to further
emphasize the division of information and bring a little color
to the page I have added background colors to the column
elements in some of the template demonstrations, but as you
have seen, the color stops at the end of the element box and
does not extend to the bottom of the page This is not the
effect I am after.
Unfortunately, there is no supported way of setting the height
of an element to 100% of the page height, and while there are
CSS layout templates and JavaScript workarounds that produce
full-height column elements, they are beyond the scope of this
chapter.
But don’t fret There is a reliable solution known as the “faux
columns” trick that will work with any of the fixed-width
templates in this chapter In this technique, column colors are
added using a tiling image in the background of the page
or containing element (such as the “container” div in the
examples).The Faux Columns method was first introduced by
Dan Cederholm in his article for A List Apart, and in his book,
Web Standards Solutions.
Here’s how it works The column shading in Figure 16-17 is the
result of a horizontal image with bands of color that match the
width of the columns When the image is set to tile vertically
in the background, the result is vertical stripes over which a
multicolumn layout may be positioned Of course, this only
works when the width of the column or page is set in a specific
pixel measurement.
You may recognize the layout in Figure 16-18 It is the layout
we created in Exercise 16-1 If you’d like to give this a try, I’ve
document 2col-olympus.html, then open the HTML file and add
the image to the background of the container div like so:
#container { width: 750px;
border: solid 1px;
background-image: url(2col_bkgd.gif);
background-repeat: repeat-y;
}
2col_bkgd.gif
Top-to-Bottom Column Backgrounds
Trang 10In CSS, the proper way to center a fixed-width element is to specify a width
for the div element that holds all the page’s contents, then set the left and
right margins to auto According to the CSS visual formatting model, this will
have the net effect of centering the element in the initial containing block
#container {
position: relative;
width: 750px;
margin-right: auto;
margin-left: auto;
}
This method works for all current standards-compliant browsers,
includ-ing Internet Explorer 6 when it is in “compliance” mode (see Chapter 10,
Understanding the Standards, about triggering compliance mode) It will not
work in IE 6 in “quirks” mode or any earlier version
An alternative method uses negative margins to effectively center a
contain-ing block on the page for all browsers that support basic absolute
position-ing (includposition-ing Netscape 4) First, the “container” (the name of the div in the
examples) is absolutely positioned so its left edge is 50% across the width
of the browser window Then, a negative left margin is applied that pulls the
page back to the left by half its width, thus aligning the mid-point of the
block with the mid-point of the window And voila, it’s centered
#container {
position: absolute;
left: 50%;
width: 750px;
}
Exercise 16-3 lets you apply these methods to the pages you created in the
previous two exercises
CSS Layouts in Review
Using these templates as starting points, you should be able to create a wide
variety of page types: liquid, fixed, or elastic; two- or three-column (or more)
Whether you choose to do a float-based or positioned layout may depend on
the order of your source document and whether you need elements to appear
at the bottom of the page
Again, there are many more options for creating page layouts as listed in the
More Layout Templates and Tutorials sidebar earlier in the chapter Be sure to
test your layouts in several browsers, because floats and positioning can cause
some browser hiccups (see the Browser Bugs sidebar in Chapter 15)
exercise 16-3 | Centering layouts
In this exercise, you can center the elastic layout you created in Exercise 16-2 We’ll use the proper CSS method that works in all standards compliant browsers (the DOCTYPE
at the beginning of the document will ensure IE6-Win switches into Standards Mode and plays along).
Open the document elastic-olympus.html that you just
created
To center the whole page, simply set the left and right margins to
auto, and there you’re done
Save the file and open it in a browser to see the centered page.
#container { width: 40em;
position: relative;
margin-left: auto;
margin-right: auto;
}
If you have time and interest, you can try centering the layout in
Exercise 16-1 (2col-olympus.html)
using the second method listed above.
1.
2.
exercise 16-3 | Centering layouts
In this exercise, you can center the elastic layout you created in Exercise 16-2 We’ll use the proper CSS method that works in all standards compliant browsers (the DOCTYPE
at the beginning of the document will ensure IE6-Win switches into Standards Mode and plays along).
Open the document elastic-olympus.html that you just
created
To center the whole page, simply set the left and right margins to
auto, and there you’re done
Save the file and open it in a browser to see the centered page.
#container { width: 40em;
position: relative;
margin-left: auto;
margin-right: auto;
}
If you have time and interest, you can try centering the layout in
Exercise 16-1 (2col-olympus.html)
using the second method listed above.
1.
2.
Note
The negative-margin method is taken from The Zen of CSS Design by Dave Shea and Molly Holzschlag (Peachpit Press) It was originally used by Jon Hicks in his Zen Garden submission It
is also useful for centering an element vertically in the browser window by applying a top offset and setting a nega-tive top margin.
Note
The negative-margin method is taken from The Zen of CSS Design by Dave Shea and Molly Holzschlag (Peachpit Press) It was originally used by Jon Hicks in his Zen Garden submission It
is also useful for centering an element vertically in the browser window by applying a top offset and setting a nega-tive top margin.