Borders in product list

product (border) product (border) product

[chrille112]

I want to make a product list BUT the site should have relative (100%) width, and the "product boxes" will have fixed size. That means, that how many boxes there will be on one row will depend on the screen resolution. Sometimes there will be 3 boxes in a row, and another time there will be more.

What I'm looking for is the border design. I want it like this:

product (border) product (border) product

There should be no border in the beginning and in the end. If I knew what box would be the last, I could just:

border-right: none; 

But the floating design makes it impossible to decide what box will be the last.

Any ideas how to solve this?

[edited by: jatar_k at 6:20 pm (utc) on April 12, 2007]
[edit reason] no urls thanks [/edit]

[cmarshall]

Welcome to WebmasterWorld!

Needs to be done in JavaScript, as that is the only way to get screen size.

However, you could fool it by not using borders, having a small margin between product shots, and a background color. That would give you the illusion of borders, and the edges would look OK.

By the way, you shouldn't have a link like that. It violates TOS. I found this out a number of times when I started posting here. They are very strict about it. Don't get upset when they remove it.

[chrille112]

Thank you for the answer!
Sorry about the link, I'll remember that in the future

Do you know where to find such javascript? Or any ideas of that to google?

[cmarshall]

I'm not sure what's already written out there. If I were doing it, I would probably write it myself, but that might not be so efficient.

We do have a JavaScript and AJAX Forum [webmasterworld.com]. You might try asking there.

Basically, what you want is a script that goes through the rendered <div> elements, and assigns the appropriate classes to them. I have seen it done a number of times.

[SuzyUK]

Hi chrille112 and Welcome to WebmasterWorld!

and the "product boxes" will have fixed size.

if the boxes are the same the same size could you simply make a background graphic with a repeating vertical stripe wide enough to match the boxes fixed width (+ a bit for margins) and put it as a background on a container for these boxes?

[Dabrowski]

How are you generating the page? Sounds like you'd be using a back-end system, perl for eg?

[chrille112]

I'm generating the page with php. I don't think anything could be done there tough, since I could never know what will be the last "box".

For example:
Category contains 8 products.
Boxes are 200px wide.

- A visitor with resolution 800x600px. The boxes will line up like this:

box ¦ box ¦ box ¦ box
box ¦ box ¦ box ¦ box

- Another visitor with 1240 resolution:

box ¦ box ¦ box ¦ box ¦ box ¦ box
box ¦ box

[Dabrowski]

This is a JS problem. Post a thread there and I'll do you some script.