Log in

View Full Version : One TD -- Different colors



Black Roses Burn Brightly
09-25-2005, 03:33 AM
I want a table with one giant TD so that it has the big box outline, but the lines aren't separated. However, I want each line to be a certain color... How can I do this? I know it is possible, whether it's by using tables or not; for example: http://www.gamefaqs.com/console/xbox/list_0.html you can see that there is one basic border and each line is a different color...That is how I want my colors to be, I just don't want those colors or that text, that's just an example of what I'm talking about.

blm126
09-25-2005, 01:52 PM
Put this code in your header. You can modify the colors.

<style type="text/css">
#color1 {background-color: #FF0000} /* Color of the first line */
#color2 {background-color: #0000FF} /* Color of the other line */
</style>

Then you wrap your text in div tags. Like this


<div id="color1">Put your text here</div><br /> <br />
<div id="color2">Put other text here</div>
Make sure to add the color1 color2 id to every other line you want colored.
The line breaks are to seperate the text so you can use Paragraphs instead.

-Brady

mwinter
09-25-2005, 10:54 PM
I want a table with one giant TD so that it has the big box outline, but the lines aren't separated.You don't need a table to get a border. Any block level element (div, p, etc.) will do with a bit of CSS:


Add to style sheet:

#container {
border: 2px solid #000000;
}


<div id="container">
...
</div>This will draw a two-pixel thick black border around the content of the div element. There are other border styles, such as inset (sunken), outset (raised), dashed, and others.


However, I want each line to be a certain colorWhat exactly do you mean by 'line'? If you literally mean each line in a paragraph, then that is impossible to do well as CSS cannot address lines. You would have to break the content down into individual elements and address them separately:


<p>
<span>Line 1 ...</span>
<span>Line 2 ...</span>
...
<span>Line n ...</span>
</p>

However, that could result in the text within those elements wrapping prematurely.



I know it is possible, whether it's by using tables or not; for example: http://www.gamefaqs.com/console/xbox/list_0.html you can see that there is one basic border and each line is a different colorThat is a different matter. Those aren't lines as such, but rows of tabular data. As I said, it depends what you mean by 'line'.



Make sure to add the color1 color2 id to every other line you want colored.An id attribute value must be unique within a document. If you want multiple occurances, then use the class attribute, and with better names than 'color1' and 'color2'. The CSS selectors would need to be changed from using a hash (#) to a dot (.).


The line breaks are to seperate the text so you can use Paragraphs instead.Forced line breaks should be used when content dictates a new line, such as in poem or lyric verses. Presentational spacing should be achieved using margins.

Mike