use AP on a div inside a centered div

#1

I have the following layout for a web page
<div align="center"><img src="myimage.jpg />
<div style="position:absolute; left: 274px; top: 287px;">this is some test
for reference on the page</div>
</div>

the image positions centered on the page just fine and if you stretch the
browser windows it remains centered. The text does not. It keeps its absolute
position even though it is nested in the centered div.
The only way I could get the text to keeps it's relative position to the
parent div was to add an outer div, but this caused everything to align right.

<div align="center">
<div align="center" style="position:absolute"><img src="myimage.jpg" />

<div style="position:absolute; left: 274px; top: 287px;">this is some test
for reference</div>
</div>
</div>

does anyone know how to nest div elements so they will move with the
container? I have tried many, many things and nothing quite fixed or addressed
this issue.
thanks, Allen

#2

Quote:

It keeps its absolute
position even though it is nested in the centered div.

That's how absolute positioning works. Any element that is absolutely
positioned is removed from the normal flow of the code. Thus, it wouldn't
matter whether the element would be placed inside a centered container or
not, it is affixed to the screen permanently at the coordinates you
specified - left: 274px; top: 287px

Quote:

The only way I could get the text to keeps it's relative position to the
parent div

You are confusing yourself.

Quote:

does anyone know how to nest div elements so they will move with the
container? I have tried many, many things and nothing quite fixed or
addressed
this issue.

The most important thing here is to understand how positioning works. This
may help you understand it 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

In your case, relative positioning may be what you are looking for.

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

"anation2oo7" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

I have the following layout for a web page
div align="center"><img src="myimage.jpg /
div style="position:absolute; left: 274px; top: 287px;">this is some
test
for reference on the page</div
/div

the image positions centered on the page just fine and if you stretch the
browser windows it remains centered. The text does not. It keeps its
absolute
position even though it is nested in the centered div.
The only way I could get the text to keeps it's relative position to the
parent div was to add an outer div, but this caused everything to align
right.

div align="center"
div align="center" style="position:absolute"><img src="myimage.jpg" /

div style="position:absolute; left: 274px; top: 287px;">this is some
test
for reference</div
/div
/div

does anyone know how to nest div elements so they will move with the
container? I have tried many, many things and nothing quite fixed or
addressed
this issue.
thanks, Allen

#3

[Q]2. The absolutely positioned element takes its position from the position of
its closest PA?RENT *positioned* element - [/Q]

Is the outer parent div in my example considered an [Q]explicitly
positioned parent[/Q]

The positions are clear and as I understood them to be. I am using Dreamweaver
and if I change the code to look like.

<div align="center"
style="position

osition:absolute/relative/static/inherit/fixed"><img
src="myimage.jpg />
<div style="position:relative/static/inherit/fixed; left: 274px; top:
287px;">this is some test for reference on the page</div>
</div>

I also tried the outer div without the style tag and none of them get the
inner div to hold it position relative to the outer div inside FireFox or IE.
When I use position:relative for the inner div it pushes it below the outer div
as if it was not nested.
If I set the inner div to static/inherit/fixed it keeps it in the outer div
but aligns it along the bottom.

Is this just not possible with CSS. I cannot find a web site that uses this
method. They all seem to center a div inside a parent div. I also found many
examples of how to do that, but non that positioned a div relative to its
parent.

#4

Hello,

What is it you are trying to accomplish?
For example, are you trying to align the text over the image?
Or, are you trying to align the text to the side of the image and keep it
there?

It will be easier to make suggestions if we know what you're trying to do.
It's just hard to do from the code, as there are no heights and widths on
the image or divs so it's hard to visualize what you want the layout to be.

Thanks,
Tim

"anation2oo7" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

[Q]2. The absolutely positioned element takes its position from the
position of
its closest PA?RENT *positioned* element - [/Q]

Is the outer parent div in my example considered an [Q]explicitly
positioned parent[/Q]

The positions are clear and as I understood them to be. I am using
Dreamweaver
and if I change the code to look like.

div align="center"
style="position

osition:absolute/relative/static/inherit/fixed"><img
src="myimage.jpg /
div style="position:relative/static/inherit/fixed; left: 274px; top:
287px;">this is some test for reference on the page</div
/div

I also tried the outer div without the style tag and none of them get the
inner div to hold it position relative to the outer div inside FireFox or
IE.
When I use position:relative for the inner div it pushes it below the
outer div
as if it was not nested.
If I set the inner div to static/inherit/fixed it keeps it in the outer
div
but aligns it along the bottom.

