Positioning

H

hughtaylor

I'm using FP 2000 and having problems positioning simple items like text
boxes and small pictures. I've tried absolute positioning which allows me to
position everything exactly as I want it in page view, but in preview or as a
saved html file all the elements are all over the place.

There must be a simple way to position elements - not just left, center, or
right justified, and not just on seperate lines or rows going down, that
stays consistent in preview view and published in browsers - that can also be
resized and have everything stay in it's place.

Can you help? Thanks
 
M

Murray

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 of positioning (with regard to
placement of elements on the page only)....

Position:absolute (or A/P elements)
-----------------------
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 (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). 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 (or R/P elements)
----------------------
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 (this is true for any placement in the code).
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 several 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%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.

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

You can see a good demonstration of why using layers for a page layout tool
is dangerous here -

http://www.great-web-sights.com/g_layer-overlap.asp
 

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