www.webdeveloper.com
Results 1 to 7 of 7

Thread: Positioning a DIV over a specific cell in a table

  1. #1
    Join Date
    Oct 2008
    Posts
    87

    Positioning a DIV over a specific cell in a table

    The title just about says it all - I need to be able to position a DIV element over a specific cell in a table. We're looking at building an app that generates a timeline view for schedules - similar to the TIMELINE view in Outlook where the description for the time line appear immediately above the timeline.

    I was thinking about marking the starting sell with a specific ID that is later referenced when it comes time to create & position the DIV. The idea is to use the ID to retreive the specific location on screen and then position the DIV at the horizontal position of the cell and at a vertical position less than the cell.

    When the table is created, every other row would contain timeline information so that the corresponding labels would be placed in the empty row of cells. Placing the DIV on top of the time line isn't an option as there is no guarantee that the length of the text in the div would be the same as the timeline. White text on a blue timeline would work as long as the time line is long enough to display it.

    Thoughts? Ideas?

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    Put the <div> element inside the cell, apply position:relative; to the <td>, apply position:absolute; for the <div>, then position the <div> where you want it and hide it until you want it to be displayed.
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Oct 2008
    Posts
    87
    Quote Originally Posted by David Harrison View Post
    Put the <div> element inside the cell, apply position:relative; to the <td>, apply position:absolute; for the <div>, then position the <div> where you want it and hide it until you want it to be displayed.
    The <DIV> needs to be constantly displayed.
    Also, if the <DIV> is in the cell won't it effect the cell spacing if the <DIV> is wider than the cell. Keep in mind that the there is no guarantee that width of the text in the <DIV> will be the same as the width of the cell which will typically be short. The width will typically be just be wide enough for the date in mm/dd format with the day in three characters under neath as in

    | 10/31 | 11/1 |
    | FRI | SAT|

    Christopher Smith
    |XXXXXX|

    Where Christopher Smith is in the DIV and the dashes and the X's indicate that the cell has a color with 11/1 being white.

  4. #4
    Join Date
    Oct 2008
    Posts
    87
    I just realized that the original post wasn't as clear as it could have been - by 'over a specific cell' - I was referring to having the <DIV> immediately above the cell in terms of vertical positioning as opposed to z-order.

  5. #5
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    position:absolute takes an element out of the normal flow, the dimensions of the <div> therefore wouldn't affect the dimensions of the parent element.

    And I understood that you wanted the <div> above the list as in visually on the page rather than in terms of z-index. Absolute positioning is an easy way to achieve this.
    Every fight is a food fight when you’re a cannibal.

  6. #6
    Join Date
    Oct 2008
    Posts
    87
    Quote Originally Posted by David Harrison View Post
    position:absolute takes an element out of the normal flow, the dimensions of the <div> therefore wouldn't affect the dimensions of the parent element.

    And I understood that you wanted the <div> above the list as in visually on the page rather than in terms of z-index. Absolute positioning is an easy way to achieve this.
    So itd be just a matter of getting the related cell's position on screen and then using that to set the div's.

  7. #7
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    No, as I said, put the <div> inside the cell, position:relative; on the cell, position:absolute; on the <div>. Any positions you give the <div> then will be based on the top left corner of the parent cell. If you want the <div> above the cell then you might say:
    Code:
    table tbody tr td{
      position:relative;
    }
    
    table tbody tr td div{
      position:absolute;
      top:-5em;
      left:0;
    }
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles