Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14

Thread: Layer Problems

  1. #1
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    I have something like this:

    Code:
    <td style="width: 80px; height: 80px;">
    
    <div style="width: 80px; height: 80px;">DIV 1</div>
    <div style="width: 80px; height: 80px;">DIV 2</div>
    
    </td>
    I have tried using z-index, relative positioning and floating to try to get DIV 1 above DIV 2, to no avail. Where am I going wrong?

    Thanks
    JR

  2.  

  3. #2
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    i thought relative positioning would have been the ticket. Hmmm, dunno.
    tekp :cheeky: tekponline.com

  4. #3
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    why do you have two 80x80 divs inside another 80x80 div, or is that just an example? it looks like you would use your td as the bottom container and just put what you want inside the div an no z indexing will be needed... another way you could do this with the framework you have is this:

    Code:
    <td style="positon: relative; width: 80px; 
    height: 80px;">
    
       <div style="background-color: #AAAAAA; 
       position: absolute; top: 0px; left: 0px; 
       z-index: 1; width: 80px; height:
       80px;"><div>
    
       <div style="position: absolute; top: 0px; 
       left: 0px; z-index:5; width: 80px;
       height: 80px;">top div text</div>
    
    </td>


  5. #4
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    two DIVs inside a DIV?

    Didn't work, you used absolute positioning, whereas I wanted it to be relative to the table cell. Changing the 'absolute' to 'relative' didn't work.

    What I have in DIV 2 is a PNG image using MS's CSS filter. In DIV 1 I have an 80x80 transparent gif so I can use the PNG as a link.
    JR

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    no what i was saying is one div inside of a td.. your framwork has two divs inside of a td..

    This will work when you set it to absolute because the td is set to relative. The divs will be set according to the td and not the view port. Then its just a matter of setting the proper z-index.

    This is why i dont like to mix a table based layout and css because table elements are not are handled as regular elements. so rules at times get fudged up and they dont always transend to them as they normally should.

    Absolute positioning takes the element out of the normal flow of a document and positions it according to its container element, a relitive positioned elemtn's space is still in the normal flow of a document. So setting the divs to position relitive will stretch out your td as if something should be there but isnt, or something else unexpedted will happen. Positining them to absoute will take them out of the flow so their space will be collapsed and position them according to their container element(the relitive positined td they are in)


  7. #6
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    But it puts them in the top corner of the page...

    Using absolute positioning isn't an option because the layout is dynamic.
    JR

  8. #7
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    It will not do that if you put them in a reltivly positioned element.


  9. #8
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    It does. Absolute positioning just sets the element relative to the page, regardless of the parent element.
    JR

  10. #9
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    that is fixed positioning.. but i found your problem... wrap the two divs into another div. the td cannot act as the container for the two divs.. so you need to put the divs into an element that can act as their container, another div

    And take off the relitive positionong from the td and put it in the new div


  11. #10
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Right ok, I'll give it a go. Thanks
    JR


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:17 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com