SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: CSS Challenge

  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    Gainesville, FL
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Challenge

    Here's one for everybody:

    Recreate, using css only, (all hacks and stuff allowed, just no javascript), the following very simple table layout:

    Code:
    <table style="background-color:black;width:100%">
      <tr>
        <td valign="middle" style="background-color:red;width:33%">
          any amount of text here
        </td>
        <td valign="middle" style="background-color:blue;width:33%">
          any amount of text here
        </td>
        <td valign="middle" style="background-color:green;width:33%">
          any amount of text here
        </td>
      </tr>
    </table>
    A simple table with three equal-width columns of different colors. Text in any column can be longer than any other. Each column's text must be centered vertically.

  2. #2
    . gdape's Avatar
    Join Date
    Jan 2002
    Location
    in the outskirts, and in the fringes
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a number of the three column layouts going round. I quite like this one.

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    Gainesville, FL
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    those are all fine, but the key is the vertically centered text. i'm making this a double dog dare.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hah - you didn't specify a browser so I win

    This works perfectly in firefox/mozilla without any hacks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {
    width:100%;
    background:#ffffcc;
    vertical-align:middle;
    text-align:left;
    position:relative;
    display:table;
    vertical-align:middle;
    }
    #left {
    width:33.3%;
    background:red;
    height:100%;
    display:table-cell;
    vertical-align:middle;
    }
    #middle {
    width:33.3%;
    background:blue;
    height:100%;
    display:table-cell;
    vertical-align:middle;
    }
    #right {
    width:33.3%;
    background:green;
    height:100%;
    display:table-cell;
    vertical-align:middle;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
    <div id="left"> 
    	<p>test</p>
    </div>
    <div id="middle"> 
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    </div>
    <div id="right"> 
    	<p>test</p>
    </div>
    </div>
    </body>
    </html>
    As I mentioned before the problem is with ie not css

    Otherwise I could do it for ie but without the vertically aligned text.

    Similarly to this example:
    http://www.pmob.co.uk/temp/3columnfluid_simple_1.htm

    Paul

  5. #5
    SitePoint Member
    Join Date
    May 2004
    Location
    Gainesville, FL
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh yeah, I completely forgot about display:table type attributes. I meant to say that you can't use these either, since this is the exact same as coding a table. Instead of telling a block to act like a TD in the code, you're giving it a generic name and telling it to act like a TD in the style sheet, but the same restrictions are placed on the content code as far as groupiong, nesting, and order goes. I'm surprised you even suggested this after tediuosly creating all of your columnar layouts without the use of tables, but oh well, you did satisfy my requirements.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    but oh well, you did satisfy my requirements.


    I think if ie had implemented this then it would have helped a lot of layouts. It duplicates the functions of a table with the inherrent drawbacks of a table. After all the html has no tables in it.

    Perhaps I should do the reverse and set a challenge of producing a layout with tables that css can do easily

    Paul

  7. #7
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,322
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Paul O'B
    Perhaps I should do the reverse and set a challenge
    of producing a layout with tables that css can do easily
    if there's any overlapping (you know, absolutely positioned z-index elements),
    then the table layout is screwed
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rudy
    then the table layout is screwed
    Exactly

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ..out?

    Paul,
    It duplicates the functions of a table with the inherrent drawbacks of a table.
    I think you meant "without"? After all, the markup is still clean, structural HTML, while the presentation is separated and flexibly adaptable as is the hallmark of all great CSS based design?
    Regards,
    Ronald.

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ronaldb66
    Paul,
    I think you meant "without"? After all, the markup is still clean, structural HTML, while the presentation is separated and flexibly adaptable as is the hallmark of all great CSS based design?
    The limitation (as Paul put it) is the fact that the source code is in the same order as it appears on screen, unlike layouts that can be done with absolute positioning.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes I meant both with and without (at the same time) As both ronald and Vinnie pointed out above.

    I don't know what I really meant I think I'm going mad


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
  •