View Single Post
  #36  
Old 07-14-2010, 07:13 AM
 
Sisom Sisom is offline
 

eXpert
  
Join Date: Sep 2006
Posts: 310
 

Default Re: Why are they still using tables for layout?

Do you have any examples of what you are talking about? I still can't visualise how it would be an improvement to use tables.

I've just been working on the layout of the featured products section on the homepage of the site I am customising, and I've had no problems using CSS to make the individual product boxes do what I want - i.e. line up, etc.


I use

clear:left
float: left

and no matter how high the description is, the boxes will clear each other correctly (but thank God that QT actually have the 'highlight' class for every other box, without that it wouldn't work!).


I use this CSS:


.products-list .item {

position: relative;
margin: 0px 0px 25px 10px;
padding: 10px;
clear: left;
float: left;
width: 330px;
height: 300px;
border-bottom: 1px dotted red;
}
.products-list .highlight {
margin: 0 0 0 15px;
clear: none;
border: 1px dotted red;
border-top: none;
border-right: none;
}

(The 'highlight' style didn't exist in the CSS (unless I missed it), but the class is generated (I think) by Smarty, for all even numbered product boxes. (Please correct me if I'm wrong.)


So the right hand box (I use a two column display) has

clear: none
and thus won't try to drop down to the next line (as the product boxes can have two classes applied to them).
I can then apply a different sized left (or right) margin, to the left and right columns, and also put a background image on the entire product box, or, just as importantly, on part of it, if I set up a div within the product box. I can't do that in tables.

But then, I am a die-hard CSSer, and I can't imagine trying to set up anything of this nature, using tables!


I have added an extra long title to the second featured product, and four lines in the brief description, and it still works fine.
Notice how the section which begins with "Our price" still goes where it's supposed to - that's because it was easy to just add another div (with the class of "details2" in this case), and I then have yet another block to play with, which is impossible using tables.

http://www.mrdtrading.co.uk/store/home.php?shopkey=martin
__________________
X-Cart Gold Version 4.3.2
Reply With Quote