Results 1 to 3 of 3

Thread: One TD -- Different colors

  1. #1
    Join Date
    May 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default One TD -- Different colors

    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.

  2. #2
    Join Date
    Sep 2005
    Posts
    882
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Put this code in your header. You can modify the colors.
    HTML Code:
    <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
    HTML Code:
    <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

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Black Roses Burn Brightly
    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:

    Code:
    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 color
    What 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:

    HTML Code:
    <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 color
    That 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

Bookmarks

Posting Permissions

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