AP a Div inside a centered DIV

#1 (**permalink**) 03-03-2008, 04:14 PM

I've never got this understood. I have a Container DIV, set to auto center. I'm
using one of the presets that DW8 gives you. I need put a small DIV in the
upper right corner, that stays in the exact spot even when browsers are
widened...let me re-phrase. I want the little DIV to be Absolutely Positioned,
but using the XY coordinates of my main, centered container.

I made a DIV, called it Absolute, moved it where I want it, and of course it
stays put when I widen the browser window. It is using the whole browser window
for the XY coordinates. That's fine, and I understand it's supposed to work
that way.

But, I also thought that if you put a DIV inside another, it will use the XY
of that div, not the whole page.

How do I do this?

#2 (**permalink**) 03-03-2008, 04:20 PM

synterx wrote:
> I've never got this understood. I have a Container DIV, set to auto center. I'm
> using one of the presets that DW8 gives you. I need put a small DIV in the
> upper right corner, that stays in the exact spot even when browsers are
> widened...let me re-phrase. I want the little DIV to be Absolutely Positioned,
> but using the XY coordinates of my main, centered container.
>
> I made a DIV, called it Absolute, moved it where I want it, and of course it
> stays put when I widen the browser window. It is using the whole browser window
> for the XY coordinates. That's fine, and I understand it's supposed to work
> that way.
>
> But, I also thought that if you put a DIV inside another, it will use the XY
> of that div, not the whole page.
>
> How do I do this?
>

Change the DIV that is inside to relative, instead of absolute. See this
for more info:
http://www.barelyfitz.com/screencast...s/positioning/

Steve

#3 (**permalink**) 03-03-2008, 04:34 PM

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

--
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
==================

"synterx" <webforumsuser@macromedia.com> wrote in message
news:fqh85f$4cr$1@forums.macromedia.com...
> I've never got this understood. I have a Container DIV, set to auto
> center. I'm
> using one of the presets that DW8 gives you. I need put a small DIV in the
> upper right corner, that stays in the exact spot even when browsers are
> widened...let me re-phrase. I want the little DIV to be Absolutely
> Positioned,
> but using the XY coordinates of my main, centered container.
>
> I made a DIV, called it Absolute, moved it where I want it, and of course
> it
> stays put when I widen the browser window. It is using the whole browser
> window
> for the XY coordinates. That's fine, and I understand it's supposed to
> work
> that way.
>
> But, I also thought that if you put a DIV inside another, it will use the
> XY
> of that div, not the whole page.
>
> How do I do this?
>

#4 (**permalink**) 03-03-2008, 04:42 PM

I've tried that. I tried all 4 or 5 choices in the Positioning:Type menu. It
clearly says in the DW help that a DIV set to Absolute takes it's XY coordinate
point from it's nearest parent. So, I clicked in the DIV that I want to put the
new one into, made a new DIV, put in the top/left coordinates to move it into
position, and it pops into place. Fine. But it is not using the parent div, but
the whole page as the parent.

This is what I'm not getting. If you put your cursor in a DIV, and insert
another, shouldn't an Absolute positioning automatically act like the parent is
the one to use for XY?

#5 (**permalink**) 03-03-2008, 04:50 PM

Well, I made the parent DIV "relative", and made the child "absolute", and it now works.

#6 (**permalink**) 03-03-2008, 05:01 PM

Of course. That's how it should work. There's no substitute for a little
understanding....

--
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
==================

"synterx" <webforumsuser@macromedia.com> wrote in message
news:fqha7s$6kt$1@forums.macromedia.com...
> Well, I made the parent DIV "relative", and made the child "absolute", and
> it now works.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode