Results 1 to 7 of 7

Thread: hidden divs in a cell

  1. #1
    Join Date
    May 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default hidden divs in a cell

    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!

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  3. The Following User Says Thank You to Medyman For This Useful Post:

    kylebellamy (05-16-2008)

  4. #3
    Join Date
    May 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #4
    Join Date
    May 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    .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:
    Code:
    <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>
    Last edited by kylebellamy; 05-16-2008 at 04:34 PM.

  6. #5
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Don't you just love table layouts?

    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.

    Code:
    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>.
    Last edited by Medyman; 05-16-2008 at 04:58 PM.

  7. The Following User Says Thank You to Medyman For This Useful Post:

    kylebellamy (05-16-2008)

  8. #6
    Join Date
    May 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •