PDA

View Full Version : Still designing with tables?


Creative Insanity
09-07-2006, 12:11 AM
Well stop it!

I would be one of the stubbonest buggers around when it comes to excepting change of any nature. If it takes me away from what I know and are use to then I do not change over night (or several years LOL).
But I knew that the way the web world was going I would one day have to drop my loverly table layouts and learn the css way, and after 15+ years of using tables this is not an easy task by any means.

I have read SOO many articles on CSS and div layout and found all of them lacking in a good basic grounding of why something does what it does and why.
That was until I found a tutorial covering several articles on CSS in "Introduction to Designing with CSS" found on this page (http://www.dreamweaverclub.com/forum/viewtopic.php?t=3677) posted by Dom.
This guy is SOO good at explaining in detail in how and why things happen and that is just what I wanted. I am not one to except a tut that just pastes code and says "paste this to get that".. I want to know WHY I get that and how it all works. Well this guy TELLS you that and it is an excellent set of articles.

I would recommend that if you are still using tables, then read.. naa do these articles by this guy and you will see that it does not have to be as hard to change as SOOO many tuts make it out to be.

domedia
09-07-2006, 11:26 AM
Direct link to the article CI is talking about:
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html

This is good news CI. I predict many CSS headaches and doubts in the future for you, I think we all go through them. :) There's many a time when you find yourself with a CSS bugs/inconcistency with browsers and wish to just put a table grid on the page so you get stuff where you want.

I completely agree with your description of the article. It's very thorough and explain things very clearly.

davidj
09-07-2006, 03:46 PM
Baaa Baaaa Baaaa

sheep!

Creative Insanity
09-07-2006, 07:11 PM
Would you like me to send you one over DJ.. you getting lonely there Mister. LOL
Yeah the guy is really good at tuts. I actually (from his tut) done a 2 collum layout yesterday first time! I could NEVER get that to work with all the other tuts I have done.

It would of been easy to download his stuff and cheat.. but then what would I learn or gain from that?? nothing.. so I just used his graphics and deleted all the rest of the downloaded zip file. Just wanted the graphics.

So now today I am going to redesign my own site in css format and see how it all goes. Repeat regions are going to be interesting as only ever done them with tables before.. wonder if they will work with a div. Hmmm

domedia
09-07-2006, 08:32 PM
hey, make sure to post when you're done!

Creative Insanity
09-07-2006, 11:03 PM
Umm on the track to css.. I was REALLY worried about dynamic sites and displaying a repeat region and didn't think layers would do this, or if they did they would float all over the place WRONG!.

Damn easy.. just need to do this:

<div id=content><div id=repeat></div></div>
And place the repeat region on the repeat div.. simple.
The reason I nested the repeat div inside the content div is so it would not float about as it did when it was not nested and if I repeat the content div it applied all the ccs for that ID in the repeats and it looked HORRID!

But doing it the way I did works a treat and I am so getting the hang of this. Looks like 15+ years playing with code and tables is helping somewhat as yet no problem I have not managed to fix. happy happy joy.

Just got one little problem to suss out. That is the first home page text and getting that to display since all my data relies on a catagory.

You surely will see a preview once this last problem is sussed out as then it goes live!
Oh just one thing.. this is what my site looks like (http://www.kenmight.com) at the moment with the table layout and I am duplicating the SAME look with layers and NOT ONE TABLE.

Would I be cheating if I used an iframe? Hmmm I wonder.

Creative Insanity
09-07-2006, 11:37 PM
I am stumped with the starting text from the database.
Here is my page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>kenmight.com ---------------------- = - and he might not - = ----------------------</title>
<link href="css/newstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
<ul>
home (indexcss.php?cat=home)
blog (indexcss.php?cat=blog)
danDont applications (indexcss.php?cat=dda)
danDont (http://www.danDont.com)
cinema secrets (http://www.cinemasecrets.net)[/list]</div>
<div id="content">
<?php do { ?>
<div id="repeat"><?php echo $row_RSdata['heading']; ?> (<?php echo $row_RSdata['url']; ?>)

<?php echo $row_RSdata['txt']; ?></div>
<?php } while ($row_RSdata = mysql_fetch_assoc($RSdata)); ?></div>
<div id="footer">Coding by kenmight.com (http://www.kenmight.com) | Design by Mad Dan (http://www.dandont.com) | Copyright 2006 kenMight.com</div>
</div>
</body>
</html>
Now how on earth would I get the starting text to diplay with this layout?

Creative Insanity
09-08-2006, 01:29 AM
Ok new site (http://www.kenmight.com) is up and running. Just need to recode some of the other features that are still tables, but in time.
Atleast the 2 pages that make up kenmight are now css/div layout.. and I gotta say it was not as hard as I was expecting.. rather easy really.
Just incase you didn't see the code for the old site.. here it is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>kenMight ----------------- and he might not! -----------------</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="730" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#e5fcfc" class="border_control">
<tr>
<td align="right" valign="top"><table width="697" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>

images/header.jpg</td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="26%" align="right"></td>
<td width="63%" align="right" valign="top">home (inc/pages.php?cat=home) | blog (inc/pages.php?cat=blog) | danDont applications (inc/pages.php?cat=dda) | danDont.com (http://www.dandont.com) | graphixfreakz (http://www.graphixfreakz.com) </td>
<td width="9%" align="right"></div></td>
<td width="2%"></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="30%"><table width="100%" border="0" cellpadding="0" cellspacing="4" bgcolor="#FFFFFF" class="border">
<tr>
<td align="center" valign="top" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#FFFFFF" class="txt"></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><iframe src="inc/pages.php?cat=home" width="100%" height="500" frameborder="0" name="content" scrolling="auto"></iframe></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<table width="697" border="0" align="center" cellpadding="0" cellspacing="0" background="images/footer.jpg" bgcolor="#FFFFFF">
<tr>
<td width="212" height="10"></td>
<td width="480" align="right" valign="middle" class="copyr">Coding by kenmight.com | Design by Mad Dan |&copy; Copyright 2006 kenMight.com</td>
<td width="10"></td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>

make sure you look and see how much this has changed in size for EXACTLY the same look.

davidj
09-08-2006, 07:30 AM
Now how on earth would I get the starting text to diplay with this layout?

is this a question? // << not this but ^ this

domedia
09-08-2006, 05:10 PM
Would I be cheating if I used an iframe? Hmmm I wonder. If you just want to be able to have a scrollable area, just add width and height to the div, and set overflow: auto in CSS ;)
http://www.dreamweaverclub.com/css-scroller.php

btw: do you see any difference in the amount of HTML code you need when you design with CSS?

Creative Insanity
09-08-2006, 07:24 PM
Yeah I know about scrolling divs dom and not keen on that now. I cheated on the start text. Since the old table site had 2 pages I just done the same here also.

domedia
09-08-2006, 07:30 PM
If you get time later to change it, a quick way could be to:
-keep that old page, strip out everything outside and including the BODY tags.
-Use a php include to insert the file right into the div scroller.
Now you've got less code, more searchable text for users/searchengines and one step closer to CSS heaven ;)

Creative Insanity
09-08-2006, 10:05 PM
Yeah that is one way to do it I guess.. but the way I did works and that is fine.