7 replies [Last post]
Andy Downie
Offline
Enthusiast
Hazelbank (Lanark), Scotland
Last seen: 17 years 17 weeks ago
Hazelbank (Lanark), Scotland
Joined: 2003-07-31
Posts: 87
Points: -1

HI All,
I wondered whether someone could advise on how to arrange products, as in a catalogue, along the page? I want to post a list of images across the page with a brief description underneath.

Many thanks in advance

Andy

Web design and Independent Translation Services

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Catalogue item layout

Depends how involved you want to get (and daring or comfortable you feel) with CSS and (X)HTML. You could go full out and try it without tables, or use as simple a table structure you can manage with XHTML also.

Are you fellin' lucky? Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

Andy Downie
Offline
Enthusiast
Hazelbank (Lanark), Scotland
Last seen: 17 years 17 weeks ago
Hazelbank (Lanark), Scotland
Joined: 2003-07-31
Posts: 87
Points: -1

Catalogue item layout

With my GungHo attitudde I would try to go with the css/(X)HTML implementation. Not sure if I am allowed to post links to the work in progress...?
I have tried to do it in tables but want to get away from tables totally.

Cheers

Andy

Web design and Independent Translation Services

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Catalogue item layout

Then you'll want to look at floats. Have you come across using or used the float declaration before?

The easiest way to test them is setup a few rectangle-shaped divs and play about with the float declaration for the CSS of each one.

The declarations are simple enough:

float: left;

or

float: right;

and to stop an element (i.e. a div) from floating (or being affected by a float I should say), add:

clear: both (or clear: left; or clear: right... depending on the elements' float declaration beforehand).

The next sentence is true. The previous sentence is false. Discuss...

Andy Downie
Offline
Enthusiast
Hazelbank (Lanark), Scotland
Last seen: 17 years 17 weeks ago
Hazelbank (Lanark), Scotland
Joined: 2003-07-31
Posts: 87
Points: -1

Catalogue item layout

And so to line up items beside each other I would assign a "float:left;" to each of them then? I have tried using it before but never been exactly sure what the heck it is doing. Are these the only 2 parameters, left and right?

Cheers

Andy

Web design and Independent Translation Services

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Catalogue item layout

Yep, float: left; and float: right; but the key to it is the clear: left; clear: right; or clear: both; declaration.

Here's a quick example: http://pub.c-o2.net/cssf/float.htm

As ever, feel free to grab the code and play about. Laughing out loud

The next sentence is true. The previous sentence is false. Discuss...

Andy Downie
Offline
Enthusiast
Hazelbank (Lanark), Scotland
Last seen: 17 years 17 weeks ago
Hazelbank (Lanark), Scotland
Joined: 2003-07-31
Posts: 87
Points: -1

Catalogue item layout

I could arrange widths and heights as appropriate for then images I want to post, I suppose. The spacing looks good as well. Will try palying with it.

Cheers

Andy

Web design and Independent Translation Services

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Catalogue item layout

Word of warning though... you'll need to test the floats across a range of browsers (as is always the case anyway!)

Alternatives to floats are converting to inline (but, again, this has it's problems). Or, using absolutely or relatively positioned elements. However, all options have their ups and downs. I've found floats to be the easiest and most sturdy to use.

The next sentence is true. The previous sentence is false. Discuss...