Layers - Anchor to table not page?

FatRakoon · 4 Sep 2012 at 22:38

I have been using <DIV ID LAYER> to plop layers ( obviously ) into a html page, and using it to put texts and images over each other.

I cannot get the layers to anchor to a table instead of the whole page!

How can I do this?

Thanks

FatRakoon · 5 Sep 2012 at 11:45

Tripnologist said:
Using absolute positioning for an entire layout isn't the best way of doing things, but to answer your question, put the table and the div you want to overlay on top of it inside of a div container. Give the container position: relative. Now anything inside of the container that has position:absolute, will be in relation to the container and not the window.

Ah, so table AND div inside another div?

Ok cool, I will give it a shot.

I have done a sort of half-hearted semi cure and so far it was worked fairly well, but it has required a bit of reworkign on multiple pages and that is to use frames...

The original page is a 1024 pixel wide table in the middle of the page and instead, I simply framed with *,1024,* with 2 blanks either side.

Cured it for sure but I wanted to avoid framing on this particular site.

So, I will have a go anyway and let you know.

FatRakoon · 5 Sep 2012 at 11:58

Cool beans.

Its worked fine... Irritatingly, Namo is a tool I use to do the webpages and I cannot use its WYSIWYG EDIT and Im forced to use HTML and that works fine doing it by hand.

The EDIT does not let me move the layer around properly but entering the values by hand does the trick just fine.

Many thanks mate.

FatRakoon · 6 Sep 2012 at 09:41

AH? Actually no, I have done the page and its NOT doing what I thought...

I can get the picture to anchor itself to the entire page or to the table, and thats all.

Here is an example bit of code...

-----------------
<HTML>

<BODY>

<DIV id="page">

<TABLE ALIGN=CENTER VALIGN=MIDDLE width="1024" height="768" background="images/bgdark.jpg">
<TR>
<TD>
<DIV ID="layer1" STYLE="position:absolute; left:10px; top:10px; z-index:1;"> <IMG SRC="Picture1.jpg"> </DIV>
<DIV ID="layer2" STYLE="position:relative; left:10px; top:10px; z-index:2;"> <IMG SRC="Picture2.jpg"> </DIV>

<DIV ID="layer2" STYLE="position:relative; left:20px; top:20px; z-index:3;"> <IMG SRC="Picture3.jpg"> </DIV>

</TD>
</TR>
</TABLE>
</DIV>

</BODY>
</HTML>
-------------------

As you see... when you move the window around and re-size it, one picture is anchored to the window and the other to the table.

Now, with picture 3 ( You need of course to provide pictures... Mine on the page are various sizes of about 200x200 give or take loads
But picture 3 should be overlapping picture 2, with picture 2 being 10,10 off the topleft of the table and picture 3 being 20,20 but as you see... Its gone onto a whole new paragragh rather than anchor it to the top left.

Any clues?

Thanks mate!

FatRakoon · 10 Sep 2012 at 22:22

I have no problems with getting the pictures to be anywhere on the page.

My problem is that rather than having them relative to the screen, Iwant them relative to the table.

REASON?

Ok, well I am forcing the width of a web page to be 1024 pixels.

So, I have used a table with 3 columns and the center is 1024.

This means that there will be a gap either side of the table right.

Now, I can plop the images anywhere I want them to be, hoever, once you resize the window, the images, which are anchored to the screen no longer sit in the table as they are rquired to.

I have once again gone back ot the idea of simply using a frame of 1024 and this has resolved it.

I had another play with this, but it failed miserably and so I have redone the frames and its looking exactly as I want it to.

Id rather it be done with tables mind you, but the end is justifying the means for this.

FatRakoon · 11 Sep 2012 at 20:39

Ah, the tests are now more positive.

In that DIV line, I have changed the position to ABSOLUTE and now the pictures / Layers have allowed me to position them anywhere inside the table and when re-sizing the table, the images have indeed moved as they should inside the table rather than ruining the format.

So, its that STYLE option in the TABLE that was really what was needed then?

Its doing it just fine now so many many thanks guys.