|
|
|
HP in diferent sizes |
|---|
| message from AzaZzel on 15 Jul 2004 |
I have made some HP, and most my text areas are layers placed on a picture.
But here is my porblem, when i make my homepages with layers its placed a
precise place, but when people with another size screen (dont know what the
name of it is in english, but like 800x600 or 1024x768) the layers are another
place in the homepage and not were the text should be.
If anyone knows how to get the layers to stay the same place in the pixture in
every screen size, or any other solution to the problem
it would help me alot.
Sry for my bad english
AzaZzel
|
| darrel replied to AzaZzel on 15 Jul 2004 |
HP?
Layers are DIVs that are positioned absolutely on the page (at specific x/y
coordinates). If you want them to align with something else, then those
other items also need to be positioned absolutely.
-Darrel
|
| Murray *TMM* replied to darrel on 15 Jul 2004 |
Not necessarily. A 'layer' inside a relatively positioned division can be
always aligned with a non-AP element that is also inside that relatively
positioned container.
|
| darrel replied to Murray *TMM* on 15 Jul 2004 |
Not consistently...especially if we're talking about type. They'd both have
to be positioned absolutely within that div. Once you position something
absolutely, you take it out of the document flow.
-Darrel
|
| Murray *TMM* replied to darrel on 15 Jul 2004 |
Yes - but within the container. It's possible to align an absolutely
positioned division to another element within that container, and to do it
consistently. Try it. You'll see.
|
| darrel replied to Murray *TMM* on 15 Jul 2004 |
Murray...once you position something absolutely, it's taken out of the
document flow. Therefore, it has no relation to any other object.
Granted, if the first item is put in the document flow, you could probably
allign the absolutely positioned item fairly accurately in relation to it,
but technically, it's still a bit of a crap-shoot.
-Darrel
|
| Murray *TMM* replied to darrel on 15 Jul 2004 |
Did you get it?
|
| Murray *TMM* replied to darrel on 15 Jul 2004 |
That's just wrong.
An absolutely positioned element is positioned with regard to its closest
parent positioned container. In those cases where there is no parent
container, then the body tags gets the job, and in this case you are
correct. But if the parent container is a positioned element, like a
relatively positioned division, then the AP division takes its 0,0
coordinates from that of the relatively positioned division.
Check here - http://www.compasspt.com.
The compass image in the background is an absolutely positioned element. It
is in a centering relatively positioned division. Note how it is NOT
removed from the flow of the relatively positioned division.
#contentWrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 3;
#watermark {
position: absolute;
z-index: 1;
width: 384px;
height: 414px;
left: 416px;
top: 175px;
<div id="contentWrapper"><div id="watermark"><img src="images/watermark.gif"
width="384" height="414"></div>
|
| darrel replied to Murray *TMM* on 16 Jul 2004 |
Correct, but it is ALSO taken out of the document flow.
So, you can position the element in relation to it's parent, but if the
parent also has a child item NOT absolutely positioned, there isn't a direct
correlation between the two siblings other than they share the same parent.
-Darrel
|
| Murray *TMM* replied to darrel on 16 Jul 2004 |
It is taken out of the flow WITH REGARD TO OTHER ELEMENTS WITHIN ITS PARENT
CONTAINER (caps for emphasis). If what you are saying were correct, how can
you explain the positioning of the compass watermark on the
http://www.compasspt.com site, regardless of the browser viewport size,
which also contains non-positioned elements?
When an AP division is placed within some other positioned element, it
always (ALWAYS) takes its zero point from the position of the parent
container. When a relative positioned element is placed within some other
positioned element, it always takes its zero point from its position in the
code.
So - as long as the AP division is aligned with other elements within that
parent (even those that are not positioned), it will continue to be aligned
with those other elements, no matter where the parent is located on the
screen.
Geddit? Or are we saying the same thing (I don't think so)?
|
| darrel replied to Murray *TMM* on 16 Jul 2004 |
Exactly.
The compass is positioned in realtion to the content wrapper DIV. however,
it is not alligned with the type, as I can easily change my type size and
there's no longer a direct relation between the two.
What I'm saying, if you want to take that page as an example, is that you
can't have the paragraph 'COMPASS POINT CAN HELP...' line up exactly with
the bottom of the compass watermark, because one is positioned absolutely,
while the other isn't. The text 'goes with the flow' and repositions itself
based on the size of the type. The compass is absolutely positioned and
stays put outside of the flow.
I think we're actually in complete agreement, we're just focusing on
slightly different aspects of it. ;o)
-Darrel
|
| Murray *TMM* replied to darrel on 16 Jul 2004 |
OK - so - your comment is really true *only* when dealing with aligning AP
elements with text. If you want to align AP elements with anything else,
it's quite possible.
|
| darrel replied to Murray *TMM* on 16 Jul 2004 |
Well, my point is that AP elements are fixed in relation to their parent,
while nonAP elements go with the flow, so depending on the nonAP element, it
might reflow based on a variety of things...browser width, various inherited
CSS attributes, and, of course, most likely, a change in text sizes in any
nonAP object before it in the flow.
So, yea, we're in agreement. ;o)
-Darrel
|
|
