- #1
davee123
- 672
- 4
So, I've got a <table> full of <td>'s. And I want to have a <div> magically pop in sometimes, centered above a particular <td>. That is, I want it to partially COVER the content within the <td>. As is, I'm creating the <td>'s and <div>'s, but I just set the visibility to "hidden" until it's ready to appear. Plus, the <div>'s aren't fully opaque, so you can still see what's underneath.
Anyway, the problem: I can get the <div> to center horizontally-- but not vertically. And unfortunately, the <td>'s can be very different size-wise. Sometimes 50 pixels tall, sometimes 200 pixels tall (depends on the image that's inside it).
So, right now, I've got the div set to:
That puts it about 20 pixels down from the top of the <TD>, but sometimes that looks woefully pathetic. And setting top to a percentage doesn't seem to do ... anything. I was hoping that setting "top: 50%" would set it to 50% of the height of the containing element (a <td>), but apparently not!
Now, I know there's phenomenally complex ways to do this by getting the height of the <td> in javascript, and then referencing that in order to set the "top" to a certain fixed number of pixels. ... But, I was hoping (please?) that there's a better way to do this?
DaveE
Anyway, the problem: I can get the <div> to center horizontally-- but not vertically. And unfortunately, the <td>'s can be very different size-wise. Sometimes 50 pixels tall, sometimes 200 pixels tall (depends on the image that's inside it).
So, right now, I've got the div set to:
Code:
.addedtag {
position: relative;
top: 20px;
background-color: #DDDDFF;
font-color: #008000;
border: 2px solid #904040;
width: 50%;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
filter:alpha(opacity=50);
opacity:0.5;
}
That puts it about 20 pixels down from the top of the <TD>, but sometimes that looks woefully pathetic. And setting top to a percentage doesn't seem to do ... anything. I was hoping that setting "top: 50%" would set it to 50% of the height of the containing element (a <td>), but apparently not!
Now, I know there's phenomenally complex ways to do this by getting the height of the <td> in javascript, and then referencing that in order to set the "top" to a certain fixed number of pixels. ... But, I was hoping (please?) that there's a better way to do this?
DaveE
Last edited by a moderator: