Any takers? I have three sites... [Archive]

whitfield

06-19-2007, 08:47 AM

I read the article on using CSS instead of tables and thought it was completely stupid. CSS is incapable of laying out a page - it simply enhances tables. The slide show I watched posted in the sticky thread said the same thing.

Anyways, I am only concerned with people using IE and Firefox. Please do not give feedback on how my sites may display awfully in a text browser or mobile phone.

Anyways, have at them :)

www.demdev.com
www.mikewhitfield.org
www.battleforgegames.com

Thank you for your time,
Mike Whitfield

LeeU

06-19-2007, 09:43 AM

CSS is incapable of laying out a page - it simply enhances tables.
Mike,

You may not like using CSS for layout but your statement is absolutely false. If you google "css layout tables" you will find several thousand articles that will prove you incorrect. If you're having problems and want to use tables that's one thing but don't make statements that are misleading as if you are an expert in the field.

jasonahoule

06-19-2007, 09:53 AM

I was one of those people who used tables for everything. Take a look at the source of one of your sites and the source of this site (http://theweddingvendor.com) and tell me which one is cleaner, easier to read, and easier to maintain. Nested tables are a NIGHTMARE!

whitfield

06-19-2007, 11:01 AM

Apologies, I thought the sticky thread was the full description of how you could use CSS instead of tables. If it is, then it didn't really do much to prove the point. If you goto the last page on that slide show, you see that they are still using a table( although no nested tables ) with the a few style attributes such as padding.

I will certainly look into this topic further as my web developer friend told me that as much as you all are telling me and I didn't believe him. :P

So, given that point, please ignore my use of nested tables and the code side of things.

I would ask that people please comment on the general presentation of data.

Again, I apologize if I came out of the blue sounding all, "rar, I know everything and you don't!" I didn't intend that.

*edit*

Yes, nested tables ARE a nightmare. :)

You know... I am just going to go ahead and take a guess as to how CSS might accomplish what I am doing on a site like www.demdev.com. You can tell me if I'm right or completely ignore the following comment; either is fine. Using multiple layers... hmmm... layout the presentation in one layer with all your tables/embedded tables and yippity doo da and layout the content in one (depending on the site layout) table cell relatively positioned from the top left. Hmmm. How does caching work on this again? I fail to see how you can cache a single layer to save bandwidth. Perhaps there is some neat-o JavaScript? Perhaps... well, the sticky post said hate for JavaScript links, so that's a no-no. Hmmm... think mike think.

I got it! Images and layout data goes into one layer and then(thank you Google) SSI that into the page on a layer below the content. VOILA! You have a single page cached with layout information. I am a genius. Woohoo!

I am going to apologize once again for trying to sound like I knew what I was talking about. What a horrible way to bounce onto a new forum. Apologies!

TJ111

06-19-2007, 11:05 AM

The only issue I have with your pages is that the one is too wide for 1024/768 reolution (first one I think). Also the use of tables (yuck)

Here's an example off one of my pages of how to use CSS instead of tables.

Here is what a file looks like when I upload it to the website.

<?php include('../header.html'); ?>




<h2>Meetings</h2>

<blockquote>This page contains links to all program meeting minutes. We will attempt to update this information within a week after a program meetings.</blockquote>

<h3>
<a href="meetings_core_team.php">Development Team Meetings</a></h3><br><br>
<p><a href="../DSL_Management/Project%20Status%2020070125.doc">
Program Status Review</a> January 25, 2007</p><bt></bt>
<a href="../DSL_Management/Project%20Status%2020070104.doc">
Program Status Review</a> January 4, 2007</td><br><br>

<h3><a name="b3" id="b3"></a>
<a href="meetings_General.php">
General Program Status
Meetings</a></h3><br><br>
<h6></h6>RSNA 2006 Meeting</h6><br>
<p>The following presentation
was made during the RSNA Executive Planning Session with
Hitachi Medical Corporation, Hitachi Medical Systems of
America and Delta Scan Laboratories</p>
<ul>
<li>
<a href="Executive%20Presentation%20RSNA%2020061128.mht">
Volume CT System - Phase 0 Plan Update</a></li>
</ul>
<br><br>
<h3>
<a href="meetings_design.php">Design Review Meetings</a></h3>
<br><br>
<h6></h6><a href="DSL_Management/Hitachi%20Meeting%20Notes%20Week%20of%2020070109.doc">
Kashiwa Trip Meeting</h6> <p>Vickers / Paynowski
January 9th - Reconstruction Algorithm Review and Software
Analysis of CXR16 System Software</p><br>

