www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS Troubles

  1. #1
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046

    CSS Troubles

    Hi all,

    Newbie at CSS, But learning

    I need to know how to create a table based layout but with div.

    Table Example;

    Code:
    <table>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    Now how do I do it with Div?

    when I try it just lists everything in one line like this

    Code:
    <table>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td></td>
    </tr>
    </table>
    no new row, how can I get the same look as a table based layout?

    Also the data going into the div table varies in size, some fields might have 6 characters, some 25. so it also needs to look right .

    Any help would be great

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Look at your content and apply the appropriate HTML tags for what that content is first. Second you apply the CSS to those tags to position the content where you want. Only if you can't position everything correctly using the appropriate tags that are already there should you add div tags. So with no content in the table you need no div tags and no CSS.

    It is the CONTENT that is the important part for the conversion away from tables and not the table structure which is absolutely meaningless.
    Stephen

  3. #3
    Join Date
    Sep 2005
    Posts
    597
    I don't know a lot about tables, so I hope this is helpful:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-US">
    <head>
    <title>a cool title</title>
    <meta name="description" content="my content" >
    <meta name="keywords" content="overline, underline, something else" >
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
    <style type="text/css">
    #left {float:left; width:12%; color: #fff; background:#000;text-align:center;border: 1px solid #fff;}
    #center {float:left; width:12%; background: #2cb34a;text-align:center;border: 1px solid #fff;}
    #right {float:left; width:12%; color:#fff; background: #3f07bf;text-align:center;border: 1px solid #fff;}
    #right2 {float:left; width:12%; background: #ccc;text-align:center;border: 1px solid #fff;}
    p {font-size:90%;border: 1px solid #fff;margin:0; padding:5px;}
    </style>
    </head>
    <body>
    <div id="left">
    <p>this is the left div</p>
    <p>this is the left div</p>
    <p>this is the left div</p>
    <p>this is the left div</p>
    </div>
    
    <div id="center">
    <p>this is the center div</p>
    <p>this is the center div</p>
    <p>this is the center div</p>
    <p>this is the center div</p>
    </div>
    
    <div id="right">
    <p>this is the right div</p>
    <p>this is the right div</p>
    <p>this is the right div</p>
    <p>this is the right div</p>
    </div>
    
    <div id="right2">
    <p>this is the right2 div</p>
    <p>this is the right2 div</p>
    <p>this is the right2 div</p>
    <p>this is the right2 div</p>
    </div>
    </body>
    </html>
    Last edited by Kevey; 05-08-2007 at 03:34 PM. Reason: div named incorrectly
    css/xhtml firefox dsl ubuntu

  4. #4
    Join Date
    Sep 2005
    Posts
    597
    Here's another more colorful version...yep, bored at work.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-US">
    <head>
    <title>a cool title</title>
    <meta name="description" content="my content" >
    <meta name="keywords" content="overline, underline, something else" >
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
    <style type="text/css">
    body {background: #c0d435; padding-top:30px;}
    .left {width:198px; float:left;color: #fff; background:#000;text-align:center;border: 1px solid #fff;}
    .center {width:198px;float:left;background: #2cb34a;text-align:center;border: 1px solid #fff;}
    .right {width:198px;float:left;color:#fff; background: #3f07bf;text-align:center;border: 1px solid #fff;}
    .right2 {width:198px;float:left;background: #ccc;text-align:center;border: 1px solid #fff;}
    p {font-size:90%;border: 1px solid #fff;margin:0; padding:5px;}
    h1, h2 {padding:5px;}
    #wrap {
    background :#c0d435; text-align:center; margin: 0 auto; width:800px;
    }
    .header {width:800px; background:red; height:50px; clear:both;}
    </style>
    </head>
    <body>
    <div id="wrap">
    <div class="header"><h1>TABLE TITLE OR WHATEVER</h1></div>
    <div class="left">
    <h2>COLUMN A</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    
    <div class="center">
    <h2>COLUMN B</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    
    <div class="right">
    <h2>COLUMN C</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    
    <div class="right2">
    <h2>COLUMN D</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    
    <div class="header"><h1>HERE IS THE NEXT TABLE</h1></div>
    <div class="left">
    <h2>COLUMN A</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    
    <div class="center">
    <h2>COLUMN B</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    
    <div class="right">
    <h2>COLUMN C</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    
    <div class="right2">
    <h2>COLUMN D</h2>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>
    </div>
    </div>
    </body>
    </html>
    Last edited by Kevey; 05-08-2007 at 04:45 PM.
    css/xhtml firefox dsl ubuntu

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles