/    Sign up×
Community /Pin to ProfileBookmark

Positioning a DIV over a specific cell in a table

Copy linkTweet thisAlerts:
Oct 23.2008

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?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonOct 27.2008 — 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.
Copy linkTweet thisAlerts:
@dch3authorOct 27.2008 — 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.[/QUOTE]

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.
Copy linkTweet thisAlerts:
@dch3authorOct 27.2008 — 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.
Copy linkTweet thisAlerts:
@David_HarrisonOct 27.2008 — 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.
Copy linkTweet thisAlerts:
@dch3authorOct 28.2008 — 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.[/QUOTE]

So itd be just a matter of getting the related cell's position on screen and then using that to set the div's.
Copy linkTweet thisAlerts:
@David_HarrisonOct 28.2008 — 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:table tbody tr td{
position:relative;
}

table tbody tr td div{
position:absolute;
top:-5em;
left:0;
}
×

Success!

Help @dch3 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...