PDA

View Full Version : Is there a better way to lay this out (a table type of layout)


JimM
Sep 7th, 2007, 06:50 PM
I'm Switching from a table layout to css type layout. This is just an example of the header section, the various columns widths may very (that is why all the short, med, longs have been setup.
This is some code I'm taking over and they tend to use a lot of divs with float lefts to set stuff up on the same line, is this the proper way to do it or is there a better way. This method is being used for both table data and forms.

CSS:


.box_wraper { margin:0 auto; padding: 10px; border: 1px solid #0000CD; }
.box_content {padding: 5px; }
.boxclear { clear: both; margin: 0px auto; font-size: 0px; }
.boxspace { clear: both; margin: 2px auto; font-size: 0px; }

.xxx-short { float: left; width: 5px; }
.xx-short { float: left; width: 10px; }
.x-short { float: left; width: 40px; }
.xmshort { float: left; width: 50px; }
.short { float: left; width: 60px; }
.xsmed { float: left; width: 70px; }
.smed { float: left; float: left; width: 80px; }
.med { float: left; width: 100px; }
.xmed { float: left; width: 125px; }
.xxmed { float: left; width: 150px; }
.long { float: left; width: 150px; }
.x-long { float: left; width: 200px; }
.xxs-long { float: left; width: 235px; }
.xx-long { float: left; width: 250px; }
.xxx-long { float: left; width: 300px; }
.xxxx-long { float: left; width: 350px; }
.xxxxx-long { float: left; width: 400px; }
.xxxxxx-long { float: left; width: 450px; }
.xxxxxxx-long { float: left; width: 500px; }


html:


<div class="box_wraper">
<div class="box_content">
<h1>Header (One Column W/Float LEFT)</h1>
<div><a href="#" class="med">Project</a></div>
<div><a href="#" class="long">Name</a></div>
<div><a href="#" class="short">Status</a></div>
<div><a href="#" class="x-short">Type</a></div>
<div><a href="#" class="med">Live Date</a></div>
<div><a href="#" class="short">Owner</a></div>
</div>
<div class="boxclear">&nbsp;</div>
</div>
<div class="boxspace">&nbsp;</div>

<div class="box_wraper">
<div class="box_content">
<h1>Header (One Column W/Float LEFT)</h1>
<div><a href="#" class="long">Project</a></div>
<div><a href="#" class="x-long">Task</a></div>
<div><a href="#" class="short">Due Date</a></div>
<div><a href="#" class="short">Completed Date</a></div>
</div>
<div class="boxclear">&nbsp;</div>
</div>
<div class="boxspace">&nbsp;</div>



Thanks in advance for any input and/or help
PremiumBlend
Sep 7th, 2007, 06:59 PM
I recommend doing something like this:

http://www.alistapart.com/articles/practicalcss/

It is a lot less CSS and much easier in my mind.
effpeetee
Sep 7th, 2007, 07:30 PM
You may find some help in my signature URL

Frank
JimM
Sep 7th, 2007, 10:42 PM
Thanks guys, both post were a big help
rmedek
Sep 7th, 2007, 11:45 PM
Auuuugh, nononononononononononononono…

Unless I am really wrong here, it looks like you are setting up a table. Besides, you've said this:


This method is being used for both table data and forms.

Table data is DATA, i.e., HTML, i.e., you should use <table> when making a table. I've said this a zillion times but I'll say it again: CSS is not a replacement for tables. CSS is a tool that helps us stop using presentational HTML and instead lets our markup be strictly markup. HTML defines what content is, CSS defines how content looks.

That having been said, try something like this instead:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>this is a table for goodness sake</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.project_summary {
border: solid 1px #0000cd;
margin: 0 auto;
padding: 10px; }
table {
width: 100%; }
th {
font-weight: normal;
text-align: left; }
caption {
text-align: left;
font-weight: bold;
font-size: 2em;
padding: 1em 0 .5em 0; }

th.project { width: 100px; }
th.name { width: 150px; }
th.status { width: 60px; }
th.type { width: 40px; }
th.date { width: 100px; }
</style>
</head>
<body>
<div class="project_summary">
<table summary="project status summary">
<caption>Heading (this is actually a table caption)</caption>
<thead>
<tr>
<th class="project"><a href="#">Project</a></th>
<th class="name"><a href="#">Name</a></th>
<th class="status"><a href="#">Status</a></th>
<th class="type"><a href="#">Type</a></th>
<th class="date"><a href="#">Live Date</a></th>
<th class="owner"><a href="#">Owner</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>Project #1</td>
<td>Project Name</td>
<td>Active</td>
<td>Good</td>
<td>1/2/08</td>
<td>Mr. Bossypants</td>
</tr>
<tr>
<td>Project #2</td>
<td>Project Name</td>
<td>Active</td>
<td>Good</td>
<td>2/2/08</td>
<td>Mr. Clientman</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


See what I'm saying here? I hope this helps…
JimM
Sep 9th, 2007, 06:34 PM
rmedek,
Thanks, the light is on upstairs and things making much more sense.