www.webdeveloper.com
+ Reply to Thread
Results 1 to 4 of 4

Thread: CSS Troubles

  1. 05-08-2007 12:33 PM #1
    Phill Pafford's Avatar
    Phill Pafford
    Phill Pafford is offline May the Source be with U
    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
    Phill Pafford

    Help on the odd topics
    Hackit0sh
    Reply With Quote Reply With Quote
  2. 05-08-2007 02:47 PM #2
    felgall's Avatar
    felgall
    felgall is offline Computer Consultant
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,973
    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
    Reply With Quote Reply With Quote
  3. 05-08-2007 03:11 PM #3
    Kevey's Avatar
    Kevey
    Kevey is offline Know_Nothing
    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
    Reply With Quote Reply With Quote
  4. 05-08-2007 04:28 PM #4
    Kevey's Avatar
    Kevey
    Kevey is offline Know_Nothing
    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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

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

Forum Rules

 HTML5 Development Center



Recent Articles