Is this just not possible with CSS. I cannot find a web site that uses
this
method. They all seem to center a div inside a parent div. I also found
many
examples of how to do that, but non that positioned a div relative to its
parent.

#5

I am trying to align the text over the image. This is a simplified example of
what I am really trying to do, which is a menu spread across the image( which
is why I need divs)
if you were to use the following code (remove the align=center, from the outer
div)

<div><img src="myimage.jpg />
<div style="position:absolute; left: 274px; top: 287px;">this is some test for
reference on the page</div>
</div>

The page looks exactly how I would like it. The text is positioned over the
image correctly. The image is 800 x 600, this puts the text upper left quadrant.

thanks so much for looking at this issue.
Allen

#6

See this isn't going to work. What will happen when I increase text size in
my browser? Your careful alignment is going to get broken.

However, if you want to see how to do it, consider this -

<div style="position:relative;"><img src="myimage.jpg /><div
style="position:absolute; left: 0px; top: 10px;">this is some text for
reference on the page</div>
</div>

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

"anation2oo7" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

I am trying to align the text over the image. This is a simplified example
of
what I am really trying to do, which is a menu spread across the image(
which
is why I need divs)
if you were to use the following code (remove the align=center, from the
outer
div)

div><img src="myimage.jpg /
div style="position:absolute; left: 274px; top: 287px;">this is some test
for
reference on the page</div
/div

The page looks exactly how I would like it. The text is positioned over
the
image correctly. The image is 800 x 600, this puts the text upper left
quadrant.

thanks so much for looking at this issue.
Allen

#7

I just used text as a simple way to test on my box. I am actually using <img>
to create rollover menus.

the code you gave works, but only because it is not aligned center. once you
add that to the outer div or create another parent div outer/outer div it has
the previously described problem

<div align="center"><img src="myimage.jpg />
<div style="position:absolute; left: 274px; top: 287px;">this is some test for
reference on the page</div>
</div>

#8

The outer div CANNOT cause any centering in the inner absolutely positioned
element. For a parent container to affect a child absolutely positioned
element, it MUST be positioned. If you require centering, then you will
have to use relative positioning on the parent, and center it with CSS by
explicitly giving it a width, and auto left/right margins.

I don't think you're getting it....

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

"anation2oo7" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

I just used text as a simple way to test on my box. I am actually using
img
to create rollover menus.

the code you gave works, but only because it is not aligned center. once
you
add that to the outer div or create another parent div outer/outer div it
has
the previously described problem

div align="center"><img src="myimage.jpg /
div style="position:absolute; left: 274px; top: 287px;">this is some test
for
reference on the page</div
/div

#9

Thanks for taking your time to look at this issue. Please let me know if I have
left anything out that you suggested. I have changed the code to exactly your
suggestions and I get the same behavior.

Shown below, I have the img in a div that is centered and margins set to auto.
I have an absolute positioned div on top of the img. When I adjust the browser
the AP div moves across the screen.
you can also see the page at
http://www.nationmanagement.com/test.htm

<div align="center" style="position:relative;
margin-left:auto;margin-right:auto">
<img src="images/background.jpg" width="803" height="601" />

<div style="position:absolute;left: 274px; top: 287px;">this is some test
to align</div>
</div>

thanks for the help
Allen

#10

Quote:

When I adjust the browser
the AP div moves across the screen.

No it doesn't. It's absolutely positioned. It's the rest of the content
that moves beneath it.

Consider this page, on which I have done what I suggested. You had omitted
the explicit width on the outer div....

http://murraytestsite.com/center2.html

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

"anation2oo7" <webforumsuser (AT) macromedia (DOT) com> wrote

Quote:

Thanks for taking your time to look at this issue. Please let me know if I
have
left anything out that you suggested. I have changed the code to exactly
your
suggestions and I get the same behavior.

Shown below, I have the img in a div that is centered and margins set to
auto.
I have an absolute positioned div on top of the img. When I adjust the
browser
the AP div moves across the screen.
you can also see the page at
http://www.nationmanagement.com/test.htm

div align="center" style="position:relative;
margin-left:auto;margin-right:auto"
img src="images/background.jpg" width="803" height="601" /

div style="position:absolute;left: 274px; top: 287px;">this is some
test
to align</div
/div

thanks for the help
Allen