...

View Full Version : Graduating cell colour



malhyp
12-19-2006, 01:45 AM
Hi there is it posible at all to make the 1st cell in the bottom table graduate in colour from #009900 to #00FF00? Graduation would be from top to bottom.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#009900">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Cheers
Mally

koyama
12-19-2006, 02:15 AM
Yes, but then you will have create your own image (e.g. myGradient.gif) and then inserting it as a background image of that table cell.


<style type="text/css">
#firstCell {
background: url(myGradient.gif);
}
</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="firstCell">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

malhyp
12-19-2006, 02:23 AM
Thanks for the reply. I have tried doing that but found that sometimes if the page size is changed,; eg minimizing exlorer, the picture also changes and it starts to double as the cell changes size etc.

Cheers

koyama
12-19-2006, 08:49 PM
Yes, for cells of variable height this will not work. And since you cannot stretch background images this approach cannot be modified to suit our needs.

Had it not been for IE you could use an alternative method (perhaps IE7 has resolved this? I cannot test here where I am.)

You could place the gradient image directly as an <img> element. Absolute positioning together with a 100% height will give the desired effect. According to the specs the image (having absolute position) should the follow the heigth of its containing block even when it doesn't have explicit height.

You may try this in FF. (Here myGradient.gif is the gradient image)


#block {
position: relative;
}
img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
#contents {
position: relative;
}



<div id="block">
<img src="myGradient.gif">
<div id="contents">Plenty of text here, but we don't know how much!</div>
</div>

MrJL
12-20-2006, 05:40 AM
Are you wanting to graduate top to bottom or left to right?

Either way, can't the BG image be set to not repeat and then simply make the BG colour set to the last colour in the sequence?

I recall doing it that way many moon ago, but have not bothered attempting since?

malhyp
12-20-2006, 12:07 PM
Thanks for that they both worked.

Cheers and thanks for your help.

Mally

codingmasta
12-20-2006, 05:18 PM
<td background="gradient.gif">
You do not need CSS for this one (Or either you can)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum