Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Is there a better way to lay this out (a table type of layout)

    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:
    Code:
    .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:
    Code:
    <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

  • #2
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    I recommend doing something like this:

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

    It is a lot less CSS and much easier in my mind.
    My Website: DumpsterDoggy

  • Users who have thanked PremiumBlend for this post:

    JimM (09-07-2007)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You may find some help in my signature URL

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    JimM (09-07-2007)

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks guys, both post were a big help

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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:

    Code:
    <!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…

  • Users who have thanked rmedek for this post:

    JimM (09-09-2007)

  • #6
    New Coder
    Join Date
    Jun 2007
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    rmedek,
    Thanks, the light is on upstairs and things making much more sense.


  •  

    Posting Permissions

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