What is CSS-P?
| Absolute positioning of HTML elements on a Web page is just one of the main applications of Cascading Style Sheets. In fact, it is the recommended way of positioning objects on the page. |
How does it work?
- It's very easy. The trick is to master CSS.
- You define a style sheet
- Assign it to a class, e.g.
.myMsgPosition {position: absolute; top: 0;
left: 30; visibility: visible; z-index: 1;
font-size: 96px; color...}
- Apply it to an HTML element, e.g.
<DIV ID="myMsg" CLASS="myMsgPosition">
Enjoy Camp'98 </DIV>
- The visibility
property specifies whether an element is hidden or visible.
The z-index controls the layering (3D layout) of the element.
Higher z-indexed elements appear on top.
- Furthermore, scripting
languages, like JavaScript, have access to every property of a CSS style
(via the DOM) and thus can be used to further control or change (animate)
the positions
of HTML elements and objects.
For example:
<DIV ID="myMsg" CLASS="myMsgPos">Hello</DIV>
document.myMsg.top = (from += 10); // -- Nestcape
document.all.myMsg.style.top = (from += 10); // -- MSIE
document.myMsg.color = "lime"; // -- Nestcape
document.all.myMsg.style.color = "lime"; // -- MSIE
- A JavaScript function
that uses setTimeout() can be used to animate and put HTML elements
on a timeline.
- Animation and other
effects can also be programmed by capturing DOM (JavaScript) events,
like "onMouseOver" or onMouseOut".
- A more elaborate CCS-P example: display and code