Grid. Best approach ...
in [CSS]
|
From: shapper on 23 Apr 2010 11:28 Hello, I am trying to display a list of products in a Grid with 3 columns and N rows. Each product has its Name, Image and in some cases a link to download the brochure displayed as follows: Image Name Brochure All images have the same dimension. However some products might have the brochure link or not. I need every row to have the same height ... I am generating the markup from server code as I am getting the products from a database. 1. Should I use a table? I also need padding between rows and colums but not padding on the table itself. Is this possible? 2. Should I use a div for each row and then 3 child divs for each product? Each child div would be floated left. 3, Should I use a unordered list? Thanks, Miguel
From: Jeff Thies on 24 Apr 2010 11:37 Adrienne Boswell wrote: > Gazing into my crystal ball I observed shapper <mdmoura(a)gmail.com> > writing in news:254d9a28-fe29-4b60-a47f- > 88dc8624b0dd(a)r27g2000yqn.googlegroups.com: > >> Hello, >> >> I am trying to display a list of products in a Grid with 3 columns and >> N rows. >> >> Each product has its Name, Image and in some cases a link to download >> the brochure displayed as follows: >> >> Image >> Name >> Brochure >> >> All images have the same dimension. However some products might have >> the brochure link or not. >> >> I need every row to have the same height ... >> >> I am generating the markup from server code as I am getting the >> products from a database. >> >> 1. Should I use a table? >> I also need padding between rows and colums but not padding on the >> table itself. >> Is this possible? >> >> 2. Should I use a div for each row and then 3 child divs for each >> product? >> Each child div would be floated left. >> >> 3, Should I use a unordered list? >> >> Thanks, >> Miguel >> >> >> > > A table would be best for you, after all, it IS tabular data. Actually, its not tabular. In a table, each row or column has significance, here one cell is the same as another. What is in the second column is no different than what is in the first or third. This is different than a table of data or a form. YMMV. With that said, this can be done with a table and is relatively easy. And it does no harm to do it that way. Myself, I do it with inline-block. With the caveats for early IE it doesn't suffer from having to have fixed heights or fixed row counts. Since the OP wants both of those, he could easily float them as well. Just finished this, not yet stuffed and live by the client: http://lovepeaceandolives.com/page_manager/shop-/shop/view_category/category/Glassware/sub_category/Martini%20Glasses With conditional comments to "fix" IE6 and IE7. And Dorayme is right, Miguel has been around for all these discussions. Jeff That's > going to be a breeze server side, and you could style the table any way > you want. >
From: dorayme on 24 Apr 2010 20:07 In article <hqv38p$140$1(a)news.albasani.net>, Jeff Thies <jeff_thies(a)att.net> wrote: > Adrienne Boswell wrote: > >> > >> I am trying to display a list of products in a Grid with 3 columns and > >> N rows. > >> > >> Each product has its Name, Image and in some cases a link to download > >> the brochure displayed as follows: > >> > >> Image > >> Name > >> Brochure > >> > >> All images have the same dimension. However some products might have > >> the brochure link or not. > >> > >> I need every row to have the same height ... > >> .... > >> 1. Should I use a table? .... > > > > A table would be best for you, after all, it IS tabular data. > .... > Actually, its not tabular. In a table, each row or column has > significance, here one cell is the same as another. What is in the > second column is no different than what is in the first or third. This > is different than a table of data or a form. YMMV. Gloria makes things to sell, she displays her wares on the internet in a table. Each product has a different row. In each row, all about the product falls under three table headings horizontally across the page: what it looks like, its name, its brochure. Each row is a list of values of properties of one product, each column is very much about a particular property of the products. Cynthia makes things to sell, she displays her wares on the internet in a table. Each product falls under its own table heading. The rows, one for each property, are for what a product looks like, another for its name and another for its brochure. Each row is a list of values for a particular property variable, each column is very much about which product is being talked about. Gloria has a better intuitive feel for tables (and understands that it may even be read out rather than seen) and would produce a more user friendly table. It is more user friendly for a number of reasons, some are subtle reasons but one is blindingly obvious: if there are a lot of products, Cynthia's would involve pesky horizontal scrolling whereas Gloria's would not. In either case, no things could be more tabular, it does not get more tabular than this. The concept of tabular is certainly not a well defined one but this case is certainly at the very heart of the paradigm. Think of the slightly mysterious tabular ideal as the little black bowl in lawn bowls and think of many bowls being bowled to it. Looking at the pattern on this one, no other bowl is closer to the little black one that represents tabular than Miguel-and-his-boss's case. It is as close to the little marker bowl as John Cleese's parrot is dead. -- dorayme
From: Jeff Thies on 24 Apr 2010 20:58 dorayme wrote: > In article <hqv38p$140$1(a)news.albasani.net>, > Jeff Thies <jeff_thies(a)att.net> wrote: > >> Adrienne Boswell wrote: >>>> I am trying to display a list of products in a Grid with 3 columns and >>>> N rows. >>>> >>>> Each product has its Name, Image and in some cases a link to download >>>> the brochure displayed as follows: >>>> >>>> Image >>>> Name >>>> Brochure >>>> >>>> All images have the same dimension. However some products might have >>>> the brochure link or not. >>>> >>>> I need every row to have the same height ... >>>> > ... >>>> 1. Should I use a table? > ... >>> A table would be best for you, after all, it IS tabular data. > ... > >> Actually, its not tabular. In a table, each row or column has >> significance, here one cell is the same as another. What is in the >> second column is no different than what is in the first or third. This >> is different than a table of data or a form. YMMV. > > Gloria makes things to sell, she displays her wares on the > internet in a table. Each product has a different row. In each > row, all about the product falls under three table headings > horizontally across the page: what it looks like, its name, its > brochure. Each row is a list of values of properties of one > product, each column is very much about a particular property of > the products. > > Cynthia makes things to sell, she displays her wares on the > internet in a table. Each product falls under its own table > heading. The rows, one for each property, are for what a product > looks like, another for its name and another for its brochure. > Each row is a list of values for a particular property variable, > each column is very much about which product is being talked > about. > > Gloria has a better intuitive feel for tables (and understands > that it may even be read out rather than seen) and would produce > a more user friendly table. It is more user friendly for a number > of reasons, some are subtle reasons but one is blindingly > obvious: if there are a lot of products, Cynthia's would involve > pesky horizontal scrolling whereas Gloria's would not. > > In either case, no things could be more tabular, it does not get > more tabular than this. The concept of tabular is certainly not a > well defined one but this case is certainly at the very heart of > the paradigm. I totally agree with that. But usually, and I assume in Miguels case also (I've just reread this, although this could also just be a large jumble), there are rows or columns that have no meaning. There is just a thumbnail with a few links, all in the same cell. What you describe is a very logical, and tabular way, to display products. It's effective where the number of products is very large, but is seldom used elsewise. > > Think of the slightly mysterious tabular ideal as the little > black bowl in lawn bowls and think of many bowls being bowled to > it. Looking at the pattern on this one, no other bowl is closer > to the little black one that represents tabular than > Miguel-and-his-boss's case. It is as close to the little marker > bowl as John Cleese's parrot is dead. All this looks more like lists. But trying writing a multiple line list. Tables are convenient for such a collection, although I tend to think of all these little bowls as just their own selves, in html term the division which is meaningless beyond the demarcation. Tables are powerful things, but they require counting a fixed number of columns, when in fact columns have no meaning here, and neither do rows. What we forget with our emphasis on symantics, is that for most people the web is a visual thing. What the underlying structure is, is irrelevant to the surfee. It's important to us as authors, as it makes maintenance possible when there is a logical structure, and it is important to search engines in their ceaseless task to categorize. Jeff Jeff >
From: dorayme on 24 Apr 2010 21:17
In article <hr043b$a78$1(a)news.albasani.net>, Jeff Thies <jeff_thies(a)att.net> wrote: > Tables are powerful things, but they require counting a fixed number > of columns, when in fact columns have no meaning here, and neither do rows. Well, I am not sure what you mean, as far as I can see and tried my best to explain, they have perfect meanings. Tables are a way to organise lists, they are not something opposed in meaning to lists. -- dorayme |