471,594 Members | 1,656 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,594 software developers and data experts.

Replacing Tables with divs

I have a page which uses tables for layout http://www.vintagetextile.com/1920s_to_1930s.htm

The checkerboard pattern is achieved with this markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>1920s to 1930s high-style Vintage Clothing at Vintage Textile</title>
<meta name="description" content="1920s to 1930s vintage clothing for the discriminating collector at VintageTextile.com">
<meta name="keywords" content="vintage clothing,">
<link rel="stylesheet" type="text/css" href="style_sheets/categoriesnew.css">
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-138689-1";
<h1 id="top">1920s-1930s Vintage Clothing <span id="at">at</span></h1>
<div id="logo"><img src="images/Graphics/vintage_clothing3.gif" height="74" width="296" alt="antique clothing at vintagetextile.com"></div>
<div id="cat-top"><a href="early.htm">Early</a>
: <a href="victorian.htm">Victorian</a> :
<a href="edwardian.htm">Edwardian</a> :
<a href="1920s_to_1930s.htm" class="herelink">1920s to 1930s</a>
: <a href="1940s_to_designer.htm">1940s to Designer</a> : <a href="shawlstext.htm">Shawls/Textiles</a> :
<a href="jewelry.htm">Jewelry</a> :
<a href="gallery.htm">Gallery</a> :
<a href="treasure_hunt.htm">Treasure Hunt</a> :
<a href="articles.htm">Articles</a>
: <a href="order.htm">To Order</a> :
<a href="mailto:Linda@vintagetextile.com">Email</a> : <a href="index.html">Home</a></div>
<div align="center" id="bronze"></div>
<h2 id="click">Click on images for more details</h2>
<table cellpadding="0" cellspacing="0" id="itemtable" summary="1920s vintage clothing">
<col id="col1"><col id="col2"><col id="col3">
<tr class="row1"><td><a href="new_page_63.htm"><img src="images/Thumbnails/2176thumb2.jpg" alt="Gallenga stenciled bag" width="209" height="325"></a></td>
<td class="details">
<p> <b>#2176$1,200 <span class="reserved">Reserved</span> </b></p>
<p><strong>Gallenga</strong> stenciled velvet bag, c.1920. It has shades of bronze/gold stenciling
on black silk velvet and is lined with beige satin. Gallenga often used up to nine tones of gold and
silver pigment to achieve the desired ombré shading. This is an exemplar of the mysterious,
antique, Gothic quality of Gallenga's designs. NEW LISTING </p></td></tr>
<tr class="row2"><td></td>
<td><a href="new_page_7.htm"><img src="images/Thumbnails/6419thumb2.jpg" alt="rhinestone flapper cap" width="205" height="325"></a></td>
<td class="details">
<p> <b>#6419$750</b></p>
<p>Juliette-style rhinestone flapper cap, late 1920s. A diagonal mesh pattern of bronze
wire radiates out from a center diamond of prong-set rhinestones. At each intersection of the
mesh is a prong-set rhinestone. The contrast of glittering rhinestones with burnished old metal
conveys a feeling of old wealth seasoned over the generations. NEW LISTING </p></td></tr>
with this stylesheet
Expand|Select|Wrap|Line Numbers
  1. body{width:89%;margin:0% 5.5%;padding:0;border:0;color:#000;background-color:#fff;font:medium Verdana,Tahoma,Helvetica,sans-serif;}
  2. #top{padding:.2em .3em .2em 1em;margin-bottom:0.5em;color:#fff;background-color:#000;font:bold 1.4em "Times New Roman",Times,serif;height:1.4em;}
  3. img{border:none;}
  4. td img{border:none;display:block;}
  5. .bi{font-weight:bold;}
  6. #itemtable td.details{padding:0 1.25em;font:1em/1.25 Verdana,Tahoma,Helvetica,sans-serif;vertical-align:middle;}
  7. #cat-top a.herelink:link,#cat-bottom a.herelink:link,#cat-top a.herelink:visited,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}
  8. .lgbi{font-size:large;font-style:italic;font-weight:bold;}
  9. .reserved{color:Red;font-weight:bold;}
  10. #itemtable .row1{background-color:#e5e5e5;color:#000;vertical-align:top;height:325px;}
  11. #itemtable .row2{background-color:#fff;color:#000;vertical-align:top;height:325px;}
  12. #at{font-style:italic;font-weight:bold;}
  13. #bronze{width:100%;margin-top:.5em;background:#fc6;height:1em;}
  14. #bronze-bottom{width:100%;margin-top:1.3em;margin-bottom:.5em;background:#fc6;height:1em;}
  15. #cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.2 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
  16. #cat-top{padding-top:0.2em;margin-top:1.4em;font:400 1em/1.2 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
  17. #click{padding-left:2em;color:#000;background-color:#fff;font:bold 1.16em Verdana,Tahoma,Helvetica,sans-serif;position:relative;top:0.2em;}
  18. #itemtable{width:100%;border:0;table-layout:fixed;}
  19. #itemtable #col1,#itemtable #col2{width:209px;}
  20. #itemtable a img{width:209px;height:325px;}
  21. #logo{position:relative;left:50%;}
  22. a:link{color:#000;background-color:#fff;text-decoration:none;}
  23. a:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
  24. a:hover{color:red;background-color:#fff;text-decoration:none;}
  25. a.bd:link{color:#00f;background-color:#fff;text-decoration:none;}
  26. a.bd:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
  27. a.bd:hover{color:red;background-color:#fff;text-decoration:none;}
Here is an idea I saw online to implement the design with divs instead of a table. I can't quite get the selectors to match up with the code.

All the jpegs are 209 px wide. In the odd rows, use this style to position the jpeg in the first "column": width 418px; float:left; margin-right:-418px;clear:left;

The third "column" text would be styled: clear:none;float:left;margin-left:418px;display:inline;

In the even rows, use this style to position the jpeg in the second "column": margin-left:209px;

Assuming this is the right idea, how would I match up the selectors and the classes in the markup?
Aug 16 '07 #1
1 2427
7,435 Expert 4TB
Just use classes named "even" and "odd".
Aug 16 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

54 posts views Thread by Max Quordlepleen | last post: by
1 post views Thread by Siegfried Heintze | last post: by
7 posts views Thread by Wilhelm Kutting | last post: by
32 posts views Thread by Simon Dean | last post: by
12 posts views Thread by Dudely | last post: by
6 posts views Thread by =?Utf-8?B?Tkg=?= | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.