473,224 Members | 1,404 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 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 2536
7,435 Expert 4TB
Just use classes named "even" and "odd".
Aug 16 '07 #2

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

Similar topics

by: Max Quordlepleen | last post by:
Apologies for the crossposting, I wasn't sure which of these groups to ask this in. I have been lurking in these groups for a week or so, trying to glean what I need to design a simple, clean...
by: Siegfried Heintze | last post by:
I want to implement drag and drop for tables, divs, spans. The problem is that I don't know how wide or long my tables, divs and spans are going to be in advance so I cannot use absolute...
by: Wilhelm Kutting | last post by:
Hi again i want to replace the following layouttabel with css/xhtml: ---------------------------------- <table width="640" cellspacing="0"> <tr> <td valign="top">My Title</td> <td...
by: Alan Silver | last post by:
Hello, I understand the issue that tables should be used for tabular data and not for layout, but I would like some clarification as to exactly what constitutes tabular data. For example, if...
by: Simon Dean | last post by:
Duh... Not another one... Hopefully simple though, I hate the way *I* (and it might be a CSS trait) can't intermix fixed width divisional elements with a variable auto expanding div??? The...
by: Dudely | last post by:
I want to be a good little author and use CSS. Therefore, I'm attempting to convert my tables to the equivalent CSS. Unfortunately, I can't reproduce the same results. Can someone take a look...
by: =?Utf-8?B?Tkg=?= | last post by:
Hi, What do you recommend for defining the layout of an asp.net 2.0 page? Leaving masterpages and user controls aside for the moment is the use of tables or Divs the best approach? I have...
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...
by: Chris F.A. Johnson | last post by:
On 2008-07-09, Denis McMahon wrote: If the left-hand column contains any text, use em rather than px to size it. In CSS, less is more. Most problems are caused by specifying too much rather...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.