The significant difference is that the offset values for fixed elements are always relative to the browser window or other viewport, which means the posi-tioned element stays put even wh
Trang 1Absolute Positioning
Stacking order
Before we close the book on absolute positioning, there is one last related concept that I need to introduce As we’ve seen, absolutely positioned ele-ments overlap other eleele-ments, so it follows that multiple positioned eleele-ments have the potential to stack up on one another
By default, elements stack up in the order in which they appear in the document, but you can change the stacking order with the z-index property Picture the z-axis as a line that runs perpendicular to the page, as though from the tip of your nose, through this page, and out the other side
z-index
Values: (number) | auto | inherit
Default: auto
Applies to: positioned elements
Inherits: no
The value of the z-index property is a number (positive or negative) The
higher the number, the higher the element will appear in the stack Lower numbers and negative values move the element lower in the stack Let’s look
at an example to make this clear (Figure 15-19)
Here are three paragraph elements, each containing a letter image (A, B, and
C, respectively) that have been positioned in a way that they overlap on the page By default, paragraph “C” would appear on top because it appears last
in the source However, by assigning higher z-index values to paragraphs “A” and “B,” we can force them to stack in our preferred order
Note that the values of z-index do not need to be sequential, and they do not relate to anything in particular All that matters is that higher number values position the element higher in the stack
The markup:
<p id="A"><img src="A.gif" alt="A" /></p>
<p id="B"><img src="B.gif" alt="B" /></p>
<p id="C"><img src="C.gif" alt="C" /></p>
The style sheet:
#A {
z-index: 10;
position: absolute;
top: 200px;
left: 200px;
}
#B {
z-index: 5;
position: absolute;
top: 225px;
left: 175px;
}
Trang 2Fixed Positioning
#C {
z-index: 1;
position: absolute;
top: 250px;
left: 225px;
}
You can change the stacking order with the
z-index property Higher values stack on top of lower values.
By default, elements later in the document
stack on top of preceding elements.
z-index: 10
z-index: 5
z-index: 1
Figure 15-19. Changing the stacking order with the z-index property.
To be honest, the z-index property is not often required for most page
lay-outs, but you should know it’s there if you need it If you want to guarantee
that a positioned element always ends up on top, just assign it a very high
z-index value, such as:
img#essential {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
}
Fixed Positioning
We’ve covered relative and absolute positioning, now it’s time to take on the
remaining method: fixed positioning
For the most part, fixed positioning works just like absolute positioning The
significant difference is that the offset values for fixed elements are always
relative to the browser window (or other viewport), which means the
posi-tioned element stays put even when the rest of the page scrolls By contrast,
you may remember that when you scrolled the JenWARE page in Exercise
15-2, the award graphic scrolled along with the document—even though it was
positioned relative to the initial containing block (equivalent to the browser
window) Not so with fixed positioning where the position is, well, fixed.
WARNING
Unfortunately, fixed positioning is not
supported in IE for Windows, versions
6 and earler It is, however, supported
in IE7 in Standards mode, so it will be
a more reliable positioning method as older IEWin versions fade away.
WARNING
Unfortunately, fixed positioning is not
supported in IE for Windows, versions
6 and earler It is, however, supported
in IE7 in Standards mode, so it will be
a more reliable positioning method as older IEWin versions fade away.
Trang 3Fixed Positioning
Now you’ve been introduced to all the tools of the trade for CSS-based lay-out: floating and three types of positioning (relative, absolute, and fixed) You should have a good feel for how they work for when we start putting them to use in the various design approaches and templates in Chapter 16
exercise 15-3 | Fixed positioning
This should be simple Open jenville.html (or jenville_2.html) and edit the style rule
for the award div to make it fixed rather than absolute.
#award { position: fixed;
top: 35px;
left: 25px;
} Save the document and open it in a browser (Windows users, you’ll need to download Firefox or another non-Internet Explorer 6 browser to play along) At first look, it should appear the same as in Exercsise 15-2 However, when you scroll the page, you will see that the award now stays put where we positioned it in the browser window ( Figure 15-20 ).
Figure 15-20 The award graphic stays in the same place in the top-left corner of the browser window when the document scrolls.
Trang 4Test Yourself Test Yourself
Before we move on, take a moment to see how well you absorbed the
prin-ciples in this chapter
Which of the following is not true of floated elements?
All floated elements behave as block elements
Floats are positioned against the padding edge (just inside the
bor-der) of the containing element
Inline elements flow around a float, but the element box is
unchanged
You must provide a width property for floated block elements
Which of these style rules is incorrect? Why?
img { float: left; margin: 20px;}
img { float: right: width: 120px; height: 80px; }
img { float: right; right: 30px; }
img { float: left; margin-bottom: 2em; }
How do you make sure a “footer” div starts below a floated sidebar?
Write the name of the positioning method or methods (static, relative,
absolute, or fixed) that best matches each of the following descriptions
Positions the element relative to a containing block
Removes the element from the normal flow
Positions the element relative to the viewport
The positioned element may overlap other content
1
a
b
c
d
2
a
b
c
d
3
4
a
b
c
d
Trang 5Review: Basic Layout Properties
The space the element would have occupied in the normal flow is preserved
The space the element would have occupied in the normal flow is closed up
You can change the stacking order with z-index
Positions the element relative to its original position in the normal flow
Calculate the width of the “sidebar” div element box based on this style rule
div#sidebar { width: 200px;
margin: 25px;
padding-left: 30px;
padding-right: 10px;
border: 1px solid #FFF;
}
Extra credit: What width would you have to provide for Internet Explorer
5 and 5.5 (Windows) to compensate for its box model problem?
Review: Basic Layout Properties
Here is a summary of the properties covered in this chapter, in alphabetical order
float Moves the element to the right or left and allows the following
text to flow around it.
clear Prevents an element from being laid out next to a float.
position Specifies the positioning method to be applied to the element
top, bottom, right, left
Specifies the offset amount from each respective edge.
z-index Specifies the order of appearance within a stack of overlapping
positioned elements.
f
g
h
i
5
Trang 6IN THIS CHAPTER
Fixed, liquid, and elastic
page layouts Two- and three-column layout templates using
floats Two- and three-column layout templates using absolute positioning
Centering a fixed-width page
Now that you understand the principles of moving elements around on the
page using CSS floats and positioning, we can put these tools to use in some
standard page layouts This chapter looks at the various approaches to
CSS-based web design and provides some simple templates that will get you on
your way to building basic two- and three-column web pages
Before we get started, it must be said that there are seemingly endless
varia-tions on creating multicolumn layouts with CSS This chapter is intended to
be a “starter kit.” The templates presented here are simplified and may not
work for every situation (although I’ve tried to point out the relevant
short-comings of each) You may know of better approaches In fact, because there
is so much to be said about CSS page layout, I’ve provided pointers to
addi-tional samples and tutorials on the Web New techniques turn up regularly
Page Layout Strategies
Way back in Chapter 3, The Nature of Web Design, we established the fact
that there is no way of knowing exactly how wide, skinny, tall, or short a
user’s browser window will be Users may set their browsers to fill the
moni-tor at one of the standard resolutions or have them set to some other
com-fortable dimension The precise size of any given web page is an unknown
In addition, there is no way of knowing how large your text will be You may
prefer small tidy text, but a portion of your users will make their text larger,
possibly much larger, to make it comfortable to read Changing text size is
likely to have an impact on the layout of your page
Over time, three general page layout approaches have emerged to deal with
these inescapable facts Liquid pages resize along with the browser window
Fixed pages put the content in a page area that stays a specific pixel width
regardless of the browser’s dimensions Finally, elastic pages have areas that
PAGE LAYOUT
WITH CSS
Trang 7Page Layout Strategies
Liquid page design
Liquid page layouts (also called fluid layouts) follow the default behavior of the normal flow In other words, the page area and/or columns within the page are allowed to get wider or narrower to fill the available space in the browser window There is no attempt to control the width of the content or line breaks—the text is permitted to reflow as required Figure 16-1 shows
W3.org, which is a good example of a liquid layout
Liquid layouts fill the browser window.
Content reflows when the browser window and columns resize. www.w3.org
Figure 16-1 Example of a liquid layout.
Proponents of liquid web pages feel strongly that this is the best formatting method because it is consistent with the nature of the medium Of course, it has both advantages and disadvantages
You don’t have to design for a specific monitor resolution.
You avoid potentially awkward empty space because the text fills the window.
Liquid pages keep with the spirit and nature of the medium.
On large monitors, line lengths can get very long and uncomfortable to read See the sidebar for more information They are less predictable Elements may
be too spread out or too cramped at extreme browser dimensions.
How to create liquid layouts
Create a liquid layout by specifying widths in percentage values You can also not specify a width at all, in which case the width will be set to the default
auto setting, and the element will fill the available width of the window or
other containing element Here are a few examples
In this two-column layout (Figure 16-2), the width of each div has been
specified as a percentage of the available page width The main column will always be 70% of the width of the window, and the right column fills 25% (the remaining 5% is used for the margin between the columns), regardless
of the window size
Optimal Line
Length
Line length is a measure of the
number of words or characters in
a line of text The rule of thumb is
that the optimal line length is 10
to 12 words or between 60 and 75
characters
When line lengths grow too long,
the text becomes more difficult to
read Not only is it hard to focus long
enough to get to the end of a long
line, it is also requires extra effort to
find the beginning of the next line
again.
Line length is at the heart of the
debate over which layout technique
is superior In liquid layouts, line
lengths might get too long when
the browser is sized very wide In
fixed width designs, line lengths
may become awkwardly short if
the text is sized large within narrow
and rigid column widths The elastic
layout introduced later in this
chapter, however, offers predictable
line lengths even when the text is
sized larger This makes it a popular
option for balancing design and
accessibility priorities.
Optimal Line
Length
Line length is a measure of the
number of words or characters in
a line of text The rule of thumb is
that the optimal line length is 10
to 12 words or between 60 and 75
characters
When line lengths grow too long,
the text becomes more difficult to
read Not only is it hard to focus long
enough to get to the end of a long
line, it is also requires extra effort to
find the beginning of the next line
again.
Line length is at the heart of the
debate over which layout technique
is superior In liquid layouts, line
lengths might get too long when
the browser is sized very wide In
fixed width designs, line lengths
may become awkwardly short if
the text is sized large within narrow
and rigid column widths The elastic
layout introduced later in this
chapter, however, offers predictable
line lengths even when the text is
sized larger This makes it a popular
option for balancing design and
accessibility priorities.
Create a liquid layout
by specifying widths in
percentages or not at all.
Create a liquid layout
by specifying widths in
percentages or not at all.
Trang 8Page Layout Strategies
div#main { width: 70%;
margin-right: 5%;
float: left;
background: yellow;
} div#extras { width: 25%;
float: left;
background: orange;
}
25%
70%
Figure 16-2. Liquid layout using percentage values.
In the example in Figure 16-3, the secondary column on the left is set to a
specific pixel width, and the main content area is set to auto and fills the
remaining space in the window (I could have also left it unspecified for the
same result) Although this layout uses a fixed width for one column, it is still
considered liquid because the width of the page is based on the width of the
browser window
div#main { width: auto;
position: absolute;
top: 0;
left: 225px;
background: yellow; } div#extras {
width: 200px;
position: absolute;
top: 0;
left: 0;
background: orange; }
25px
25px
Figure 16-3. Liquid layout combining fixed-width and auto sized columns.
Dealing with line lengths
Although long line lengths are possible in liquid layouts, it’s certainly a
Trang 9man-Fixed Layouts
columns, you’re in luck, because it will be difficult for the line lengths to get too out of hand at these “reasonable” browser widths Sure, line lengths will change when the browser is resized, and they may not be in the ideal range of
55 to 72 characters per line, but text is unlikely to be unreadable
If your page consists of only one column, I suggest using left and right mar-gins (in the 10 to 20% range, depending on preference) to reduce the resulting line length and also add valuable white space around the text
Finally, you can use the max-width property to limit the width of the content containers Unfortunately, it is not supported by Internet Explorer (Windows)
6 and earlier, but those versions will eventually fall out of significant use
Fixed Layouts
Fixed-width layouts, as the name implies, stay put at a specified pixel width
as determined by the designer This approach is based on traditional guiding principles of graphic design, such as a constant grid, the relationship of page elements, and comfortable line lengths When you set your page to a specific width, you need to decide a couple of things
First, you need to pick a page width, usually based on common monitor reso-lutions Most fixed-width web pages as of this writing are designed to fit in an
800 × 600 pixel browser window, although more and more sites are venturing into a (roughly) 1000 pixel page width
You also need to decide where the fixed-width layout should be positioned in the browser window By default, it stays on the left edge of the browser, with the extra space to the right of it Some designers opt to center the page, split-ting the extra space over left and right margins, which may make the page look as though it better fills the browser window Figure 16-4 shows two fixed width layouts Both use fixed-width pages, but position the content differently
in the browser window
750px 200px
25px
525px
750px 200px
25px
525px
Extra space on right
#wrapper { width: 750px;
position: absolute; margin-left: auto;
margin-right: auto; border: 1px solid black; padding: 0px;}
#extras {position: absolute; top: 0px;
left: 0px;
width: 200px;
background: orange; }
#main { margin-left: 225px;
background-color: yellow;}
Extra space split on left and right sides
Trang 10Fixed Layouts
One of the main concerns with using fixed-width layouts is that if the user’s
browser window is not as wide as the page, the content on the right edge of
the page will not be visible Although it is possible to scroll horizontally, it may
not always be clear that there is more content there in the first place
Take a look at O’Reilly Media’s web site (www.oreilly.com) in Figure 16-5 The
page was designed to fill a browser window maximized to a 1024 × 768
moni-tor Given the nature of the content and the audience it is intended for, it is a
completely appropriate design decision However, the figure on the right shows
what a user with an 800 × 600 monitor would see The entire right column
is hidden Fortunately, O’Reilly uses the right column for interesting, yet
non-critical information, so even if it is overlooked, there is no serious harm done
Figure 16-5. Users may miss out on content on the right edge of a fixed layout if the
browser is not as wide as the page area.
Let’s review the pros and cons of using the fixed-width strategy
The layout is predictable.
It offers better control over line length.
Trends come and go; however, it is worth noting that many of
the most well-known web designers use fixed-width designs
as of this writing.
Content on the right edge will be hidden if the browser window is smaller than the page
Text elements still reflow if the user resizes the font size, so it doesn’t guarantee the layout will stay exactly the same.
Line lengths may grow awkwardly short at very large text sizes.
How to create fixed-width layouts
Fixed-width layouts are created by specifying width values in pixel units
Typically, the content of the entire page is put into a div (often named
“con-tent,” “container,” “wrapper,” or “page”) that can then be set to a specific
pixel width This div may also be centered in the browser window Widths of
column elements, and even margins and padding, are also specified in pixels
Fixed-width layouts are created by specifying width values in pixel units.
Fixed-width layouts are created by specifying width values in pixel units.