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
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?
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
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).
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
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.
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
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.