SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning within a block element

    is there a way to do positioning inside a block element such that everytying inside the block is always aligned to one fixed point?

    for example:

    Code:
    <table style="background-color: gray; width: 500px; height: 500px;" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top">
    
    <div style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 50px; height: 50px; background-color: blue"></div>
    <div style="position: absolute; z-index: 1; left: 0px; top: 0px; width: 50px; height: 50px; background-color: red"></div>
    <div style="position: absolute; z-index: 2; left: 0px; top: 0px; width: 50px; height: 50px; background-color: green"></div>
    
    
    </td>
    </tr>
    </table>
    as a result, I want each coloured cube should stack on top of each other. but the problem:

    if i use relative, each of the cubes would just be placed beneath one another. And it'll only be possible to stack them if the width and height are static (through manual correction by replacing negative values in left and top properties of each div element). if i use absolute, all the divs will position relatively to the entire HTML document.
    signature

  2. #2
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's because <td>s aren't really a block level element. Can you get the desired result if you try relative positioning inside a <div>?

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope.

    could anyone give me some example code for me to follow? or is this some sort of bug?

    I read this on a website:

    Absolute position is what we are all so excited about. In a nutshell, it lets a developer say where the top left hand corner of an element should be located. We'll look at how we do this a little later, but for now, consider this complicating factor. Suppose I say, P#title {position: absolute; top: 200px; left: -100px;}

    Is this with respect to the top left hand of the web page, or the element which contains the paragraph of ID title? With CSS2, its the latter. That is, with CSS2, when you specify a position, it is with respect to the position of the parent element. Don't get this confused with relative positioning, which we'll look at below.
    http://www.westciv.com.au/style_mast...%20in%20detail

    so theoretically, absolute positioning should do the job.
    signature

  4. #4
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe you'll have to set the position property of the parent <td> to relative.

    Try this with & without setting the position prop of the <td>

    Code:
    <table style="background-color: gray; width: 500px; height: 500px;" cellspacing="0" cellpadding="0">
      <tr>
        <td style="background-color: gray;position: relative; left: 0px; top: 0px; width: 150px; height: 150px;">
          <div style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 50px; height: 50px; background-color: blue"></div>
          <div style="position: absolute; z-index: 1; left: 0px; top: 0px; width: 50px; height: 50px; background-color: red"></div>
          <div style="position: absolute; z-index: 2; left: 0px; top: 0px; width: 50px; height: 50px; background-color: green"></div>
        </td>
      </tr>
    </table>
    From the CSS2 spec:

    The following example shows an absolutely positioned box that is a child of a relatively positioned box. Although the parent outer box is not actually offset, setting its 'position' property to 'relative' means that its box may serve as the containing block for positioned descendants.
    The full example is here: http://web3.w3.org/TR/REC-CSS2/visuren.html#q29

    HTH

  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great to know, Isotope! I know that IE4 and 5 mistakenly did this as the default behavior, but now they're in line with the other browsers. It's good to know that there's a way to do this because, to tell the truth, I thought it was impossible.

    Do you have any idea about the browser support for this?

    ~~Ian

  6. #6
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ian,

    All I know now is that it works in IE5.5. I'll test it later in NN6 if I get a chance (at work now).

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    woohoo!
    it works now.

    if I knew this earlier, it would of saved me alot of trouble from before (I had to write javascript to position stuff).
    signature


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
  •