Designing without tables

**cma6** · Jul 28, 2007 16:44

I have the first edition. I had hoped it would help me to replace the tables I use on my category pages on my website http://www.vintagetextile.com/1920s_to_1930s.htm

However, in the first edition of the book, there were only 4 pages (118-121) in an almost 500 page book that dealt with a 3-column layout with one column fluid.
Does the second edition do any better in that respect? If not, what about "The CSS Anthology: 101 Essential Tips, Tricks & Hacks": is there coverage of CSS tables there?
Thanks, CMA

**LJK** · Jul 28, 2007 17:40

Have you browsed Paul's sticky at the top of the CSS threads?

**markbrown4** · Jul 28, 2007 18:58

Hello,

I found that book a very good introduction into css based layout.
I wouldn't recommend getting "The CSS Anthology: 101 Essential Tips, Tricks & Hacks" it's not nearly as good as designing without tables IMO.

Let's see if we can help you with your page, as you're not actually really wanting a 3 column layout per se.
Ok, rows of a table can be replicated by any block level element, one after the next after the next.
Two consecutive floats will stack up against each other like columns.
I'm tempted to use a definition list as the markup for the table but i'll keep it simple.

Code html4strict:

<div class="gallery">
  <div>
    <div class="image"> <img src="http://www.vintagetextile.com/images/Thumbnails/2176thumb2.jpg" alt="" width="209" height="325" /> </div>
    <div class="content">
      <p><strong>#2176&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$1,200&nbsp; <span class="reserved">Reserved</span></strong></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.&nbsp; NEW LISTING</p>
    </div>
  </div>
  <div class="alt">
    <div class="image"> <img src="http://www.vintagetextile.com/images/Thumbnails/2176thumb2.jpg" alt="" width="209" height="325" /> </div>
    <div class="content">
      <p><strong>#2176&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$1,200&nbsp; <span class="reserved">Reserved</span></strong></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.&nbsp; NEW LISTING</p>
    </div>
  </div>
  <div>
    <div class="image"> <img src="http://www.vintagetextile.com/images/Thumbnails/2176thumb2.jpg" alt="" width="209" height="325" /> </div>
    <div class="content">
      <p><strong>#2176&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$1,200&nbsp; <span class="reserved">Reserved</span></strong></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.&nbsp; NEW LISTING</p>
    </div>
  </div>
</div>

Code css:

.gallery .image {
	width: 418px;
	float: left;
	margin-right: -418px; /* a negative margin equal opposite to the float - makes other content flow through it as if it weren't there */
	clear: left;
}
.gallery div.alt img {
	margin-left: 209px;
}
.gallery .content {
	clear: none;
	float: left;
	margin-left: 418px;
	display: inline; /* fix IE double margin bug */ 
}

The only real 'tricks' are the negative margin, the IE bug fix and using the clear property to make that element 'clear' any floated element above it.

If you're looking for another more advanced book on CSS I would recommend getting Dan Cederholm's 'Bulletproof web design' - it's great.

**cma6** · Jul 29, 2007 05:56

Hi Markbrown:
You are correct that I don't really need a 3-column layout per se, but rather a replacement for the a table where my first two "columns" have a fixed width and the third column has a residual or fluid width.

This is a truly brilliant piece of html/css you have done. I will experiment with it today to see if it works and looks as good as my current table-based implementation.

Even though your solution has a fair number of div tags, there are still probably half as many as in my table. I will check out "Bulletproof web design." Back later.

CMA

**cma6** · Jul 29, 2007 11:28

Originally Posted by markbrown4

Hello,

I found that book a very good introduction into css based layout.
I wouldn't recommend getting "The CSS Anthology: 101 Essential Tips, Tricks & Hacks" it's not nearly as good as designing without tables IMO.

Let's see if we can help you with your page, as you're not actually really wanting a 3 column layout per se.
Ok, rows of a table can be replicated by any block level element, one after the next after the next.
Two consecutive floats will stack up against each other like columns.
I'm tempted to use a definition list as the markup for the table but i'll keep it simple.

Code html4strict:

<div class="gallery">
  <div>
    <div class="image"> <img src="http://www.vintagetextile.com/images/Thumbnails/2176thumb2.jpg" alt="" width="209" height="325" /> </div>
    <div class="content">
      <p><strong>#2176&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$1,200&nbsp; <span class="reserved">Reserved</span></strong></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.&nbsp; NEW LISTING</p>
    </div>
  </div>
  <div class="alt">
    <div class="image"> <img src="http://www.vintagetextile.com/images/Thumbnails/2176thumb2.jpg" alt="" width="209" height="325" /> </div>
    <div class="content">
      <p><strong>#2176&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$1,200&nbsp; <span class="reserved">Reserved</span></strong></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.&nbsp; NEW LISTING</p>
    </div>
  </div>
  <div>
    <div class="image"> <img src="http://www.vintagetextile.com/images/Thumbnails/2176thumb2.jpg" alt="" width="209" height="325" /> </div>
    <div class="content">
      <p><strong>#2176&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$1,200&nbsp; <span class="reserved">Reserved</span></strong></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.&nbsp; NEW LISTING</p>
    </div>
  </div>
</div>

Code css:

.gallery .image {
	width: 418px;
	float: left;
	margin-right: -418px; /* a negative margin equal opposite to the float - makes other content flow through it as if it weren't there */
	clear: left;
}
.gallery div.alt img {
	margin-left: 209px;
}
.gallery .content {
	clear: none;
	float: left;
	margin-left: 418px;
	display: inline; /* fix IE double margin bug */ 
}

The only real 'tricks' are the negative margin, the IE bug fix and using the clear property to make that element 'clear' any floated element above it.

If you're looking for another more advanced book on CSS I would recommend getting Dan Cederholm's 'Bulletproof web design' - it's great.

Your idea looks like just the thing but unfortunately I was not able to get it to work using this code:
<!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,vintage clothes,antique clothing,flapper dresses,flapper dress,1930s clothing,1930s fashion,Marlene Dietrich,Titanic,roaring 1920s,Coco Chanel,Chanel,Madeleine Vionnet,Beer,Gallenga,Fortuny,Boue Soeurs,Callot Soeurs,Augustabernard,Jacques Doucet,Paquin,Piguet,Adair,Groult,Poiret,Louiseboulanger,Lucile,Marcel Rochas,Jean Patou,Paul Poiret,Lucien Lelong,Jeanne Lanvin,Gallenga,Molyneux">
<link rel="stylesheet" type="text/css" href="style_sheets/categoriesnewy.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>
<div class="category">
<div>
<div class="image">
<a href="new_page_63.htm"><img src="images/Thumbnails/2176thumb2.jpg" alt="Gallenga stenciled bag" width="209" height="325"></a></div>
<div class="content"><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></div></div>

<div>
<div class="alt><a href="new_page_7.htm"><img src="images/Thumbnails/6419thumb2.jpg" alt="rhinestone flapper cap" width="205" height="325"></a></div>
<div class="content><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></div></div>
</div>

<div id="bronze-bottom"></div>
<div id="cat-bottom"><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>
</body></html>

and these styles:
.category .image img{width:418px;float:left;margin-right:-418px;clear:left;}
.category div.alt{margin-left:209px;}
.category .content{clear:none;float:left;margin-left:418px;display:inline;}

I think the selectors are not working with the code. I also get many parsing errors in DW about unclosed div tags and incorrect attributes for div tags.
Best, CMA

User Tag List

Thread: Designing without tables

Thread Tools

Display

Designing without tables

Bookmarks

Bookmarks

Posting Permissions