Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Background colour potential in CSS?? 1

Status
Not open for further replies.

Huitzilopochtli

Programmer
Feb 18, 2002
81
DE
Hello

I think I understand the background colour function in CSS where text may be enclosed by a thin/thick border (a table, in effect).

What I am writing to ask about is if, in CSS, it is possible to have a background colour that changes. For example, is it possible to have, say, text enclosed in a box against a blue background, but with the right hand side of the box (or Web page background) being very light blue, then changing to a darker blue, and then to a dark navy blue on the left hand side of the box?

Thanks

Huitzilopochtli
 
You can't do that to the backgound color of ONE cell in css. You can do it like this, though.

<table cellspacing=&quot;0&quot; style=&quot;s-index:0;border:1 ridge;&quot; width=&quot;100&quot; height=&quot;20&quot;><tr>
<td bgcolor=&quot;navyblue&quot;>&nbsp;</td>
<td bgcolor=&quot;blue&quot;>&nbsp;</td>
<td bgcolor=&quot;lightblue&quot;>&nbsp;</td>
</tr></table>
<span style=&quot;position:relative;bottom:20;left:2;z-index:1;&quot;>some text</span>

Rick It's a pleasure to know that I've helped you. If I have,
please click the link below to let me know. :)
 
>>text enclosed in a box against a blue background, but with the right hand side of the box (or Web page background) being very light blue, then changing to a darker blue, and then to a dark navy blue on the left hand side of the box?

You can do something similar using different settings for box borders:

{
backgroung-color: blue;
border-rigth: solid #99CCFF 10px;
border-left: solid #000099 10px;
}
 
Hello Starway

Do you mean something like this? I can't get it to work.

LaPluma

<html>
<head>

<style type=&quot;text/css&quot;>
div.color
{
background-color: blue;
border-right: solid #99CCFF 10px;
border-left: solid #000099 10px;
}

</style>

</head>
<body>
<table border=&quot;1&quot;><tr><td width=&quot;300&quot; height =&quot;100&quot;></td></tr></table>
</body>
</html>
 
Not exactly.

<html>
<head>
<style type=&quot;text/css&quot;>
div.color1
{
width: 200px;
background-color: blue;
border-right: solid #99CCFF 10px;
border-left: solid #000099 10px;
}
</style>
</head>

<body>
<div class=&quot;color1&quot;>
some content
</div>
</body>
</html>

You don't need any tables at all, and you should assign class name to an element where you want to see the desired effect.

Another thing: always avoid using reserved words! Don't look for additional troubles.
As you see, I changed the name of a class because [tt]color1[/tt] is a reserved word.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top