Alternative to Tables for Product Pics and Descriptions?

newbie to css, uses LOTS of tables!

[Shadows Papa]

Greetings,
Intro and question.........
I'm a non-professional "webmaster" - I've dabbled and created sites for others and myself since 1997, but my current major project is a buisness site for my wife's store. It's growing so fast I can barely keep up.
Without getting into shameless promotions, I'll try to ask via simply describing the site. It's a site for a retail shop, shows books, patterns, notions and fabrics. I show small (about 130 pix wide) thumbnails of product, with a description, price, etc., then below that a button to click to order the item. It's all done via tables. Say I can display 4 patterns accross a page, I create a centered table, 4 columns x 4 rows. The top row is the pattern pics, the second row is descriptions, etc. (so the text lines up perfectly below each pic) then the 3rd row is the order buttons (lined up below the descriptions) and the 4th row is empty simply to give some space between that "set" and the table below it. For the fabric sections, the line up is critical, with clickable thumbnails so they can see larger pics to see detail and pattern, color, etc.
I'm reading with great interest your threads on the table vs. CSS and wonder - am I STILL better off with tables? It's not fun, but it's SIMPLE. Tables are a piece of cake where items need to line up in neat rows and be changed every week.
I recently made our "contact us" page like a million percent better with CSS, the HTML is smaller, cleaner, the page looks GREAT. But I fear that quilters are not like U or EYE with the latest and fastest of everything. Face it, some use MACs and others use Win95. The pages need to work for all sorts of computers/browsers.
Yes, I currently have at least 50 <font> tags per page, but after surfing your messages for the last couple hours, that will soon change!

Shadows Papa (Shadow is the world's cutest cat)

[jbinbpt]

Hi Shadows_Papa,
Welcome to Webmasterworld……

The good news is that you can use both CSS and tables.

You are correct that using CSS to control text makes you life a lot easier. The hard part will be in cleaning off all the <font> and <size> tags.

I, for one use both and as I become comfortable with CSS, add more elements. It’s very easy that way.

You have landed in the correct forum, there is a ton of great info here.
This is an interesting topic on CSS books [webmasterworld.com]

There is also a good course on CSS starting here [webmasterworld.com].

Whenever you need an answer, ask it here and someone will jump in and help. Lots of good community here. Good luck

Jb

[cat] My two Siamese are cute also [/cat]

[Nick_W]

Hi guys,

cats are great, but let's talk about css ;)

>tables

I think you could do that fairly easily with <div>'s,

Untested, and completely of the top of my heas:

.prdbox {
width: 100px;
height: 100px;
float: right;
}
.prodbox h4 {
 font: bold 1em arial,verdana,sans-serif;
}
.prdbox img {
 padding-left: 25px;
}
.prdbox p {
 font: .9em verdana,arial, sans-serif;
}

and in your (x)html

<div class="prdbox">
 <h4>Prd Title</h4>
 <img src="prd.gif" alt="" />
 <p>This is your prd text.</p>
</div>
Repeat as necceassary

With me?

Go ahead, css guys and girls, make that make better sense, it's late on friday night ;)

Nick

[jbinbpt]

Good point Nick,
Just looking at it one step at a time.

Time for weekend to start.

[Shadows Papa]

Ok, it's only 10 pm here.
I hope I've cleaned out the specifics, but left enough for someone to see the mess. It's a table, pics in top "row", descriptions in second row, order buttons in third row, for some items another button in 4th row to let customer order another version of item. The button is a "form" and another issue, besides the table mess, is that the buttons take a LOT more room than just the button - and when I space them right next to each other, they show in browser with a lot of space between them. I can't stack them, they end up like they have <P> between, you know, like I've started another paragraph.
I hope I have the points accross and still followed rules, sometimes it seems impossible as it's hard to know what's wrong with something you can't see - like calling your mechanic and simply telling him your car won't run and makes funny sounds, but you can't tell him what kind of car or where the sound is - ha, because you don'tknow! Of course, FP2002 adds the stupid table autonumber and border color even thought I don't show borders, etc.

Shadow's Papa (Shadow's ready for bed)

<div align="center">
<center>
<table border="0" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="97%" id="AutoNumber10">
<tr>
<td width="22%">
<p align="center">
<img border="0" src="screen.jpg"></td>
<td width="22%">
<p align="center">
<img border="0" src="it.jpg"></td>
<td width="28%">
<p align="center">
<a href="javascript: largeview('view2.asp?name=home-sample')">
<img border="0" src="sample2.jpg"></A></td>
<td width="28%">
<p align="center">
<a href="javascript: largeview('view2.asp?name=sample')"> <img border="0" src="sample.jpg"></a><br>
<font size="1" face="Verdana">Click on pic to see our sample</font></td>
</tr>
<tr>
<td width="22%"><font face="Verdana" size="2"><b>Really nice item</b><br>
A fun one here too.
Instructions for 4 sizes included.<br>
this much - $8.50<br>
</font><font face="Verdana" size="1">Code: pat-sp-3</font></td>
<td width="22%"><b><font face="Verdana" size="2">&quot;Zip It&quot; <br>
</font><font face="Verdana" size="1">Item II</font></b><font face="Verdana" size="2"><br>
Quick and easy with many uses. Instructions
for 3 sizes included.<br>
this thing - $8.50<br>
</font><font face="Verdana" size="1">Code: pat-zi-3</font></td>
<td width="28%"><font face="Verdana" size="2"><b>&quot;Home Sweet Home&quot;</b><br>
Approx. 50&quot; x 56&quot;<br>
A great item, too<br>
Click on it to see ours.<br>
cool - $7.00<br>
more cool - $54.95<br>
</font><font face="Verdana" size="1">Code: pat-hsh-3<br>
Code: kit-hsh-3<br>
<form action="order.asp" method="POST">
<input type="submit" name="submit" value="order this one" style="font-size: 8pt; font-family: Verdana">
</form></font></td>
<td width="28%">
<font face="Verdana" size="2"><b>nice item</b><br>
Approx. 37.5&quot; x 37.5&quot;<br>
includes cool stuff.<br>
Kit makes approx. 92&quot; x 110&quot;<br>
plan - $7.50<br>
</font><font face="Verdana" size="1">Code: pat-gt-3<br>
</font><font face="Verdana" size="2">Kit w/plan - $122.95</font><font face="Verdana" size="1"><br>
Code: kit-gt-3<br>
<form action="order.asp" method="POST">
<input type="submit" name="submit" value="another item" style="font-size: 8pt; font-family: Verdana">
</form></font></td>
</tr>
<tr>
<td width="22%"><form action="http://cgi.tbbs.net/scripts/store/order.asp" method="POST">
<p align="center">
<input type="submit" name="submit" value="order item 2" style="font-size: 8pt; font-family: Verdana">
</p>
</form></td>
<td width="22%"><form action="order.asp" method="POST">
<p align="center">
<input type="submit" name="submit" value="order kit 2" style="font-size: 8pt; font-family: Verdana">
</p>
</form></td>
<td width="28%"><form action="order.asp" method="POST">
<input type="submit" name="submit" value="order item 1" style="font-size: 8pt; font-family: Verdana">
</form></td>
<td width="28%"><form action="order.asp" method="POST">
<input type="submit" name="submit" value="order kit 1" style="font-size: 8pt; font-family: Verdana">
</form></td>
</tr>
<tr>
<td width="22%"></td>
<td width="22%"></td>
<td width="28%"></td>
<td width="28%"></td>
</tr>
</table>
</center>
</div>