Why do my graphics move in Frontpage when I preview it?


Ad

Advertisements

E

E. T. Culling

Sorry, that was a bit abrupt ... harsh ... but ...
the source for learning how to use it correctly is? I'd love to read a good
tutorial.
Eleanor
 
M

Murray

http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html

This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind....

Position:absolute
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the­ page so that
it can no longer influence the size or position of any other pa­ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA­RENT *positioned*
element - in the absence of any explicitly positioned parent, this will
default to the <body> tag, which is always positioned ­at 0,0 in the browser
viewport.

This means that it doesn't matter where in the HTML code the laye­r's code
appears (between <body> and </body>), its location on the screen will not
change. Furthe­rmore, the
space in which this element would have appeared were it not positi­oned is
not
preserved on the screen. In other words, absolutely positioned elements
don't take up any space on the page. In fact, they FLOAT over the page.

Position:relative
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t­he flow of the
code on the page, so it will use the spot where it would have­ appeared
based
on its position in the code as its zero point reference. If­ you then
supply top, right, bottom, or left positions to the style for this ­element,
those
values will be used as offsets from its zero point.

This means that it DOES matter where in the code the relativ­ely positioned
element appears, as it will be positioned in that location (­factoring in
the offsets) on the screen. Furthermore, the space where this e­lement
would
have appeared is preserved in the display, and can therefore­ affect the
placement of succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with ­the flow". An
element with a static position cannot have values for offset­s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page c­ontent scrolls.
Support for this in elements other than page backgrounds is ­quirky

There are two other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).

You can see a good example of the essential difference between absolute and
relative positioning here -

http://www.great-web-sights.com/g_layersdemo.asp
 
E

E. T. Culling

This is a wonderful resource ... thank you. Too often when questions have
arisen about absolute positioning the only response has been that when done
correctly it works ... with no hint at how to do it correctly. So this
information is really worthwhile. (I've just printed out your answer.)
Eleanor
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top