• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 186
  • Last Modified:

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
0
John500
Asked:
John500
  • 5
  • 4
1 Solution
 
hieloCommented:
>>Would I replace the  :#BBBBBB  with  #00FF00  or does this color apply to something else?
Yes.

It applies to the background of the row.
0
 
hieloCommented:
BTW:
#00FF00 is green.

limegreen is more like:
#32cd32
0
 
John500Author Commented:
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
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
John500Author Commented:
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
0
 
hieloCommented:
you need to apply:
style="background-color:#BBBBBB; height:1px;"

to the  that contains the text you want colored:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
</head>
<body>
<table summary=""> 
 <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;">
           $TEXT
	   </td>
  </tr>
</table>
</body>
</html>

Open in new window

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

change the text color => style="color:#32cd32;"
0
 
TunaMaxxCommented:
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

0
 
John500Author Commented:
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!
0
 
hieloCommented:
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

0
 
John500Author Commented:
Thank you sir ....
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now