Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    70
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Graduating cell colour

    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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.
    Code:
    <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>

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    70
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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)
    Code:
    #block {
      position: relative;
    }
    img {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
    }
    #contents {
      position: relative;
    }
    Code:
    <div id="block">
      <img src="myGradient.gif">
      <div id="contents">Plenty of text here, but we don't know how much!</div>
    </div>

  • #5
    New Coder
    Join Date
    Jun 2002
    Location
    Central Ohio
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Jers-Web, Inc.
    Ever seen 49,825 Alert Boxes on one page? I have!

  • #6
    New Coder
    Join Date
    Jun 2006
    Posts
    70
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks for that they both worked.

    Cheers and thanks for your help.

    Mally

  • #7
    New Coder
    Join Date
    Dec 2006
    Location
    Bahrain
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <td background="gradient.gif">
    You do not need CSS for this one (Or either you can)
    Last edited by codingmasta; 12-20-2006 at 05:19 PM. Reason: none
    ALWAYS remember to validate your code


  •  

    Posting Permissions

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