No replies
csslearnermn
Offline
newbie
Last seen: 9 years 29 weeks ago
Timezone: GMT-6
Joined: 2011-01-20
Posts: 1
Points: 2

Hi,
I am learning CSS nowadays and I have the following need.

I have a table in that I have 3 cells which has a color or image embedded in that. I have to display a text in the middle of the table and that should be on the top. I tried something like this.

<div class="tablewrapdiv"><span class="test">Text to be on top</span>
	<table class="table1" border="0" colspan="1" cellpadding="1" width="100%" height="100%"><tr>
		<td class="green"></td><td class="green"></td><td class="brown"></td>
	</tr></table>
</div>

But the text is not appearing on top of the cell. The cells is pushed to the bottom of the text in the table.
Can somebody provide the css that should work. I was thinking there will be similar for text like background image.

Below is the CSS that I have for this.

div.tablewrapdiv {
margin-top: 10px;
height: 22px;
border:solid 2px #000000;
overflow: hidden;
font-size:15px;
}

table.table1 {
text-align:center;
z-index:-1;
}

span.test {
z-index:10;
}

td.green {
background: url(images/test-green.png);
}

td.brown {
background: url(images/test-brown.png);
}

Thanks
SP