<h3>Twinsburg Meeting -
HMC and DSL February 6, 2007</h3><blockquote>
<p>This meeting was held with HMC participants (Mr.
Fujiwara, Mr. Kawano, Mr. Ninamiya, and Mr. Sato) and
DSL participants (Mr. Cochrane, Mr. Heinrich).
Information presented by the participants is included in
the following documents.</p>
</blockquote>

<ul>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/Engineering%20Presentation%20Twinsburg%2020060206.mht">
DSL Engineering Presentation</a></li>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/GVI%20Presentation.mht">GVI
Presentation</a></li>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/Kawano%20Common%20Development%2020070206.pdf">
HMC Concepts on Collaboration</a></li>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/Analogic%20Settlement%20Agreement.pdf">
HMC - Analogic Settlement Agreement Handout</a></li>
</ul>


<?php include('../TemplateTail.shtml'); ?>

Compare that to what that same site looked like before I got this job.

<?php
//Template Settings:
$SettingsPageMod = getlastmod();
?>
<?php include("TemplateHead.html");?>
<table width="80%" border="0" align="center" cellpadding="3" cellspacing="3">
<tr>
<td><img src="Images/Meetings.gif"></td>
</tr>
<tr>
<td class="DescMenu">
This page contains links to all program meeting minutes. We will attempt to update this information within a week after a program meetings.</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="4" cellpadding="2">
<tr>
<td colspan="2">
 </td>
</tr>
<tr>
<td colspan="2">
<h3><a name="b1" id="b1"></a>
<font face="Verdana">
<span class="FontTitle Font14 FontBold Angleline">
<a href="CategoryMeetings_Core_Team.php">Development Team Meetings</a></span></font></h3>
</td>
</tr>
<tr>
<td width="25"> </td>
<td width="100%">
<a href="DSL_Management/Project%20Status%2020070125.doc">
Program Status Review</a> January 25, 2007</td>
</tr>
<tr>
<td width="25"> </td>
<td width="100%">
<a href="DSL_Management/Project%20Status%2020070104.doc">
Program Status Review</a> January 4, 2007</td>
</tr>
<tr>
<td colspan="2">
<h3><a name="b3" id="b3"></a>
<font face="Verdana">
<span class="FontTitle Font14 FontBold Angleline">
<a href="CategoryMeetings_General.php">
<font color="#000066">General Program Status
Meetings</font></a></span></font></h3>
</td>
</tr>
<tr>
<td width="25"> </td>
<td width="100%"><b><font face="Verdana" color="#000066">
RSNA 2006 Meeting</font></b><p>The following presentation
was made during the RSNA Executive Planning Session with
Hitachi Medical Corporation, Hitachi Medical Systems of
America and Delta Scan Laboratories</p>
<ul>
<li>
<a href="Meetings/Executive%20Presentation%20RSNA%2020061128.mht">
Volume CT System - Phase 0 Plan Update</a></li>
</ul>
</td>
</tr>

<tr>
<td colspan="2">
<h3><a name="b4" id="b4"></a>
<font face="Verdana">
<span class="FontTitle Font14 FontBold Angleline">
<a href="CategoryMeetings_Design.php">Design Review Meetings</a></span></font></h3>
</td>
</tr>

<tr>
<td colspan="2">
<b><font face="Verdana">
<a href="DSL_Management/Hitachi%20Meeting%20Notes%20Week%20of%2020070109.doc">
<font color="#000066">Kashiwa Trip Meeting</font></a></font></b> - Vickers / Paynowski
January 9th - Reconstruction Algorithm Review and Software
Analysis of CXR16 System Software</td>
</tr>

<tr>
<td colspan="2">
<font face="Verdana" color="#000066"><b>Twinsburg Meeting -
HMC and DSL February 6, 2007</b></font><blockquote>
<p>This meeting was held with HMC participants (Mr.
Fujiwara, Mr. Kawano, Mr. Ninamiya, and Mr. Sato) and
DSL participants (Mr. Cochrane, Mr. Heinrich).
Information presented by the participants is included in
the following documents.</p>
</blockquote>
</td>
</tr>

