Tables to Valid XHTML/CSS

Tables to Valid XHTML/CSS
Welcome to my 2nd tutorial. In this one I will be teaching you how to take your current website/layout created with tables, tear it apart, and put it back together using valid XHTML and CSS.
In this tutorial I will be using an example template to teach you, however you can take the principles I teach here and apply them to your own creations.

What You Should Know:
I assume you have a good grasp on how to create a Table-Based layout.
I assume you are fairly confident in your CSS skills.

Well then, let�s get to it.
For this tutorial I have used a template from Zymic.com from which to work from. You can find the original here.
Xerox from Zymic.com is the one who created the original template.

I've edited it down a bit for simplicity, you can get the example we'll be working with throughout this tutorial here.
What we'll do today is tear apart the layout and rebuild it using valid XHTML and Div's

Here�s a bit of an overview of what we�re about to do:
a: Replace all tables with div�s
b: Remove any broken, or old invalid code.
c: Edit remaining code so it fits XHTML transitional standards.
d: Write a CSS file to style the new layout.

Step One: Simplify and Organize
Clean up/organize and comment key parts of your layout!
As you can see I�ve done this for you in the working example.

Step Two: Creating Our Editable File
Open the example�s index.html file with WordPad go to file >> save as� >> and name this file xhtmlindex.html.
This is the one we�ll be editing, leaving the index.html page untouched.

Step Three: Replacing The Head
In the xhtmlindex.html file: Lets start by replacing the code from to
Replace:

<html>
<head>
<title>[Your site name goes here]</title>
<style type="text/css">
a:link {
color : #C1C4C6;
text-decoration : none;
}
a:visited {
color : #C1C4C6;
text-decoration : none;
}
a:active {
color : #C1C4C6;
text-decoration : none;
}
a:hover {
color :#666666;
text-decoration : none;
}
</style>
</head>

With:

<!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" xml:lang="en" lang="en">
<head>
<title>[Your site name goes here]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="working.css" />
</head>

What this will do is tell the browser we�re using XHTML 1�s Transitional Markup. It will also link a style sheet to your new document.

In fact lets create this new style sheet now:
Step Four: New CSS File
Open a 2nd WordPad window.
Go to File >> New >> (select) Text Document >> Click Ok
Go to File >> Save As� >> Browse to the folder your xhtmlindex file is in >> In the File Name box type �working.css� (without the quotes) and click save.

Tada you now have a working (but blank) css file.

Step Five: Body Tag Fix
Examine the body tag.

This background attribute is not valid; so lets define this background image with our new css file. Open your working.css WordPad window, and type:

body{
background-image:url(images/bg.gif"> !important;
text-align: center; /*centers our layout in some browsers*/
}

You can now remove the background attribute from the body tag so it now looks like this:

<body>

Step Six: Creating the Container
Just below the body tag I want you to put:

and just before the closing body tag () I want you to put:

</div>

What this will do is create a container div that will hold the entire layout; In this particular instance we'll be using it to center the layout.
Now in your working.css file add:

#container{
width: 800px; /*The width of our layout*/
margin-left: auto;
margin-right: auto;
/*Margin left and right set to auto center's our layout*/
text-align: left; /*Resets the text alignment*/
}

Explanation: What we've done here is told the container to be as wide as our layout (800px), set the left and right margins to auto as this will center the layout in some browsers, and reset the text-alignment to the left. Because the text align center hack isnt needed inside the layout itself.
To simplify, think of the container as your layout's shell.

Step Seven: The Banner
Lets examine the code for the banner:

Note the border color of 181818 then change this chunk of banner code to:

Much simpler no? Now goto your working.css file and add:

#banner{
width: 800px;
height: 101px;
}
#banner img{
border: 1px solid #181818; /*our border code we noted*/
}

Explanation: What we've done here is deleted the table holding our banner image, fixed up our banner image's tag so that its xhtml compliant. And put it within a div named banner. Which we then in our css, told it to put a border around the image in the color 181818.

