Only ONE type of HTML tag may be positioned: the DIV tag. This sounds very restrictive, but it's really not, because ANY type of HTML content may be placed WITHIN the DIV tag which we're positioning. Again, only the DIV tag itself will actually have CSS-P properties assigned to it.
Conversely, the positioned DIV tag will ONLY have CSS-P properties assigned to it; you won't be assigning regular text-formatting CSS properties to a DIV tag. Text-formatting properties will only be assigned to the P tag, the heading tags, etc, as usual.
The DIV tag was originally created to mark a section division within a larger HTML page, but it has been co-opted by CSS-P to mark positionable elements. As I mentioned earlier, you may put any sort of HTML content you like within a positioned DIV tag.
In the future, you will be able to cut out the middleman and assign CSS-P properties directly to ANY HTML tag, positioning that tag. As long as we are supporting Netscape 4.x browsers, however, you may ONLY assign CSS-P properties to DIV tags.
In the following example, we are going to use a DIV tag to position an IMG tag.
Example (abbreviated):
<div> <img src="./graphics/capitalA.gif" width="54" height="54" /> </div>
The DIV tag requires one attribute: ID. This ID will be set to a unique identifying name, and assigned appropriate CSS-P properties in EITHER a linked or embedded style sheet. Note: To ensure cross-browser compatibility, you MUST use an ID to assign CSS-P properties to a DIV tag; don't use inline styles, as these are not fully compatible cross-browser.
Tag: DIV
Attribute: ID
Value: any valid, unique name.
Example (abbreviated):
<div id="fred"> <img src="./graphics/capitalA.gif" width="54" height="54" /> </div>
In the linked or embedded style sheet, then, you would create the declaration for the fred ID of our example, and assign it essential CSS-P properties.
When using absolute positioning (the only type of positioning addressed in this tutorial), elements are positioned from THEIR upper-left-hand corner in relation to the upper-left-hand corner of the web page. If we wanted to position fred's upper-left-hand corner at 100,30 on the web page, we would need to set three CSS properties: position, left, and top. The position property will always be set to absolute. The left property represents the x-coordinate value, and the top property represents the y-coordinate value; these properties are ALWAYS set using pixel values.
Example (abbreviated):
#fred {
position:absolute;
left:100px;
top:30px;
}
Example (in context using an embedded style sheet):
<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
position:absolute;
left:100px;
top:30px;
}
//-->
</style>
</head>
<body>
<div id="fred">
<img src="./graphics/capitalA.gif" width="54" height="54" />
</div>
</body>
</html>
Here is the above example displayed.
In the above example, fred's upper-left-hand corner is positioned 100 pixels from the left, and 30 pixels from the top.
Again, there are a minimum of THREE essential CSS-P properties required to position an element: position, left, and top. The position property declares what sort of positioning we're talking about (there are several different types); the left property gives the x-coordinate (in pixels) for the positioned element; the top property gives the y-coordinate (in pixels) for the positioned element.
Property: position
Values: relative, absolute, fixed
Example: position:absolute;
Relative positioning is hard to control, imperfectly implemented, and rarely used; see "Cascading Style Sheets: The Definitive Guide" by Eric Meyer for more information. You won't be dealing with it in this tutorial.
Fixed positioning removes an element from the flow of HTML code and "fixes" that element in the web browser window so that other elements on an HTML page scroll up and down while the "fixed" element remains stationary, stuck in place. Fixed positioning is only implemented in the 5 and 6 browsers; as long as we are supporting the 4 browsers, we may not use fixed positioning.
Absolute positioning is the most commonly used type of positioning, and the sole type of positioning addressed in this tutorial. An absolutely positioned element is removed from the regular flow of HTML code and positioned in relation to the upper-left-hand corner of the web page. In this tutorial (and in CSS-P for most purposes), the position property will ALWAYS be set to absolute.
Property: left
Values: integer-based pixel values (i.e. 10px, 172px, 59px, etc)
Description: sets the x-coordinate for the positioned element, in pixels.
Example: left:10px;
Property: top
Values: integer-based pixel values (i.e. 10px, 172px, 59px, etc)
Description: sets the y-coordinate for positioned element, in pixels.
Example: top:25px;
ALWAYS define left and top properties using integer pixel-based values.
Again, position, left, and top properties are all REQUIRED when using CSS-P.
You may define as many positioned DIV tags on an HTML page as you wish, each with its own unique ID and CSS ID declaration.
Note: Early versions of Netscape 4 begin to misbehave after 40+ sibling positioned elements; later versions of Netscape 4.x and other browsers can handle larger numbers of sibling elements.
Obviously, you may position more than just images in this manner; you may position ANYTHING.
In the following example, I have positioned a simple table.
Example (abbreviated):
<div id="fred"> <table width="200" border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </div>
Example (in context using an embedded style sheet):
<html>
<head>
<title>Example CSS-P Page</title>
<style type="text/css">
<!--
#fred {
position:absolute;
left:100px;
top:30px;
}
//-->
</style>
</head>
<body>
<div id="fred" border="1">
<table width="200">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</body>
</html>
Here is the above example displayed.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.