PSD to XHTML & CSS Example

Jason Heidecker

<div style="float:right; width:300px; margin-left:40px; margin-bottom:25px;"><a href="http://cdn.shopify.com/s/files/1/0029/6992/assets/01-home.jpg?1266265029" rel="lightbox[images]" title="Photoshop Homepage Design" class="nobg"><img src="http://cdn.shopify.com/s/files/1/0029/6992/assets/01-home.jpg?1266265029" width="200px" /></a></div> <p>The image on the right is a screenshot of a Photoshop design for an e-commerce site (click to enlarge). A relatively complicated layout, with categories, menu items, and products that need to be pulled from a database. </p> <p>The first text box below shows the original code produced for the design (NOT produced by Template Harvest). </p> <p><strong>What's wrong with the original markup:</strong></p> <ul> <li>11 pages long.</li> <li>Difficult to read.</li> <li>Unusable for e-commerce site.</li> <li>Overuse of tables for layout.</li> </ul> <p>So the customer came to us to redo his XHTML markup and CSS. The text box at the bottom shows our code. </p> <p><strong>Improvements we made:</strong></p> <ul> <li>Only 4 pages long.</li> <li>Categories, navigation menu items, and product boxes in self-contained units.</li> <li>100% database scripting friendly.</li> <li>Table-less structure.</li> <li>W3C Standards-Compliant XHTML 1.0 Transitional markup.</li> <li>W3C Standards-Compliant CSS 2.1</li> </ul> <p>Much better! The resulting markup and CSS we wrote produced a webpage that looked exactly the same as the Photoshop design, passed W3C Standards validation, and looked identical in all major web browsers.</p> <h3>Original Markup (11 pages)</h3> <textarea style="width:620px; height:300px;" wrap="off"> <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html dir="LTR" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>osCommerce</title> <script type="text/javascript" src="iepngfix_tilebg.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> .ie6_png {behavior: url("iepngfix.htc") } .ie6_png img {behavior: url("iepngfix.htc") } .ie6_png input {behavior: url("iepngfix.htc") } </style>  </head> <body>    <table cellpadding="0" cellspacing="0" border="0" align="center" class="width_table"> <tr><td class="width_td"> <div class="wrapper_header_t"> <div class="wrapper_header_b"> <div class="wrapper_header_tl"> <div class="wrapper_header_tr"> <div class="wrapper_header_bl"> <div class="wrapper_header_"> <div class="wrapper_header_br"> <div class="width_100"> <table cellpadding="0" cellspacing="0" border="0" align="center" style="height:100%;"> <tr><td class="row_1"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="header_languages"> <table border="0" cellspacing="0" cellpadding="0" align="right"> <tr><td style="width:100%;"><a href="#"><img src="images/icon.gif" border="0" alt="English" title=" English " width="26" height="17"></a><img src="images/spacer.gif" border="0" alt="" width="5" height="1"><a href="#"><img src="images/icon2.gif" border="0" alt="Deutsch" title=" Deutsch " width="26" height="17"></a><img src="images/spacer.gif" border="0" alt="" width="5" height="1"><a href="#"><img src="images/icon3.gif" border="0" alt="Espanol" title=" Espanol " width="26" height="17"></a></td> </tr> </table> </td></tr> <tr><td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td class="logo"><a href="#"><img src="images/logo.gif" border="0" alt="" width="296" height="40"></a></td> <td class="header"> <table cellpadding="0" cellspacing="0" border="0" style="width:250px;"> <tr><td style="padding:8px 0px 0px 12px;"> <table cellpadding="0" cellspacing="0" border="0" align="left" style="width:223px;"> <tr> <td class="z1"><strong>Shopping Cart:</strong><span> now in your cart </span>  <a href="#"><b>0</b> items</a></td> </tr> </table> </td></tr> <tr><td style="padding:0px 0px 0px 12px;"> <table border="0" cellspacing="0" cellpadding="0" align="left" style="width:223px;"> <tr><td>Currencies:  </td><td style="width:100%;height:28px;"><form name="currencies" method="get"><select name="currency" onChange="this.form.submit();" class="select"><option value="USD" SELECTED>US Dollar</option><option value="EUR">Euro</option></select><input type="hidden" name="language" value="en"></form></td> </tr> </table> </td></tr> </table> </td> </tr> </table> </td></tr> <tr><td> <table cellpadding="0" cellspacing="0" border="0" class="menu"> <tr><td class="td"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <tr> <td id="over_m1" onMouseOut="this.id='over_m1';" onMouseOver="this.id='over_m1';" onClick="document.location='#'" nowrap="nowrap"> Homepage</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m2" onMouseOut="this.id='m2';" onMouseOver="this.id='over_m2';" onClick="document.location='#'">What's New?</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m3" onMouseOut="this.id='m3';" onMouseOver="this.id='over_m3';" onClick="document.location='#'">Specials</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m4" onMouseOut="this.id='m4';" onMouseOver="this.id='over_m4';" onClick="document.location='#'" nowrap="nowrap">Create an Account</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m6" onMouseOut="this.id='m6';" onMouseOver="this.id='over_m6';" onClick="document.location='#'">Contact Us</td> </tr> </table> </td> <td style="padding:4px 0px 0px 50px;"> <form name="search" method="get"> <table border="0" cellspacing="0" cellpadding="0" align="right" style="width:252px;"> <tr> <td style="width:100%;"><input type=text name="keywords" class="go" value="Search..."></td> <td style="padding:0px 3px 0px 6px;"><input type="image" src="images/button_search_prod.gif" border="0" alt=""></td> </tr> </table></form> </td> </tr> </table> </td></tr> </table> </td></tr> <tr><td class="row_2">  <table border="0" class="main_table" cellspacing="0" cellpadding="0"> <tr> <td class="box_width_td_left"><table border="0" class="box_width_left" cellspacing="0" cellpadding="0">   <tr> <td> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxHeading_table"> <tr> <td><img src="images/corner_top_left.gif" border="0" alt="" width="5" height="36"></td> <td class="infoBoxHeading_td">Manufacturers</td> <td><img src="images/corner_top_right.gif" border="0" alt="" width="5" height="35"></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBox_table"> <tr> <td class="infoBox_td"><table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxContents_table"> <tr> <td class="boxText"><ul class="manufacturers"><li class="bg_list_un"><a href="#">Barebones</a></li><li class="bg_list"><a href="#">Computer System..</a></li><li class="bg_list"><a href="#">Laptops ? Noteb..</a></li><li class="bg_list"><a href="#">Motherboard Com..</a></li><li class="bg_list"><a href="#">MP3 Players</a></li></ul></td> </tr> </table> </td> </tr> </table> </td> </tr>   <tr> <td> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxHeading_table"> <tr> <td><img src="images/corner_top_left.gif" border="0" alt="" width="5" height="36"></td> <td class="infoBoxHeading_td">Categories</td> <td><img src="images/corner_top_right.gif" border="0" alt="" width="5" height="35"></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBox_table"> <tr> <td class="infoBox_td"><table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxContents_table"> <tr> <td class="boxText"><ul class="categories"><li class="bg_list_un"><a href="#">Accessories</a></li><li class="bg_list"><a href="#">Cables-></a></li><li class="bg_list"><a href="#">Cases</a></li><li class="bg_list"><a href="#">CD ? DVD Drives</a></li><li class="bg_list"><a href="#">Clearance</a></li><li class="bg_list"><a href="#">Controller Cards</a></li><li class="bg_list"><a href="#">CPUs (Processors)</a></li><li class="bg_list"><a href="#">Drive Enclosures</a></li><li class="bg_list"><a href="#">Fans (Cooling)</a></li><li class="bg_list"><a href="#">Floppy Drives</a></li><li class="bg_list"><a href="#">Games & Gift Ideas</a></li><li class="bg_list"><a href="#">Hard Drives</a></li><li class="bg_list"><a href="#">Keyboards ? Mice</a></li><li class="bg_list"><a href="#">Memory</a></li><li class="bg_list"><a href="#">Monitors</a></li><li class="bg_list"><a href="#">Motherboards</a></li><li class="bg_list"><a href="#">Networking ? Modems</a></li><li class="bg_list"><a href="#">Power Supplies</a></li><li class="bg_list"><a href="#">Printers ? Scanners</a></li><li class="bg_list"><a href="#">Software ? OS</a></li><li class="bg_list"><a href="#">Sound ? Speakers</a></li><li class="bg_list"><a href="#">USB Hubs</a></li><li class="bg_list"><a href="#">Video Cards</a></li><li class="bg_list"><a href="#">Webcams ? Cameras</a></li><li class="bg_list"><a href="#">Wholesale</a></li></ul></td> </tr> </table> </td> </tr> </table> </td> </tr>   </table></td>  <td class="content_width_td"> <table cellpadding="0" cellspacing="0" border="0"><tr><td class="banner_02"><a href="#" target="_blank"><img src="images/banner_02.jpg" border="0" alt="Banner2" title=" Banner2 " width="676" height="343"></a></td></tr></table> <div class="content_tl"> <div class="content_tr"> <div class="content_bl"> <div class="content_br"> <div class="width_100">    <table border="0" width="100%" cellspacing="0" cellpadding="0" class="cont_heading_table"> <tr> <td><img src="images/cont_corner_top_left.gif" border="0" alt="" width="5" height="36"></td> <td class="cont_heading_td">What's New Here?</td> <td><img src="images/cont_corner_top_right.gif" border="0" alt="" width="5" height="36"></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="table"><tr><td class="padd_3">  <table border="0" width="" cellspacing="0" cellpadding="0"> <tr> <td class="tableBox_output_td main"><table border="0" width="" cellspacing="0" cellpadding="0"> <tr> <td align="left" style="width:33%;"> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">Real Power Pro 1000W</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/174.jpg" border="0" alt="Real Power Pro 1000W" title=" Real Power Pro 1000W " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$42.00</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">GeForce 8800 GT</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/173.jpg" border="0" alt="GeForce 8800 GT" title=" GeForce 8800 GT " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$49.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">Seagate 1TB 7200rpm 32MB ST31000340NS SATA</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/172.jpg" border="0" alt="Seagate 1TB 7200rpm 32MB ST31000340NS SATA" title=" Seagate 1TB 7200rpm 32MB ST31000340NS SATA " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$499.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> </tr> <tr><td class="prod_line_x padd_gg" colspan="5"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td></tr> <tr> <td align="left" style="width:33%;"><img src="images/spacer.gif" border="0" alt="" width="1" height="4"><br /> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">iLife ’09</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/171.jpg" border="0" alt="iLife ’09" title=" iLife ’09 " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$299.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"><img src="images/spacer.gif" border="0" alt="" width="1" height="4"><br /> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">VMware Fusion 2</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/170.jpg" border="0" alt="VMware Fusion 2" title=" VMware Fusion 2 " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$29.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"><img src="images/spacer.gif" border="0" alt="" width="1" height="4"><br /> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">Antec Nine Hundred</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/169.jpg" border="0" alt="Antec Nine Hundred" title=" Antec Nine Hundred " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$29.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> </tr> </table> </td> </tr> </table>  </td></tr></table> </div> </div> </div> </div> </div> </td>  <td class="box_width_td_right"><table border="0" class="box_width_right" cellspacing="0" cellpadding="0">   </table></td> </tr> </table>   </td></tr> <tr><td class="row_3"> <div class="content_tl"> <div class="content_tr"> <div class="content_bl"> <div class="content_br"> <div class="width_100"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="footer footer2_td"><span><a href="#">Specials</a>    |    <a href="#">Advanced Search</a>    |    <a href="#">Reviews</a>    |    <a href="#">Create an Account</a>    |    <a href="#">Log In</a></span></td></tr> </table> </div> </div> </div> </div> </div> <table cellpadding="0" cellspacing="0" border="0" class="footer footer_td"> <tr> <td style="padding:0px 0px 0px 20px;width:50%;">Copyright © 2009 <a href="#">osCommerce</a> </td> <td style="padding:0px 20px 0px 0px;text-align:right;"><b><a href="#">Privacy Notice</a>    |    <a href="#">Conditions of Use</a></b></td> </tr> </table> </td></tr></table> </div> </div> </div> </div> </div> </div> </div> </td></tr></table>  </body> </html> </textarea> <h3>Template Harvest Rework (Only 4 pages and much easier to read.)</h3> <textarea style="width:620px; height:300px; overflow:scroll;" wrap="off"> <!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>Computer Hardware Store</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrap"> <div class="flag"> <div class="flaginfo"> <a href="#"><img src="images/flag1.gif" alt="" /></a> <a href="#"><img src="images/flag2.gif" alt="" /></a> <a href="#"><img src="images/flag3.gif" alt="" /></a> </div> </div> <div class="header"> <div class="logo"><img src="images/logo.gif" alt="" /></div> <div class="cartarear"> <div class="cartitem"> <strong>Shopping cart:</strong> <img src="images/carticon.gif" alt="" /> </div> <p>now in your cart <span>0</span> items</p> <label>Currencies:</label> <select name="currency"> <option value="- US Dollar -">- US Dollar -</option> </select> </div> </div> <div class="navigation"> <div class="navlist"> <div class="topnav"> <ul> <li class="first"><a href="#">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Product info</a></li> <li><a href="#">My cart</a></li> <li><a href="#">Pop up</a></li> </ul> </div> <div class="search"> <input name="" type="text" onfocus="if(this.value=='- Search -')this.value=''" onblur="if(this.value=='')this.value='- Search -'" value="- Search -" /> <input type="image" src="images/go.gif" class="go" /> </div> </div> </div> <div class="maincontent"> <div class="leftbar"> <div class="title"> <h4>Systems & Laptops:</h4> </div> <div class="category"> <ul> <li><a href="#">Barebones</a></li> <li><a href="#">Computer Systems</a></li> <li><a href="#">Laptops / Notebooks</a></li> <li><a href="#">Motherboard Combos</a></li> <li><a href="#">MP3 Players</a></li> </ul> </div> <div class="title"> <h4>Computer Parts:</h4> </div> <div class="category"> <ul> <li><a href="#">Accessories</a></li> <li><a href="#">Cables</a></li> <li><a href="#">Cases</a></li> <li><a href="#">CD / DVD Drives</a></li> <li><a href="#">Clearance</a></li> <li><a href="#">Controller Cards</a></li> <li><a href="#">CPUs (Processors)</a></li> <li><a href="#">Drive Enclosures</a></li> <li><a href="#">Fans (Cooling)</a></li> <li><a href="#">Floppy Drives</a></li> <li><a href="#">Games & Gift Ideas</a></li> <li><a href="#">Hard Drives</a></li> <li><a href="#">Keyboards / Mice</a></li> <li><a href="#">Memory</a></li> <li><a href="#">Monitors</a></li> <li><a href="#">Motherboards</a></li> <li><a href="#">Networking / Modems</a></li> <li><a href="#">Power Supplies</a></li> <li><a href="#">Printers / Scanners</a></li> <li><a href="#">Software / OS</a></li> <li><a href="#">Sound / Speakers</a></li> <li><a href="#">USB Hubs</a></li> <li><a href="#">Video Cards</a></li> <li><a href="#">Webcams / Cameras</a></li> <li><a href="#">Wholesale</a></li> </ul> </div> <div class="categorybottom"></div> </div> <div class="rightbar"> <div class="banner"><img src="images/banner.gif" alt="" /></div> <div class="details"> <a href="#"><img src="images/detail.gif" alt="" /></a> </div> <div class="populartitle"> <h3>Popular products</h3> </div> <div class="product"> <div class="productbox new"> <h4>Real Power Pro 1000W</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb1.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$235.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>GeForce 8800 GT</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb2.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$279.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>Seagate 1TB 7200rpm 32MB ST31000340NS SATA</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb3.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$229.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>iLife ’09</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb4.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$79.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>VMware Fusion 2</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb5.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$129.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>Antec Nine Hundred</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb6.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$159.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> </div> <div class="productbottom"></div> <div class="bottomnav"> <div class="left"></div> <div class="bottomnavdata"> <p><a href="#">Home</a>|<a href="#">New products</a>|<a href="#">Special</a>|<a href="#">My account</a>|<a href="#">Contacts</a></p> </div> <div class="right"></div> </div> </div> </div> <div class="cls"></div> <div class="footer"> <label><a href="#">Privacy Notice</a> | <a href="#">Conditions of Use</a></label> <span>Copyright © 2009 Computer Hardware Store</span> </div> </div> </body> </html> </textarea>