Step Eight: Spacer
Lets take a look at the spacer part we have in our xhtmlindex:

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="800" id="AutoNumber2" height="10">
<tr>
<td height="1"></td>
<td height="1"></td>
<td height="1"></td>
</tr>
</table>
</center>
</div>

Now having a look at this code, it suits no real purpose other than to simply put space between our banner and the content. Which can be better taken care of in our CSS file with margins. So delete this entire block of code from your xhtmlindex file.
Now in your working.css file find:

#banner{
width: 800px;
height: 101px;
}

and change it so it looks like this:

#banner{
width: 800px;
height: 101px;
margin-bottom: 10px;
}

This will put a 10px space underneath our banner instead of using that html block.

Now its time to get to the content: but before we do just to be safe here is what the top of your xhtmlindex file should look like so far:

and this is what your working.css file should look like so far:

body{
background-image:url(assets/bg.gif) !important;
text-align: center;
}
#container{
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#banner{
width: 800px;
height: 101px;
margin-bottom: 10px;
}
#banner img{
border: 1px solid #181818;
}

I hope you all are following me so far. Now on to the navigation part:

Step Nine: Navigation (Left)
Find this in your xhtmlindex file:

<div align="center">
<center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="800" id="AutoNumber3" height="522">
<tr>
<td width="144" valign="top" height="522">
<img border="0" src="images/navigation.gif" width="150" height="14"><br>

<table border="1" cellpadding="2" cellspacing="2" style="border-collapse: collapse" bordercolor="#181818" width="150" id="AutoNumber4" height="9">
<tr>
<td width="100%" bgcolor="3D3D3D" height="9" valign="top">
<p align="left"><font face="Verdana" size="1" color="#C1C4C6">
:: <a href="#">Home</a><br>
:: <a href="#">Downloads</a><br>
:: <a href="#">Forum</a><br>
:: <a href="#">Members</a><br>
:: <a href="#">Staff</a><br>
:: <a href="#">Contact us</a><br>
:: <a href="#">Link goes here</a><br>
:: <a href="#">Link goes here</a><br>
:: <a href="#">Link goes here</a><br>
:: <a href="#">Link goes here</a><br>
:: <a href="#">Link goes here</a>
</font></p>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="105%" id="AutoNumber5" height="1">
<tr>
<td width="100%" height="1"><img border="0" src="images/footer.gif" width="150" height="14"><br> </td>
</tr>
</table>
</td>

Take a note of the font tag and its attributes, the bordercolors, and bgcolors.
Change all that to this:

<div id="left">

<div id="nav_top"><img src="images/navigation.gif" width="150" height="14" alt="Navi Top" /></div>

<div id="nav_mid">
:: <a href="#">Home</a><br />
:: <a href="#">Downloads</a><br />
:: <a href="#">Forum</a><br />
:: <a href="#">Members</a><br />
:: <a href="#">Staff</a><br />
:: <a href="#">Contact us</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a><br />
:: <a href="#">Link goes here</a>
</div>

<div id="nav_btm"><img src="images/footer.gif" width="150" height="14" alt="Footer" /></div>
</div>

Explanation:What we've done here is created a div around the entire navigation area div id="left" because we will float this to the left using css. We then took out all of the tables and replaced them with div's, one for the top image, one for the mid (content) and one for the bottom image. Then fixed up the img tags and break tags so they're xhtml compliant.

Now go to your working.css file and add this:

#left{
width: 150px;
float: left;
}
#nav_mid{
background-color: #3d3d3d;
border: 1px solid #181818;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #C1C4C6;
}

Remember the border, background color, and font tags I had you make a note of? Well they're now all defined neatly in our css package.

Step Ten: Content Area
We're about to do nearly the same exact thing with our content area (and the rest of our content) so find this in your xhtmlindex:

<td width="506" valign="top" height="522">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="450" id="AutoNumber12" align="center">
<tr>
<td align="center">
<img border="0" src="images/content-large.gif" width="450" height="14"></td>
</tr>
</table>

