<html><head><title>Cataclypse ::Rebirth::</title><link rel="StyleSheet" type="text/css" href="rebirth.css" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head> <body> <div id="Center_Table"><table id="V2_Table" cellspacing="0" cellpadding="0"><tr> <td colspan="3" class="banner"></td></tr><tr><td valign="top"><table id="TopSpace" width="150" border="0" cellpadding="0" cellspacing="0"> <tr><td class="topnavbar" valign="middle"><div id="bartitle">::Navigation::</div> </td></tr><tr><td class="NavCell"><div id="NavCellDiv">text here</div></td></tr> <tr><td class="BottomBar"><div id="BottomBarDiv"> </div></td></tr></table>...
To find a bug? or problem? It would be so much easier if the code was 'cleaner' and you could easily look through and find what you're looking for without much hassle.
Pointers:
Use spacing tabs and line breaks to break up your code. Whitespace wont effect how your layout looks. (Except in certain instances in tables from what I know)
Use Comments! Even though you may know what that special code does now you may not remember in the future when you go to upgrade.
Comment Examples:
<!-- This is a html comment, put anything here and it wont show up on the layout--> /* This is a css comment and wont effect your styles */ /* CSS comments can also be used in the "style" part in the head of your html or xhtml document*/
If you use a editor such as dreamweaver, golive, etc you can edit the code directly in the 'code-view' or 'source panel'
Example of clean code:
<html> <head> <title>Cataclypse ::Rebirth::</title> <link rel="StyleSheet" type="text/css" href="rebirth.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="Center_Table"> <table id="V2_Table" cellspacing="0" cellpadding="0"> <!--Banner--> <tr> <td colspan="3" class="banner"></td> </tr> <tr> <td valign="top"> <!-- Navigation --> <table id="TopSpace" width="150" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="topnavbar" valign="middle"> <div id="bartitle"> ::Navigation:: </div> </td> </tr> <tr> <td class="NavCell"> <div id="NavCellDiv"> text etc here </div> </td>...
Much easier to read and understand no?
If you use these tips wisely, and comment often as you code your new layout. You wont spend as much time looking for a problem, and you'll save yourself many headaches in the future.