[ Pobierz całość w formacie PDF ]

following frame layout:
100%
header
15%
s
i
d
e
b
a
r
10em
main
"the rest"
footer
100px
This might be achieved with the following HTML document and style rules:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEA frame document with CSS 2.1/TITLE
STYLE type="text/css"
BODY { height: 8.5in } /* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
119
2 Aug 2002 21:33
Visual formatting model
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
/STYLE
/HEAD
BODY
DIV id="header" ... /DIV
DIV id="sidebar" ... /DIV
DIV id="main" ... /DIV
DIV id="footer" ... /DIV
/BODY
/HTML
9.7 Relationships between ’display’, ’position’, and
’float’
The three properties that affect box generation and layout -- ’display’, ’position’, and
’float’ -- interact as follows:
1. If ’display’ has the value ’none’, then ’position’ and ’float’ do not apply. In this
case, the element generates no box.
2. Otherwise, if ’position’ has the value ’absolute’ or ’fixed’, the box is absolutely
positioned, the computed value of ’float’ is ’none’, and display is set according to
this table:
2 Aug 2002 21:33
120
Visual formatting model
Specified value
inline-table
inline, run-in, table-row-group, table-column,
table-column-group, table-header-group, table-footer-group,
table-row, table-cell, table-caption, inline-block
others
Computed
value
table
block
same as
specified
The position of the box will be determined by the ’top’, ’right’, ’bottom’ and
’left’ properties and the box’s containing block.
3. Otherwise, if ’float’ has a value other than ’none’, the box is floated and ’display’
is set according to this table:
Computed
value
table
block
same as
specified
Specified value
inline-table
inline, run-in, table-row-group, table-column,
table-column-group, table-header-group, table-footer-group,
table-row, table-cell, table-caption, inline-block
others
4. Otherwise, the remaining ’display’ property values apply as specified.
9.8 Comparison of normal flow, floats, and absolute
positioning
To illustrate the differences between normal flow, relative positioning, floats, and
absolute positioning, we provide a series of examples based on the following HTML
fragment:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEComparison of positioning schemes/TITLE
/HEAD
BODY
PBeginning of body contents.
SPAN id="outer" Start of outer contents.
SPAN id="inner" Inner contents./SPAN
End of outer contents./SPAN
121
2 Aug 2002 21:33
Visual formatting model
End of body contents.
/P
/BODY
/HTML
In this document, we assume the following rules:
body { display: block; line-height: 200%;
width: 400px; height: 400px }
p { display: block }
span { display: inline }
The final positions of boxes generated by the outer and inner elements vary in
each example. In each illustration, the numbers to the left of the illustration indicate
the normal flow [p. 108] position of the double-spaced (for clarity) lines. (Note: the
illustrations use different horizontal and vertical scales.)
9.8.1 Normal flow
Consider the following CSS declarations for outer and inner that don’t alter the
normal flow [p. 108] of boxes:
#outer { color: red }
#inner { color: blue }
The P element contains all inline content: anonymous inline text [p. 103] and two
SPAN elements. Therefore, all of the content will be laid out in an inline formatting
context, within a containing block established by the P element, producing some-
thing like:
2 Aug 2002 21:33
122
1
24 px
2
3
4
5
6
7
8
(0, 400)
(0,0)
Visual formatting model
Document Window
Beginning of body contents. Start
of outer contents. Inner contents.
End of body
contents.
(400, 0)
(400, 400)
9.8.2 Relative positioning
To see the effect of relative positioning [p. 111] , we specify:
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
Text flows normally up to the outer element. The outer text is then flowed into its
normal flow position and dimensions at the end of line 1. Then, the inline boxes
containing the text (distributed over three lines) are shifted as a unit by ’-12px’
(upwards). [ Pobierz całość w formacie PDF ]