Page 42 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

Of course, you probably don't want all your <H1> elements to appear in the same spot.
This is where in-line styles, ID selectors, and the <DIV> and <SPAN> elements come in
handy. For example, this code positions only the contents of this particular <DIV> element:

< D I V s t y l e = " p o s i t i o n : a b s o l u t e ; t o p : 2 0 0 p x ; l e f t : 2 0 0 p x ; w i d t h :
2 0 0 p x ; h e i g h t : 2 0 0 p x ; b a c k g r o u n d c o l o r : r e d " > T h i s i s t e x t i n a
r e d 2 0 0 b y 2 0 0 p i x e l b o x t h a t i s 2 0 0 p i x e l s f r o m t h e t o p a n d l e f t
e d g e s o f t h e w i n d o w . < / D I V >
Absolute positioning offsets elements from the edges of the browser window, while relative
positioning places elements into the flow of the document--that is, offsetting them from the
previous element in the HTML code. This lets you place objects in relation to each other
without having to specify exactly where on the page to draw each object.

In the following example, the first line of text flows normally across the page. The second
line, within a <SPAN> that uses the positioning styles outlined in the offset ID, is 50 pixels
below and 25 pixels to the right of the element above it. (The top and left properties leave
space above and to the left of the element to which their style is applied.)

< h t m l >
< h e a d >
< s t y l e t y p e = " t e x t / c s s " >
< ! - -
# o f f s e t { p o s i t i o n : r e l a t i v e ; t o p : 5 0 p x ; l e f t : 2 5 p x }
- - >
< / s t y l e >
< / h e a d >
< b o d y >
< p > T h i s i s a r e g u l a r l i n e . < / p >
< p i d = " o f f s e t " > T h i s t e x t i s o f f s e t f r o m t h e a b o v e l i n e --50 pixels
o n t o p a n d 2 5 p i x e l s o n t h e l e f t . < / p >
< / b o d y >
< / h t m l >

This text will flow normally across the page, while the next line of text will be offset from
the end of this line.

Here's the part you've been waiting for: 3D layering! Above, we explained how to set your
object's x and y coordinates, or its horizontal and vertical positioning. CSS positioning uses
the z-axis to layer objects on top of each other. Normally, if you position multiple elements

LoudOffice.com Guide to HTML – Part II Page 42