layers in a table
Ben Paley
I'm using a table to lay out a series of images which I want to line up
accurately. In one cell of this table, there are two images in separate
layers, one on top of the other (though the lower one is visible at the
edges, as they are not the same shape). The lower image becomes visible
onMouseOver (increases the zIndex) and goes back down onMouseOut.
So far it's fairly easy. The problem comes in making the table line up
properly.
If I put the two layers inside the table cell tags and set their
position relatively, the cell expands in size to accommodate both images as
though they weren't overlapping. I want the cell to be only the size of the
two images overlapping, and merely setting width and height attributes for
the cell (or in the <tr> tag) doesn't help. To clarify: one image is
100x200, the other 200x100 arranged in a cross. The cell only needs to be
200x200 to accommodate both images, but insists on becoming 300 pixels high,
as though I'd set all the relative position attributes to zero and the
images occurred one vertically above the other, like two normal image tags
with a <br /> between.
If I put the layers outside the table and set their position absolutely,
each of my four browsers (ie5, ns4, ns6 and opera5) interprets the positions
/slightly/ differently, just enough so if they're perfect in one, they're
obviously not aligned with the other images in the table in the other three.
Also, this means that the table itself has to be in a fixed position; I
can't centre it on the page, and it will be a nightmare to add any other
elements above it...
Any ideas? I'd be really grateful, thanks a lot.
Cheers,
Ben
JurLan
<b...@hogsedge.freeserve.co.uk> wrote:
> I'd be really grateful for some help with this small problem:
>
> I'm using a table to lay out a series of images which I want to line
<snip>
On sugestion that works fine for my all the time in any way:
use css instead of tables :)
Ben Paley
Thanks a lot,
Ben
Ben Paley
Putting the layers in the <td> tag and making their positions absolute
still made them absolute with regard to the whole page (except in Opera,
where I couldn't work out what was going on...). In the end, I put them in a
new, otherwise empty row at the bottom of the table, and set them relative
to that, which has entirely solved the problem of lining them up with the
other table elements.
As for using css - did you, JurLan, mean to set each element's position
separately in-line? I thought about this a lot, but in the end I decided to
keep to the table, as it means I can easily add or remove other elements and
still retain the relative positions of the images in the table.
Thanks to both of you very much for your help - though I ended up not
doing what either of you suggested, you set me on the right track.
Thanks again,
Ben
> Relative objects are supposed to leave a space behind where they are
> 'meant' to be. Relative just means they appear at the specified offset
> from where they are meant to be in the normal flow of things.
>
> Supposedly if you make their position absolute, and offset them, they
> should be offset from their parent object (ie the table cell) and take up
> just the space they appear to take up. I can't say whether older browsers
> will interpret this correctly though.
>
> Of course this means that you have to put the <div> inside the <td>.
Jennifer Mullen
> Putting the layers in the <td> tag and making their positions absolute
> still made them absolute with regard to the whole page (except in Opera,
> where I couldn't work out what was going on...). In the end, I put them in a
> new, otherwise empty row at the bottom of the table, and set them relative
> to that, which has entirely solved the problem of lining them up with the
> other table elements.
This may work better for you:
<td>
<div style="position:relative">
<img src="lower.image" />
<div style="position:absolute; top: Xpx; left: Xpx">
<!-- replace Xpx above with the appropriate offset values -->
<img src="upper.img" />
</div>
</div>
</td>
I just tested this with Galeon0.10.6/Linux (a Gecko-based browser) and
Netscape 4.75/Linux, and it worked fine in both. Note that the "origin"
(top:0;left:0) for an absolutely-postioned element contained by a
relative-positioned element is the "origin" of the relative-positioned
containing element.
Setting the position of the "upper" image to absolute and forgoing a
containing div caused the images to be laid out vertically, one above the
other, in Netscape 4.75/Linux, rather than on top of each other. This method
did work in Galeon, but the browser seemed to freeze up a bit before
rendering.
[note: crossposting maintained in followup-to]
-J.
--
Jennifer Mullen redjen AT psu.edu
jsm158 AT cac.psu.edu
Fox
attributes to align=left valign=top and placing an anchor in the cell <a
name=cellcorner></a>. Set the layer's visibility to "hidden" and with
the page onload, move the layers to the anchor x,y and set the
visibility to "show":
I provided the following demo some time back -- it places a layer in a
cell used to change the cell text -- it is a Netscape solution, but,
perhaps you can raid it for significant parts and apply it to your problem.
Hope it helps,
Fox
*****************
<xmp><!-- remove this line to run -->
<script language = javascript>
onload = function()
{
var a = document.anchors["lyrcorner"];
document.tablelyr.left = a.x;
document.tablelyr.top = a.y;
document.tablelyr.visibility = "show";
}
function
changeLayerText(str)
{
// you have to reapply styles:
var style = "style = 'position: absolute; " +
"width: 120; " +
"height: 70; " +
"clip: rect(136, 77); " +
"layer-background-color: aliceblue; " +
"font-weight: bold; " +
"padding: 4pt;'"
var doc = document.tablelyr.document;
doc.write("<body " + style + ">" + str + "</body>");
doc.close();
}
</script>
<body>
<table border = 1 align=center width = 300 height = 150>
<tr>
<td>
Cell one
</td>
<td>
Cell two
</td>
</tr>
<tr>
<td valign=top align=left>
<a name = lyrcorner></a>
</td>
<td>
Cell four
</td>
</tr>
</table>
<br>
<center>
<form>
<textarea name = data
cols = 80 rows = 4>change layer with this text and see if it wraps correctly<br><br>cool
</textarea></br>
<input type = button value = "Do Change" onclick = "changeLayerText(this.form.data.value)">
</form>
</center>
<div id = tablelyr style = "
position: absolute;
visibility: hidden;
width: 120;
height: 70;
clip: rect(136, 77);
layer-background-color: aliceblue;
font-weight: bold;
padding: 4pt;">
This is changeable cell content</div>
</body>
<!-- remove this line to run -->
Ben Paley
about, thanks a lot,
Cheers
Ben