XHTML: CSS Layout - using Cascading Style Sheet language for positioning
This page introduces you to the use of CSS positioning for controlling layout.
XHTML CSS Layout code snippets listed by subject and organised in a tutorial style each building on the previous example. New topics are introduced when required.
1. |
Introducing absolute positioning: a simple two column layout. Creating two divisions with the <div> element and the 'id' selector. Absolute positioning the two divisions to create a simple two column layout. |
2. |
Further absolute positioning with two divisions: a simple two column layout. Applying a large left-hand margin to the right-hand division to allow space for the left-hand division producing a simple two column layout. |
3. |
Nesting parent and child divisions: a simple two column layout. The absolute positioning of the outer parent division creates a positioning reference for the inner child division and produces a simple two column layout. |
4. |
Further nesting of parent and child divisions: a simple centred (centered) two column layout. Floating two child divisions within a wrapping parent division to create a simple two column layout centred on the screen. |
5. |
Further nesting of parent and child divisions: a simple centred (centered) two column layout. The absolute positioning of two child divisions within a wrapping parent division creates a simple two column layout centred on the screen. Using relative positioning on the wrapping parent division creates a positioning reference for the child divisions. |
6. |
A three column layout with a header and a footer. Combining absolute positioning, float and nesting to create a robust template. |
7. |
A refined three column layout with a header and a footer. Nesting an inner wrapping division to snippet 6 above as a reference to force the three columns to be level across the top of the template. |
8. |
Creating layers with the z-index: stack order. Elements must be positioned with either 'position:absolute', 'position:relative' or 'position:fixed'. An element with a higher z-index appears in front of an element with a lower z-index. |
Build on the above with a selection of standard templates designed with XHTML and CSS. View template examples on XHTML: Templates page. |
|
| Suggest a code snippet to add to this category. | |
Back to top.
Copyright © 2006-2010 justfigures.co.uk