<table border="1" cellpadding="2" cellspacing="2" style="border-collapse: collapse" bordercolor="#181818" width="450" id="AutoNumber13" align="center">
<tr>
<td bgcolor="3D3D3D" valign="top">
<font color="#FFFFFF" size="1" face="Verdana">
<b>// EDITING THE TEMPLATE</b><br> <br>
To edit this template please refer to the readme file. It will tell you everything <br>
that you need to know. If you need any help then please, send the email to<br>
the appropriate email listed in the readme. Also the FULL PSD is included in<br>
the .zip so you can fully edit it to your liking.<br>
<b><br>
// COMMENTS</b><br> <br>
Another tech styled template. Dark yet not hard to navigate or read. Designed
for 1024x768 resolution but looks completely fine in 800x600 and 1280x1240. No iframes are used in the page as they aren't optimized for search engine compatibility. Also, the content boxes are all expandable. Meaning no matter how much junk or how many links or pictures you put in there it will keep on going down and down and down! So there is no need to worry about how much content you want in it.<b>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="450" id="AutoNumber14" align="center">
<tr>
<td>
<img border="0" src="images/footer-large.gif" width="450" height="14"></td>
</tr>
</table>

Make a note of the font tags and attributes, the border colors (same) and bgcolors (same).
Change all that to this:

<div id="center">

<div id="content_top"><img src="images/content-large.gif" width="450" height="14" alt="Content Header" /></div>

<div id="content_mid">
<strong>// EDITING THE TEMPLATE</strong><br />
To edit this template please refer to the readme file. It will tell you everything<br />
that you need to know. If you need any help then please, send the email to<br />
the appropriate email listed in the readme. Also the FULL PSD is included in<br />
the .zip so you can fully edit it to your liking.<br />
<strong>// COMMENTS</strong><br />
Another tech styled template. Dark yet not hard to navigate or read. Designed for 1024x768 resolution but looks completely fine in 800x600 and 1280x1240. No iframes are used in the page as they aren't optimized for search engine compatibility. Also, the content boxes are all expandable. Meaning no matter how much junk or how many links or
pictures you put in there it will keep on going down and down and down! So there is no need to worry about how much content you want in it.
</div>

<div id="content_btm"><img src="images/footer-large.gif" width="450" height="14" alt="Large Footer" /></div>
</div>

Explanation: What we've done here is basically the same thing, replaced all tables with div's got rid of old/invalid code and replaced it with valid code, and contained the entire content area in a "center" div which we will also float to the left using CSS here in a sec. (To be right next to our navigation div we just made).

Now go to your working.css file and add this:

#center{
width: 450px;
float: left;
}
#content_mid{
background-color: #3d3d3d;
border: 1px solid #181818;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #ffffff;
}

The background color, border colors, font colors, sizes, for the content are all now defined in our CSS package. We've also defined our #left div with a width, and floated that to the left as well meaning our entire content layer will now be floated to the left alongside our navigation layer. We'll space these out at the end.

Step Eleven: The News Area (Right)
The Same Principle Applies here: I suspect you all know what to do by now. But just in case, find this in your xhtmlindex file:

<td width="150" valign="top" height="522">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="100%" id="AutoNumber16">
<tr>
<td width="100%">
<img border="0" src="images/news.gif" width="150" height="14"></td>
</tr>
</table>

<table border="1" cellpadding="2" cellspacing="2" style="border-collapse: collapse" bordercolor="#181818" width="100%" id="AutoNumber17">
<tr>
<td width="100%" bgcolor="3D3D3D">
<font size="1" face="Verdana" color="#FFFFFF">
The site has oficially <br>
opened! Check out all<br>
of our killer content and <br>
be sure to register in the <br>
forums! I hope you all<br>
like the layout, created<br>
by none other than<br>
<a href="http://www.zymic.com" target="_blank">www.zymic.com</a>!!!!!<br>
<br>
Regards<br>
Admin of [your site]
</font>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#181818" width="100%" id="AutoNumber18">
<tr>
<td width="100%">
<img border="0" src="images/footer.gif" width="150" height="14"><br> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>

