Any css wizards out there?

[BBK]

I'm looking for some advice on how to go about changing a table-based "shopping catalog" from tables to css. What I have is a dynamic catalog, with pagination, but currently the items are dynamically drawn out onto the page using php to draw the table cells depending on the number of items in the database. Ideally, I'd like to remove the tables and change this to positioned items in css, but to be honest, I don't even know where to start! Help!!

[inspectercoley]

I wouldn't recommend that to anyone. Thats not really what css is meant for.

Why do you want to do this?

There are good tutorials here:
http://www.w3schools.com/css/css_table.asp
Just find the css code you need and then modify and add to it accordingly

CSS is mainly used to change the style and positioning of existing elements of html, not to be used instead of them.

I guess you could use absolute positioning tho but tables are much easier.
http://www.w3schools.com/css/tryit.a...ition_absolute

[/dev/null]

One way that I'd consider is to use an unordered list for it then style your list so that:
i: The "display" property of <li> elements are set to "inline" meaning they don't display underneath each other
ii: The list-style property of <ul> elements set to "none" to remove the bullet points.

You could either just style the <li> elements (using borders, background image, etc etc) or use other nested elements to contain then (<div> etc).
The advantage of using an unordered list is that you need not consider really the widths of the page because the elements will just drop down below each other automatically at the end of the page. Plus, anyone who doesn't have a CSS enabled browser will still be able to access something meaningful (text-browsers, screen readers etc).
The downside is that it is displayed in a strict one after the other then below etc format, however from what it sounds like, that's what you do already in your tables - ie, nothing "complicated"
As for your PHP, just start off the <ul> then use a php loop to throw out <li></li> blocks and then close with <ul>
eg:

<div id="shopping">
<ul>
<?php
  /*Some code to call to your database etc here*/
  for ($x=0;$x<mysql_num_rows($DB_QUERY);$x++) {
    list($a,$b,$c...)=mysql_fetch_array($DB_QUERY);

    echo("<li>\nWhatever other content you want here\n</li>\n");
    /*etc etc*/
  }
?>
</ul>
</div>

Then style your CSS something like this:

#shopping ul {
  list-type: none;
}
#shopping ul li {
  display: inline;
  margin: 2px;
  padding: 2px;
  border 1px solid #abcdef;
  color: #fedcba;
  text-align: center;
  /*Any other CSS your want here*/
}

Hope this helps.

[hxbro]

have you got a url to look at, it'll help in deciding what should be done to it to make it more css based, as a rule if it's table data then use a table, if it's layout then use css

[BBK]

OK, best example to use is http://www.lymawradiators.co.uk/index.php?products. With a little refinement I know I can get that to do exactly what I want, and if tables is the way to go forward with this then great, I'll stick with what I have, because it does work, but it just seems so damn messy!

Thanks all for the info so far.

[hxbro]

In that particular case, tables are been used for layout which whilst work, in theory css should be used, you define a class for a product, and just say here is the text, here is the image and let css deal with it e.g.

<div class="product">
	<h1>Cambridge</h1>
	<img src="someimage" width="10" height="10" alt="someimage">
</div>

then you define a class product, and h1.product and img.product

you'd need an outer div to define the layout of the product divs

for the product page itself, you'd have two divs one for the image and then one that contained the table (you might be able to just define the table).

The idea of not using tables for layout means that on other browsers the data is presented better and reads better, so a screen reader would read through the products as a list rather than 2 lists (one for each row) for instance.