<tr>
<td colspan="2">
<ul>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/Engineering%20Presentation%20Twinsburg%2020060206.mht">
DSL Engineering Presentation</a></li>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/GVI%20Presentation.mht">GVI
Presentation</a></li>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/Kawano%20Common%20Development%2020070206.pdf">
HMC Concepts on Collaboration</a></li>
<li>
<p style="margin-top: 0; margin-bottom: 0">
<a href="Meetings/Analogic%20Settlement%20Agreement.pdf">
HMC - Analogic Settlement Agreement Handout</a></li>
</ul>
</td>
</tr>

</table>

<?php include 'group.php'; ?><?php include("TemplateTail.html");?>

Continued below...

TJ111

06-19-2007, 11:08 AM

..continued

Yeah I know it's still sloppy but thats because I mostly just went through and removed the table data. I could have picked a better example I guess, oh well. Here is some cuts of the CSS I use (each #item represents a <div> element in my header file).

#container {
width=1001px;
margin:0px;
line-height:100%;
background-color:#223476;
border-right:1px solid black;
}
#header {
height:112px;
width:1000;
background-color:transparent;
border-right:1px solid black;
clear:left;
}
#left {
clear:left;
float:left;
display:block;
width:142px;
background-color:transparent
border-left:1px solid black;
}
#content {
margin-left:142px;
min-height:800px;
height:auto !important;
height:800px;
border:1px solid black;
background-color:#ffffff;
padding-left:5px;
}
#footer {
padding:0.5em;
clear:left;
background-color:transparent;
}

Here's the basic layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Delta Scan Laboratories</title>
<link rel="stylesheet" href="/go/deltascan.css" title="otherbg">

</head>
<body>

<script type="text/javascript">Menu code crap here</script>

<div id="container">


<div id="header"><a id="top"></a>
<h1>Delta Scan Labs</h1>
</div>


<div id="left">
<a href="/go/logout.php"><p class="bottom">Logout</p></a>
</div>


<div id="content">
<a href="/go/success.php"><img class="icon" src="/go/images/trademark.png"></a>

<h1>Page Content</h1>
<p>Page content</p>

</div>

<div id="footer">
<a href="/home/Misc/archive.html"><p class="link"><i>Archive</i></p></a>
<center><font color="#808080">
Page Content Last Updated:
<?php echo date ("F d Y g:i:s a", getlastmod()); ?>
</font></center>
<br>
<hr>
<p>Questions or problems regarding this web site should be directed to <a href="webmaster@deltascanlabs.com">webmaster</a>.<br>
Copyright © 2007 Delta Scan Labs. -
<a href="/TermsAndConditions.php">Terms and Conditions of Use</a> - All rights reserved.<br></p>
</div>
</div>
</body>
</html>

Click here to see an example (http://deltascanlabs.com/go/demo.bmp)
Post is probably long but maybe it'll help you get the idea. If your like me you'll figure it out alot faster examples and trial&error then just reading some tutorial online. I'm impressed with how nice your pages are for someone using tables. Did you do any of the graphics/ flash yourself?

whitfield

06-19-2007, 11:14 AM

Thank you TJ111!

Why yes, I did completely everything myself. :)

Anyways, just as you posted trying to save me, I think I already saved myself( read edited post above ). :)

My eyes are opened! Blessed is the world that is CSS-driven! Hallelujah!

And yes, I think the site just falls short of displaying at 1024x768. That can probably be easily fixed, however. Just a little embedded embedded table editing here... a little riff raff there, and ooo ooo... That'll do donkey. :)

Thank you for your feedback/effort to help! Happy Mike! ZING! :D

TJ111

06-19-2007, 11:33 AM

No problem dude, I added a little more in so you could see. If you want to see the complete CSS I can link to it too. Sorry I can't just link to the page but it's still in the design phase and its all protected until I'm sure my site security is up to par (except the /go directory).

LeeU

06-19-2007, 05:01 PM

Ah, another convert! Glad you were willing to learn.