| 
|
CSS
Style Sheet Positioning Elements |
CSS Style Sheets for positioning elements in web pages
Normally when using HTML you have little control over the positioning
of elements. The language is 'streaming' - the page is built up as data
arrives at the browser. Now CSS1 enables you to define the position
of web objects on the screen by using a style sheet.
Positioning of objects can be 'relative' or 'absolute':
* Absolute positioning specifies the location of the object in relation
to its' parent container, for example in relation to the document or
an area defined by the <DIV> tag.
* Relative positioning specifies the location of the object in relation
to its' normal position.
An objects' location is specified using the 'top' and 'left' properties.
For example a CSS style sheet rule could specify:
#location {position: absolute; top: 100; left: 50}
The use of this code is illustrated in the following page definition:
<BODY>
<P>This screen illustrates the positioning of an object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<IMG ID=location SRC=staff.gif>
</BODY>
</HTML>
Defining the Size of an Element
The size of an element can be suggested using the 'width' and 'height'
properties:
#object {position: absolute; top: 100; left: 50; width: 100; height:
200}
These values can be expressed as absolute values (pixels) or percentages.
The actual width and height will be less if the content of the object
does not fill the area specified, and more if not enough space is allocated.
Overlapping Objects
Multiple objects can be overlapped by specifying their locations individually
in a style sheet. The following rules illustrate how an image can be
overlapped by other images. If the three rules are entered in a CSS
Style Sheet:
#location1 {position: absolute; top: 50; left: 100}
#location2 {position: absolute; top: 100; left: 150}
#location3 {position: absolute; top: 150; left: 200}
the web page might be:
<BODY>
<P>This screen illustrates the positioning of an object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<P>This image has been given a transparent background. Note that
the text can be seen through the background, running right up to the
object.</P>
<IMG ID=location1 SRC=staff.gif>
<IMG ID=location2 SRC=staff.gif>
<IMG ID=location3 SRC=staff.gif>
</BODY>
</HTML>
In this case the images will overlap.
