This page shows the features of CSS that can be used for layout, with examples.
CSS can emulate the “<table>” tag. So, traditional layout using the table tag can be done with pure CSS. See: CSS Table (Tableless Table).
The “float” attribute can be use to flow items from left to right, or embed a image so that text flows around it. Examples:
CSS has a “position” attribute that can be used to position elements, as well make elements into a separate layer with overlapping effects, such as in drop-down menus.
For detail, see: CSS Position: static, relative, fixed, absolute.
A element can be hidden from view with “visibility:hidden”, or its normal value “visible”. When a tag has “visibility:hidden”, it is not shown, however, it still occupies the same space.
To hide a element and also take out its space, like it doesn't exist, use “display:none”.
These are useful in advanced situations, especially when used together with PHP and or JavaScript. For example, for implementing pure horizontal menus, collapsible lists (like Windows folder tree), tabbed menu interface, etc.
The layout can be used to implement graphical progress bar. Example: Progress Bar Example with CSS.
blog comments powered by Disqus