Figures from Chapter 13
- New Material (2/April/2000) -- center-position.html --
An illustration of how to center-align absolutely postioned elements.
The element, of fixed width (150px) is center-aligned by setting
margin-left
and margin-right
to auto
, and the properties left
and right
to zero. For now (2 April 2000) this only works on Mozilla/
Navigator 6 -- Internet Explorer 5 gets auto
margin values wrong.
This link shows a screen capture of the document
as displayed by Mozilla/Navigator 6.
- Figure 13.1 -- 1 An example of
absolute positioning relative to the browser window. Also illustrated
is the property Z-index.
- Figure 13.3 -- An example
document and style sheet illustrating the clip property. The second
paragraph (of class absolute2) uses this property to clip the display
area of the element, while the first paragraph is not clipped.
- Figure 13.5 -- An example document
and style sheet illustrating the overflow property. The second,
third and fourth paragraphs demonstrate the
values hidden, scroll and auto
- Figure 13.7 -- An example document
and style sheet illustrating relatively positioned elements. The first
paragraph (A) contains two relatively positioned em elements inside
a p--both elements in their normal (unmoved) positions. The second
paragraph (B) uses top and left properties to move
these elements
to new positions relative to their default locations.
- Figure 13.9 -- An example
document and style sheet illustrating an absolutely positioned
element em contained within another,
absolutely positioned element (a div).
- Figure 13.11 -- Document
illustrating z-index values for absolutely positioned elements
inside an absolutely positioned element.
- Figure 13.13 -- An example
document illustrating the use of the visibility property to hide
and reveal content. The em content will be hidden in the
second paragraph, while in the third paragraph the strong element
(inside the "hidden" em) will be visible due to the explicit
declaration visibility:visible attached to it by the
class attribute.
- Figure 13.15 -- An example
document that uses display:none to remove a ul sublist
(in (B) ) from the rendering process.