1
The checkerboard pattern is achieved with this markup:
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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";
urchinTracker();</script>
</head>
<body>
<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></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>
[/HTML]
with this stylesheet
Expand|Select|Wrap|Line Numbers
- body{width:89%;margin:0% 5.5%;padding:0;border:0;color:#000;background-color:#fff;font:medium Verdana,Tahoma,Helvetica,sans-serif;}
- #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;}
- img{border:none;}
- td img{border:none;display:block;}
- .bi{font-weight:bold;}
- #itemtable td.details{padding:0 1.25em;font:1em/1.25 Verdana,Tahoma,Helvetica,sans-serif;vertical-align:middle;}
- #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;}
- .lgbi{font-size:large;font-style:italic;font-weight:bold;}
- .reserved{color:Red;font-weight:bold;}
- #itemtable .row1{background-color:#e5e5e5;color:#000;vertical-align:top;height:325px;}
- #itemtable .row2{background-color:#fff;color:#000;vertical-align:top;height:325px;}
- #at{font-style:italic;font-weight:bold;}
- #bronze{width:100%;margin-top:.5em;background:#fc6;height:1em;}
- #bronze-bottom{width:100%;margin-top:1.3em;margin-bottom:.5em;background:#fc6;height:1em;}
- #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;}
- #cat-top{padding-top:0.2em;margin-top:1.4em;font:400 1em/1.2 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
- #click{padding-left:2em;color:#000;background-color:#fff;font:bold 1.16em Verdana,Tahoma,Helvetica,sans-serif;position:relative;top:0.2em;}
- #itemtable{width:100%;border:0;table-layout:fixed;}
- #itemtable #col1,#itemtable #col2{width:209px;}
- #itemtable a img{width:209px;height:325px;}
- #logo{position:relative;left:50%;}
- a:link{color:#000;background-color:#fff;text-decoration:none;}
- a:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
- a:hover{color:red;background-color:#fff;text-decoration:none;}
- a.bd:link{color:#00f;background-color:#fff;text-decoration:none;}
- a.bd:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
- a.bd:hover{color:red;background-color:#fff;text-decoration:none;}
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?
