relative vs abolute position with layers in liquidinterface

asht · asht

:confused;

Newbie here.

I've got a 2 column table in an editable area of a page created from a
template. In column 1 there is a roll over image (so far, so good) , in column
2 there is a text title.

I want to place a layer over the text title that will appear with mouse over
of the image. All is well if I make the layer absolute in position, however, I
have a liquid interface and when I resize the window, the layers do not move
with the images.

I tried changing the layers to a relative position and placing the div within
the cell, but this just squashed my title, even though the z index of the layer
was 10.

Can some kind person please help me out?

Murray *TMM* · Murray *TMM*

This post is more suited for the dreamweaver forum than the dynamic html
one.

> I tried changing the layers to a relative position and placing the div
> within
> the cell, but this just squashed my title, even though the z index of the
> layer
> was 10.

If you are going to experiment like this, then 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....

Position:absolute
-----------------------
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. 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
----------------------
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. 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 two 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%).

You can see a good example of the essential difference between absolute and
relative positioning here -

[url]http://www.great-web-sights.com/g_layersdemo.asp[/url]

===================

Now - to help you with your page, I would need to see it. Can you post a
link to the page?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"asht" <webforumsuser@macromedia.com> wrote in message
news:diq09s$bv8$1@forums.macromedia.com...

> :confused;
>
> Newbie here.
>
> I've got a 2 column table in an editable area of a page created from a
> template. In column 1 there is a roll over image (so far, so good) , in
> column
> 2 there is a text title.
>
> I want to place a layer over the text title that will appear with mouse
> over
> of the image. All is well if I make the layer absolute in position,
> however, I
> have a liquid interface and when I resize the window, the layers do not
> move
> with the images.
>
> I tried changing the layers to a relative position and placing the div
> within
> the cell, but this just squashed my title, even though the z index of the
> layer
> was 10.
>
> Can some kind person please help me out?
>
>

asht · asht

Thanks for both the comment about the correct forum, the link and response.

I am finding that understanding the terminology and being able to ask
meaningful questions and understand responses to the questions I do ask the
greatest challenge at present.

The page is not online yet. I still have some layout issues to sort out. It is
my first site for someone else (a friend - no pay) so is very much a learning
exercise.

I believe that I can solve my problem with the rsponse. Thank you.

Murray *TMM* · Murray *TMM*

Good luck. Post back over in the Dreamweaver forum if you have more
problems.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"asht" <webforumsuser@macromedia.com> wrote in message
news:dishm2$i3j$1@forums.macromedia.com...

> Thanks for both the comment about the correct forum, the link and
> response.
>
> I am finding that understanding the terminology and being able to ask
> meaningful questions and understand responses to the questions I do ask
> the
> greatest challenge at present.
>
> The page is not online yet. I still have some layout issues to sort out.
> It is
> my first site for someone else (a friend - no pay) so is very much a
> learning
> exercise.
>
> I believe that I can solve my problem with the rsponse. Thank you.
>
>
>

relative vs abolute position with layers in liquidinterface

Thread Tools

Display

relative vs abolute position with layers in liquidinterface

Similar Questions and Discussions

DW8 messed my relative position layer behaviors

RELATIVE LAYERS..... take up space even when invisible?

Placing bitmaps in Illustrator CS: scale/position relative to artboard

Clip position relative to _root

Relative positon to layers

Re: relative vs abolute position with layers in liquid interface

Re: relative vs abolute position with layers in liquidinterface

Re: relative vs abolute position with layers in liquid interface

Posting Permissions