2009-07-23T19:16:11-07:00

psd-to-xhtml-css-example 3410502

2009-07-23T19:16:11-07:00

296992

PSD to XHTML & CSS Example 2010-02-22T12:29:36-08:00 <notextile> <div style="float:right; width:300px; margin-left:40px; margin-bottom:25px;"><a href="http://cdn.shopify.com/s/files/1/0029/6992/assets/01-home.jpg?1266265029" rel="lightbox[images]" title="Photoshop Homepage Design" class="nobg"><img src="http://cdn.shopify.com/s/files/1/0029/6992/assets/01-home.jpg?1266265029" width="200px" /></a></div> <p>The image on the right is a screenshot of a Photoshop design for an e-commerce site (click to enlarge). A relatively complicated layout, with categories, menu items, and products that need to be pulled from a database. </p> <p>The first text box below shows the original code produced for the design (NOT produced by Template Harvest). </p> <p><strong>What's wrong with the original markup:</strong></p> <ul> <li>11 pages long.</li> <li>Difficult to read.</li> <li>Unusable for e-commerce site.</li> <li>Overuse of tables for layout.</li> </ul> <p>So the customer came to us to redo his XHTML markup and CSS. The text box at the bottom shows our code. </p> <p><strong>Improvements we made:</strong></p> <ul> <li>Only 4 pages long.</li> <li>Categories, navigation menu items, and product boxes in self-contained units.</li> <li>100% database scripting friendly.</li> <li>Table-less structure.</li> <li>W3C Standards-Compliant XHTML 1.0 Transitional markup.</li> <li>W3C Standards-Compliant CSS 2.1</li> </ul> <p>Much better! The resulting markup and CSS we wrote produced a webpage that looked exactly the same as the Photoshop design, passed W3C Standards validation, and looked identical in all major web browsers.</p> <h3>Original Markup (11 pages)</h3> <textarea style="width:620px; height:300px;" wrap="off"> <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html dir="LTR" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>osCommerce</title> <script type="text/javascript" src="iepngfix_tilebg.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> .ie6_png {behavior: url("iepngfix.htc") } .ie6_png img {behavior: url("iepngfix.htc") } .ie6_png input {behavior: url("iepngfix.htc") } </style>  </head> <body>    <table cellpadding="0" cellspacing="0" border="0" align="center" class="width_table"> <tr><td class="width_td"> <div class="wrapper_header_t"> <div class="wrapper_header_b"> <div class="wrapper_header_tl"> <div class="wrapper_header_tr"> <div class="wrapper_header_bl"> <div class="wrapper_header_"> <div class="wrapper_header_br"> <div class="width_100"> <table cellpadding="0" cellspacing="0" border="0" align="center" style="height:100%;"> <tr><td class="row_1"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="header_languages"> <table border="0" cellspacing="0" cellpadding="0" align="right"> <tr><td style="width:100%;"><a href="#"><img src="images/icon.gif" border="0" alt="English" title=" English " width="26" height="17"></a><img src="images/spacer.gif" border="0" alt="" width="5" height="1"><a href="#"><img src="images/icon2.gif" border="0" alt="Deutsch" title=" Deutsch " width="26" height="17"></a><img src="images/spacer.gif" border="0" alt="" width="5" height="1"><a href="#"><img src="images/icon3.gif" border="0" alt="Espanol" title=" Espanol " width="26" height="17"></a></td> </tr> </table> </td></tr> <tr><td> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td class="logo"><a href="#"><img src="images/logo.gif" border="0" alt="" width="296" height="40"></a></td> <td class="header"> <table cellpadding="0" cellspacing="0" border="0" style="width:250px;"> <tr><td style="padding:8px 0px 0px 12px;"> <table cellpadding="0" cellspacing="0" border="0" align="left" style="width:223px;"> <tr> <td class="z1"><strong>Shopping Cart:</strong><span> now in your cart </span>  <a href="#"><b>0</b> items</a></td> </tr> </table> </td></tr> <tr><td style="padding:0px 0px 0px 12px;"> <table border="0" cellspacing="0" cellpadding="0" align="left" style="width:223px;"> <tr><td>Currencies:  </td><td style="width:100%;height:28px;"><form name="currencies" method="get"><select name="currency" onChange="this.form.submit();" class="select"><option value="USD" SELECTED>US Dollar</option><option value="EUR">Euro</option></select><input type="hidden" name="language" value="en"></form></td> </tr> </table> </td></tr> </table> </td> </tr> </table> </td></tr> <tr><td> <table cellpadding="0" cellspacing="0" border="0" class="menu"> <tr><td class="td"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <tr> <td id="over_m1" onMouseOut="this.id='over_m1';" onMouseOver="this.id='over_m1';" onClick="document.location='#'" nowrap="nowrap"> Homepage</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m2" onMouseOut="this.id='m2';" onMouseOver="this.id='over_m2';" onClick="document.location='#'">What's New?</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m3" onMouseOut="this.id='m3';" onMouseOver="this.id='over_m3';" onClick="document.location='#'">Specials</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m4" onMouseOut="this.id='m4';" onMouseOver="this.id='over_m4';" onClick="document.location='#'" nowrap="nowrap">Create an Account</td> <td class="menu_separator"><img src="images/menu_separator.gif" border="0" alt="" width="1" height="12"></td> <td id="m6" onMouseOut="this.id='m6';" onMouseOver="this.id='over_m6';" onClick="document.location='#'">Contact Us</td> </tr> </table> </td> <td style="padding:4px 0px 0px 50px;"> <form name="search" method="get"> <table border="0" cellspacing="0" cellpadding="0" align="right" style="width:252px;"> <tr> <td style="width:100%;"><input type=text name="keywords" class="go" value="Search..."></td> <td style="padding:0px 3px 0px 6px;"><input type="image" src="images/button_search_prod.gif" border="0" alt=""></td> </tr> </table></form> </td> </tr> </table> </td></tr> </table> </td></tr> <tr><td class="row_2">  <table border="0" class="main_table" cellspacing="0" cellpadding="0"> <tr> <td class="box_width_td_left"><table border="0" class="box_width_left" cellspacing="0" cellpadding="0">   <tr> <td> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxHeading_table"> <tr> <td><img src="images/corner_top_left.gif" border="0" alt="" width="5" height="36"></td> <td class="infoBoxHeading_td">Manufacturers</td> <td><img src="images/corner_top_right.gif" border="0" alt="" width="5" height="35"></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBox_table"> <tr> <td class="infoBox_td"><table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxContents_table"> <tr> <td class="boxText"><ul class="manufacturers"><li class="bg_list_un"><a href="#">Barebones</a></li><li class="bg_list"><a href="#">Computer System..</a></li><li class="bg_list"><a href="#">Laptops ? Noteb..</a></li><li class="bg_list"><a href="#">Motherboard Com..</a></li><li class="bg_list"><a href="#">MP3 Players</a></li></ul></td> </tr> </table> </td> </tr> </table> </td> </tr>   <tr> <td> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxHeading_table"> <tr> <td><img src="images/corner_top_left.gif" border="0" alt="" width="5" height="36"></td> <td class="infoBoxHeading_td">Categories</td> <td><img src="images/corner_top_right.gif" border="0" alt="" width="5" height="35"></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBox_table"> <tr> <td class="infoBox_td"><table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBoxContents_table"> <tr> <td class="boxText"><ul class="categories"><li class="bg_list_un"><a href="#">Accessories</a></li><li class="bg_list"><a href="#">Cables-></a></li><li class="bg_list"><a href="#">Cases</a></li><li class="bg_list"><a href="#">CD ? DVD Drives</a></li><li class="bg_list"><a href="#">Clearance</a></li><li class="bg_list"><a href="#">Controller Cards</a></li><li class="bg_list"><a href="#">CPUs (Processors)</a></li><li class="bg_list"><a href="#">Drive Enclosures</a></li><li class="bg_list"><a href="#">Fans (Cooling)</a></li><li class="bg_list"><a href="#">Floppy Drives</a></li><li class="bg_list"><a href="#">Games & Gift Ideas</a></li><li class="bg_list"><a href="#">Hard Drives</a></li><li class="bg_list"><a href="#">Keyboards ? Mice</a></li><li class="bg_list"><a href="#">Memory</a></li><li class="bg_list"><a href="#">Monitors</a></li><li class="bg_list"><a href="#">Motherboards</a></li><li class="bg_list"><a href="#">Networking ? Modems</a></li><li class="bg_list"><a href="#">Power Supplies</a></li><li class="bg_list"><a href="#">Printers ? Scanners</a></li><li class="bg_list"><a href="#">Software ? OS</a></li><li class="bg_list"><a href="#">Sound ? Speakers</a></li><li class="bg_list"><a href="#">USB Hubs</a></li><li class="bg_list"><a href="#">Video Cards</a></li><li class="bg_list"><a href="#">Webcams ? Cameras</a></li><li class="bg_list"><a href="#">Wholesale</a></li></ul></td> </tr> </table> </td> </tr> </table> </td> </tr>   </table></td>  <td class="content_width_td"> <table cellpadding="0" cellspacing="0" border="0"><tr><td class="banner_02"><a href="#" target="_blank"><img src="images/banner_02.jpg" border="0" alt="Banner2" title=" Banner2 " width="676" height="343"></a></td></tr></table> <div class="content_tl"> <div class="content_tr"> <div class="content_bl"> <div class="content_br"> <div class="width_100">    <table border="0" width="100%" cellspacing="0" cellpadding="0" class="cont_heading_table"> <tr> <td><img src="images/cont_corner_top_left.gif" border="0" alt="" width="5" height="36"></td> <td class="cont_heading_td">What's New Here?</td> <td><img src="images/cont_corner_top_right.gif" border="0" alt="" width="5" height="36"></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="table"><tr><td class="padd_3">  <table border="0" width="" cellspacing="0" cellpadding="0"> <tr> <td class="tableBox_output_td main"><table border="0" width="" cellspacing="0" cellpadding="0"> <tr> <td align="left" style="width:33%;"> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">Real Power Pro 1000W</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/174.jpg" border="0" alt="Real Power Pro 1000W" title=" Real Power Pro 1000W " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$42.00</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">GeForce 8800 GT</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/173.jpg" border="0" alt="GeForce 8800 GT" title=" GeForce 8800 GT " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$49.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">Seagate 1TB 7200rpm 32MB ST31000340NS SATA</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/172.jpg" border="0" alt="Seagate 1TB 7200rpm 32MB ST31000340NS SATA" title=" Seagate 1TB 7200rpm 32MB ST31000340NS SATA " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$499.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> </tr> <tr><td class="prod_line_x padd_gg" colspan="5"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td></tr> <tr> <td align="left" style="width:33%;"><img src="images/spacer.gif" border="0" alt="" width="1" height="4"><br /> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">iLife ’09</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/171.jpg" border="0" alt="iLife ’09" title=" iLife ’09 " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$299.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"><img src="images/spacer.gif" border="0" alt="" width="1" height="4"><br /> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">VMware Fusion 2</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/170.jpg" border="0" alt="VMware Fusion 2" title=" VMware Fusion 2 " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$29.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> <td class="prod_line_y padd_vv"><img src="images/spacer.gif" border="0" alt="" width="1" height="1"></td> <td align="left" style="width:33%;"><img src="images/spacer.gif" border="0" alt="" width="1" height="4"><br /> <table cellpadding="0" cellspacing="0" border="0" class="prod2_table"> <tr><td class="prod2_td"> <table cellpadding="0" cellspacing="0" border="0" style="background:url(images/new.gif) 100% 0px no-repeat;"> <tr><td class="name name2_padd"><a href="#">Antec Nine Hundred</a></td></tr> <tr><td class="pic2_padd"> <table cellpadding="0" cellspacing="0" border="0" align="center" class="pic2_table"> <tr><td class="pic2_td"><a href="#"><img src="images/169.jpg" border="0" alt="Antec Nine Hundred" title=" Antec Nine Hundred " width="133" height="133"></a></td></tr> </table></td></tr> <tr><td style="text-align:right;padding:0px 10px 0px 0px;"><a href="#"><img src="images/button_details.gif" border="0" alt="" width="60" height="28" class="btn1"></a></td></tr> </table> <table cellpadding="0" cellspacing="0" border="0" class="corner_bg"> <tr><td class="corner_bl"> <table cellpadding="0" cellspacing="0" border="0" class="corner_br"> <tr><td class="corner_padd"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="price2_padd"><span class="productSpecialPrice">$29.99</span></td> <td class="button2_padd"><a href="#"><img src="images/button_add_to_cart1.gif" border="0" alt="" width="82" height="28" class="btn2"></a></td></tr> </table> </td></tr> </table> </td></tr> </table> </td></tr> </table></td> </tr> </table> </td> </tr> </table>  </td></tr></table> </div> </div> </div> </div> </div> </td>  <td class="box_width_td_right"><table border="0" class="box_width_right" cellspacing="0" cellpadding="0">   </table></td> </tr> </table>   </td></tr> <tr><td class="row_3"> <div class="content_tl"> <div class="content_tr"> <div class="content_bl"> <div class="content_br"> <div class="width_100"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td class="footer footer2_td"><span><a href="#">Specials</a>    |    <a href="#">Advanced Search</a>    |    <a href="#">Reviews</a>    |    <a href="#">Create an Account</a>    |    <a href="#">Log In</a></span></td></tr> </table> </div> </div> </div> </div> </div> <table cellpadding="0" cellspacing="0" border="0" class="footer footer_td"> <tr> <td style="padding:0px 0px 0px 20px;width:50%;">Copyright © 2009 <a href="#">osCommerce</a> </td> <td style="padding:0px 20px 0px 0px;text-align:right;"><b><a href="#">Privacy Notice</a>    |    <a href="#">Conditions of Use</a></b></td> </tr> </table> </td></tr></table> </div> </div> </div> </div> </div> </div> </div> </td></tr></table>  </body> </html> </textarea> <h3>Template Harvest Rework (Only 4 pages and much easier to read.)</h3> <textarea style="width:620px; height:300px; overflow:scroll;" wrap="off"> <!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>Computer Hardware Store</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrap"> <div class="flag"> <div class="flaginfo"> <a href="#"><img src="images/flag1.gif" alt="" /></a> <a href="#"><img src="images/flag2.gif" alt="" /></a> <a href="#"><img src="images/flag3.gif" alt="" /></a> </div> </div> <div class="header"> <div class="logo"><img src="images/logo.gif" alt="" /></div> <div class="cartarear"> <div class="cartitem"> <strong>Shopping cart:</strong> <img src="images/carticon.gif" alt="" /> </div> <p>now in your cart <span>0</span> items</p> <label>Currencies:</label> <select name="currency"> <option value="- US Dollar -">- US Dollar -</option> </select> </div> </div> <div class="navigation"> <div class="navlist"> <div class="topnav"> <ul> <li class="first"><a href="#">Home</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Product info</a></li> <li><a href="#">My cart</a></li> <li><a href="#">Pop up</a></li> </ul> </div> <div class="search"> <input name="" type="text" onfocus="if(this.value=='- Search -')this.value=''" onblur="if(this.value=='')this.value='- Search -'" value="- Search -" /> <input type="image" src="images/go.gif" class="go" /> </div> </div> </div> <div class="maincontent"> <div class="leftbar"> <div class="title"> <h4>Systems & Laptops:</h4> </div> <div class="category"> <ul> <li><a href="#">Barebones</a></li> <li><a href="#">Computer Systems</a></li> <li><a href="#">Laptops / Notebooks</a></li> <li><a href="#">Motherboard Combos</a></li> <li><a href="#">MP3 Players</a></li> </ul> </div> <div class="title"> <h4>Computer Parts:</h4> </div> <div class="category"> <ul> <li><a href="#">Accessories</a></li> <li><a href="#">Cables</a></li> <li><a href="#">Cases</a></li> <li><a href="#">CD / DVD Drives</a></li> <li><a href="#">Clearance</a></li> <li><a href="#">Controller Cards</a></li> <li><a href="#">CPUs (Processors)</a></li> <li><a href="#">Drive Enclosures</a></li> <li><a href="#">Fans (Cooling)</a></li> <li><a href="#">Floppy Drives</a></li> <li><a href="#">Games & Gift Ideas</a></li> <li><a href="#">Hard Drives</a></li> <li><a href="#">Keyboards / Mice</a></li> <li><a href="#">Memory</a></li> <li><a href="#">Monitors</a></li> <li><a href="#">Motherboards</a></li> <li><a href="#">Networking / Modems</a></li> <li><a href="#">Power Supplies</a></li> <li><a href="#">Printers / Scanners</a></li> <li><a href="#">Software / OS</a></li> <li><a href="#">Sound / Speakers</a></li> <li><a href="#">USB Hubs</a></li> <li><a href="#">Video Cards</a></li> <li><a href="#">Webcams / Cameras</a></li> <li><a href="#">Wholesale</a></li> </ul> </div> <div class="categorybottom"></div> </div> <div class="rightbar"> <div class="banner"><img src="images/banner.gif" alt="" /></div> <div class="details"> <a href="#"><img src="images/detail.gif" alt="" /></a> </div> <div class="populartitle"> <h3>Popular products</h3> </div> <div class="product"> <div class="productbox new"> <h4>Real Power Pro 1000W</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb1.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$235.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>GeForce 8800 GT</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb2.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$279.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>Seagate 1TB 7200rpm 32MB ST31000340NS SATA</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb3.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$229.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>iLife ’09</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb4.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$79.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>VMware Fusion 2</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb5.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$129.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> <div class="productbox"> <h4>Antec Nine Hundred</h4> <div class="productdata"> <div class="productthumb"><img src="images/thumb6.gif" alt="" /></div> <label><a href="#">Detail ></a></label> </div> <div class="addtocart"> <div class="amount"><strong>$159.00</strong></div> <div class="add"><input type="image" src="images/addtocart.gif" /></div> </div> </div> </div> <div class="productbottom"></div> <div class="bottomnav"> <div class="left"></div> <div class="bottomnavdata"> <p><a href="#">Home</a>|<a href="#">New products</a>|<a href="#">Special</a>|<a href="#">My account</a>|<a href="#">Contacts</a></p> </div> <div class="right"></div> </div> </div> </div> <div class="cls"></div> <div class="footer"> <label><a href="#">Privacy Notice</a> | <a href="#">Conditions of Use</a></label> <span>Copyright © 2009 Computer Hardware Store</span> </div> </div> </body> </html> </textarea> </notextile>