Re: AP element on centered content div

10/04/2008, 05h38

Thank you! That solved my problem.

By the way, when I said I didn't want to use relative positioning, I was
referring to the elements I wanted to position within the wrapper div; it
didn't cross my mind to use relative positioning for the wrapper div itself. I
should have been more clear.

10/04/2008, 11h42

> didn't cross my mind to use relative positioning for the wrapper div
> itself

It should have.

This may 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 page element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PARENT *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 layer'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). Furthermore, the space in
which
this element would have appeared were it not positioned 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 the 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 relatively 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 element 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 offsets (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 content 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

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"JimHawkins" <webforumsuser@macromedia.com> wrote in message
news:ftk5kt$o02$1@forums.macromedia.com...
> Thank you! That solved my problem.
>
> By the way, when I said I didn't want to use relative positioning, I was
> referring to the elements I wanted to position within the wrapper div; it
> didn't cross my mind to use relative positioning for the wrapper div
> itself. I
> should have been more clear.
>

11/04/2008, 05h00

I do know all about this stuff. However, because I only began learning about
web design a bit over a week ago, solutions to certain problems still don't
immediately occur to me. Give me another week or two.

Thanks for the though.

10/04/2008, 05h38	#1 (permalink)
JimHawkins Messages: n/a Hébergeur:	Re: AP element on centered content div Thank you! That solved my problem. By the way, when I said I didn't want to use relative positioning, I was referring to the elements I wanted to position within the wrapper div; it didn't cross my mind to use relative positioning for the wrapper div itself. I should have been more clear.

10/04/2008, 11h42	#2 (permalink)
Murray ACE Messages: n/a Hébergeur:	Re: AP element on centered content div > didn't cross my mind to use relative positioning for the wrapper div > itself It should have. This may 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 page element (except for those contained within it, of course). 2. The absolutely positioned element takes its position from the position of its closest PARENT 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 layer'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). Furthermore, the space in which this element would have appeared were it not positioned 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 the 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 relatively 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 element 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 offsets (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 content 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 -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "JimHawkins" <webforumsuser@macromedia.com> wrote in message news:ftk5kt$o02$1@forums.macromedia.com... > Thank you! That solved my problem. > > By the way, when I said I didn't want to use relative positioning, I was > referring to the elements I wanted to position within the wrapper div; it > didn't cross my mind to use relative positioning for the wrapper div > itself. I > should have been more clear. >

11/04/2008, 05h00	#3 (permalink)
JimHawkins Messages: n/a Hébergeur:	Re: AP element on centered content div I do know all about this stuff. However, because I only began learning about web design a bit over a week ago, solutions to certain problems still don't immediately occur to me. Give me another week or two. Thanks for the though.

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email