At 11:23 AM 7/22/2005, L Coulson wrote:
http://www.kingfisherdesigns.com/Test I have managed to control everything
on this page with CSS except the lists in the side borders and sketch of the
table in the middle. I need to do a table that could be up to 6 - 8 rows
that can vary in widths to accommodate photos and text and have no border (I
put it in the border so it could be seen)
Should I just live with the one table in html?
If I need to do a table in CSS, can you tell me how to get started? Is it
one "box with areas inside or would it be12 boxes next to each other?
Lousie,
To answer your technical question, though, here's a way to create a matrix
with CSS.
Think of a matrix as a group of boxes in which all the boxes in a row are
the same height and all the boxes in a column are the same width -- exactly
what tables mandate. The advantage of tables is that they can stretch to
accommodate content keeping all boxes in a column the same width and all
boxes in a row the same height. We can accomplish each of those in CSS,
just not at the same time. Therefore when using CSS you have to pre-define
the heights and/or widths.
Although you could position everything absolutely, I prefer floats. Here's
one method:
<dl id="products">
<dt><img src="product1.jpg" alt="Product 1" /></dt>
<dd>Description of product 1.</dd>
<dt><img src="product2.jpg" alt="Product 2" /></dt>
<dd>Description of product 2.</dd>
...
</dl>
dl#products dt
{
clear: left;
float: left;
width: 300px;
height: 100px;
}
dl#products dd
{
float: left;
width: 300px;
height: 100px;
margin-left: 300px;
}
Floating the boxes left arranges them horizontally. Clearing the float
executes a kind of carriage return to bring a box back to the left margin.
The dd{margin-left} rule might seem redundant, but I believe it's necessary
to persuade a wider range of browsers to cooperate.
Regards,
Paul
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
