hidden divs in a cell

[kylebellamy]

I was trying to do something simple enough by creating a set of show/hide layers to pop up further info when something was clicked.

First try worked fine except that I used absolute positioning so when the browser was resized the content slid out of the box I wanted it in.

Did some searching and found how to use relative positioning. So I stuck all the DIVs I created in the cell I was using for layout (I know, i know, don't lecture me on using css instead of tables, I'm not there yet) and while they are hidden, the structure of the table is all sorts of screwed up now.

Can I use relative positioning based off a cell that the hidden layers are not in? Can the hidden layers be placed in the cell without changing the size of the cell?

Thanks for any help!

[Medyman]

Can I use relative positioning based off a cell that the hidden layers are not in?
Yes. Add position:relative to that cell. Then, whatever is inside it will be positioned relatively to that cell (be sure to use absolute positioning for anything inside the cell).


Can the hidden layers be placed in the cell without changing the size of the cell?
Yes. Define the size (height and width) of the cell in the CSS. Then use the overflow:hidden property to hide anything to flows outside of the cell.

You say that you're not ready to use a total CSS layout, but these exact problems are why CSS layouts are better and why tables aren't recommened for layout. Without the tables, you wouldn't have such problems.

[kylebellamy]

Overflow!!! I can't believe I forgot that tag.

Actually, I am working on learning more and more so it's the next step.

Thanks so uch for the help!

[kylebellamy]

Ok, so that did work, technically but now I am faced with a new problem.

The DIVs (there are 6) in the cell no longer stretch out the cell to mess up the layout. But they still retain their one after the other placement so they effectively vanish because they are showing up out side of the confines of the cell.

I placed all the DIVs in the cell but they are showing up relative to their placement, not to the top & left of the cell each time I select one and hide the rest like I thought they would.

I know I'm missing something but I'm not sure what.

EDIT: I'm looking for an iframe effect without the mess of iframes.

Here is the CSS:

.layerstyle {

background-color: transparent;
layer-background-color: transparent;
border: 0px none #000000;
visibility: hidden;
position:relative;
overflow: hidden;
z-index:99;
}

And the cell in question:

<td colspan="7" rowspan="4" background="images/tech_window.jpg">
<div style="height:272px; ">
<div ID="Layer1" class="layerstyle" style="width:158px;">
<div align="center">
<a href="http://www.kodak.com/eknec/PageQuerier.jhtml?pq-path=8016&pq-locale=en_US&_requestid=12831" target="_blank">
<img src="images/z650-small.png" border="0"></a></div>
<br>Kodak z650<br>10x Optical Zoom<br>6.1 megapixel<br>Many user settings<br>and multiple presets
</div>
<div ID="Layer2" class="layerstyle" style="width:158px; ">
<div align="center">
<a href="http://www.adobe.com" target="_blank">
<img src="images/PS-CS3.png" border="0"></a></div>
<br>Photoshop CS3<br>Adobe Systems Inc.<br>Do I really need <br>to say more?
</div>
<div ID="Layer3" class="layerstyle" style="width:158px; ">
<div align="center">
<a href="http://www.kodak.com/" target="_blank">
<img src="images/kodak-printing.jpg" border="0"></a></div>
<br>Kodak Printing<br>Kodak Inc.<br>Does amazing<br>prints up to<br>20x30 posters.
</div>
<div ID="Layer4" class="layerstyle" style="width:158px; ">
<div align="center">
<a href="http://hdrcreme.com/" target="_blank"><img src="images/HDR.jpg" border="0"></a></div>
<br>HDR Processing<br>A bit too much to go<br>into. Click the image<br>to learn more.
</div>
<div ID="Layer5" class="layerstyle" style="width:158px; ">
<div align="center"><a href="http://store.apple.com" target="_blank"><img src="images/macbook.png" border="0"></a></div><br>Apple Macbook<br>• 2.4GHz Intel<br>Core 2 Duo<br>• 2GB memory<br>• 160GB hard drive<br>• Double-layer<br>SuperDrive
</div>
<div ID="Layer6" class="layerstyle" style="width:158px; ">
<div align="center">
<a href="http://www.afinefrenzy.com" target="_blank"><img src="images/fine-frenzy.png" border="0"></a></div>
<br>A Fine Frenzy<br>Singer, pianist with a<br>lovely melancholy style<br>that passes the time<br>without grating nerves.
</div></div> </td>

[Medyman]

Don't you just love table layouts? :rolleyes:

I'm not clear for what exactly you're going for here?
You're trying to make all the divs within this sell to be positioned to the absolute top and left of the cell? They'll all overlap each other this way! Maybe you're using some javascript to display only one at a time?

Anyway, since it's an absolute position you want, you should be using absolute positioning.


position:absolute
top:0;
left:0;

That will position the div to the left hand corner of the next closest relatively positioned container (or if all else fails, to the top left of the viewport).

To get it to be relative to the cell, you need to add position:relative to the cell -- the <td>.

[kylebellamy]

That's exactly it. I have a show/hide function that is somewhat primitive but works well so far.

Thanks again for the help on this. I'll let you know how it goes.

[jscheuer1]

Technically speaking a td cannot be relatively positioned. I'm not sure if this is due to standards, or just the behavior of browsers like FF and Opera. IE will allow it, but then your markup will be different in those other browsers. You can put a relatively positioned div inside the td, and then position absolutely to it:


<td><div style="position:relative;width:100%;height:100%;">
<div style="position:absolute;top:10px; left:10px;">
Whatever
</div></div></td>