asked on

How to add background color to a specific area

Greetings,

I am new to html and I need to add background color (lime green) to the box below. I believe this would be the code as it stands now:

<tr>
<td colspan="2" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-bottom: 15px; padding-top: 15px;">
$TEXT</td>
</tr>
<tr style="background-color:#BBBBBB; height:1px;">

Would I replace the :#BBBBBB with #00FF00 or does this color apply to something else?

Thanks

text-box.JPG

hielo

>>Would I replace the :#BBBBBB with #00FF00 or does this color apply to something else?
Yes.

It applies to the background of the row.

hielo

BTW:
#00FF00 is green.

limegreen is more like:
#32cd32

John500

ASKER

I just tried it and the only thing that gets colored is the bottom line. The line is still grey but behind the line is green.

How would the whole box get the color?

Thanks

John500

ASKER

Actually I'd like to try two ways:

1) change the $TEXT color to lime green
2) change background color of the box lime green

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hielo

change the background => style="background-color:#32cd32;"

change the text color => style="color:#32cd32;"

TunaMaxx

The way you have it, the green background would start in the NEXT table row (<TR>) element, and then that row would only be 1 pixel tall.

Just replace your FIRST <TR> in your provided code with your LAST <TR> statement, and ditch the 'height: 1px;' like this:

<tr style="background-color:#BBBBBB;>
    <td colspan="2" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-bottom: 15px; padding-top: 15px;">$TEXT</td>
</tr>
<tr style="background-color:#BBBBBB; height:1px;">

Open in new window

John500

ASKER

Ok, and finally - if I were to test these options statically would I just remove the $TEXT and replace it with something within quotes - or what?

Thanks!

hielo

just replace $TEXT with the content. Quotes are not necessary:

 <tr style="background-color:#32cd32;">
        <td colspan="2" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; border-bottom: gray thin solid; padding-bottom: 15px; padding-top: 15px;">
           Hello there
         </td>
  </tr>

Open in new window

John500

ASKER

Thank you sir ....