Note the font tags/attributes, bgcolors, and border colors and change all that to this:

<div id="right">

<div id="news_top"><img src="images/news.gif" width="150" height="14" alt="News Top" /></div>

<div id="news_mid">
The site has oficially<br />
opened! Check out all<br />
of our killer content and <br />
be sure to register in the <br />
forums! I hope you all<br />
like the layout, created<br />
by none other than<br />
<a href="http://www.zymic.com">www.zymic.com</a>!!!!!<br />
Regards<br />
Admin of [your site]
</div>

<div id="news_btm"><img src="images/footer.gif" width="150" height="14" alt="Footer" /></div>
</div>


Explanation: What we've done here is basically the same thing, replaced all tables with div's got rid of old/invalid code and replaced it with valid code, and contained the entire content area in a "right" div which we will float to the right of the layout using CSS.

In your working.css file add this:
<code>#right{
width: 150px;
float: right;
}
#news_mid{
background-color: #3d3d3d;
border: 1px solid #181818;
font-family: Verdana, arial, sans-serif;
font-size: 10px;
color: #ffffff;
}

Always Save Your Work! If you havent done it yet just save both files now. Friendly reminder.

You may now also look at your xhtmlindex file in your web-browser. You'll be happy to know you just created your first xhtml valid, layout from a table based site. Now to space it out a bit so the content isnt so up close and personal with your navigation.

Step Twelve: Touch-Ups
Margins
Using marins in CSS takes a tiny bit of math. To space the layers effectively I'll tell you how I came up with the solution:
The width of the layout is 800, the width of the left and right boxes (navigation and news) is both 150 so thats 300, and the width of the content is 450.
So 450 + 300 = 750. That gives us 50px to deal with margins: so divide that by two spaces on each side of the content layer and we have 25px left margin, and 25px right margin.
Let me show you how to add that to your css.
In your working.css file find:

#center{
width: 450px;
float: left;
}

and change it so it looks like this:

#center{
width: 450px;
float: left;
margin-left: 25px;
}

and save it. That should space all the layers out pretty evenly.

Link Colors
If you recall, there were link colors already in the head of our html document before we edited it. So go ahead and add them to your working.css stylesheet:

a:link {
color : #C1C4C6;
text-decoration : none;
}
a:visited {
color : #C1C4C6;
text-decoration : none;
}
a:active {
color : #C1C4C6;
text-decoration : none;
}
a:hover {
color :#666666;
text-decoration : none;
}

OVERVIEW
1: Clean up your code and comment key parts.
2: Simplify! Put everything in its own div. Header, content, footer, banner.
3: CSS can be both useful and a time-saver.
4: Put anything you want on the left in your id=left div, anything you want on the right in your id=right div.

Tips
When trying to apply what you've learned here to your own layouts remember a few things.
#1: Close EVERY tag.
#2: Make sure all images have a alt attribute and end in a />
#3: Remove all un-necessary markup.
#4: Run your layout through the validator http://validator.w3.org/ repeatedly and fix anything that comes up as an error.

Final Note
Well I hope you all have learned much from this long tutorial. And I hope many of you will use the techniques and principles taught here to take your table-based layouts and sites and turn them into lean, mean CSS loving machines. :-p (That was so corny I know)
Also if something dont work out just right, just get up brush off and try again. I've also learned to undo everything just before the problem began and see what I did wrong.
I hope you've all enjoyed reading my 2nd tutorial. Good luck with your designs!
Also sidenote: To compare you can see the final version of the layout here you can also view the css here
~Raenef

Tables to Valid XHTML/CSS

0/Post a Comment/Comments

Post a Comment

Sidebar Ads

Root Definition

10 Best Classified Software – WordPress.org, Joomla and OSclass

It area

About Us

Contact Form

Tables to Valid XHTML/CSS

You might like

0/Post a Comment/Comments

Post a Comment

Sidebar Ads

Contact Form