Creating a Products List with Descriptions and Left Floated Images?

[Hardeep Rakhra]

http://makeupheaven.co.uk/testarea/products.html

Heya,

I'm trying to do a products page with various products displayed one
after the other with some text and a image to the right. Like this;


<IMAGE><PARAGRAPH>
<HR />
<IMAGE><PARAGRAPH>
<HR />

.... and so on.

Can't quite figure out how to get it done without resorting to a table.
See may attempt gone wrong here;

http://makeupheaven.co.uk/testarea/products.html

Any ideas?

Hardeep.

 

[=?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=]

http://makeupheaven.co.uk/testarea/products.html

Heya,

I'm trying to do a products page with various products displayed one
after the other with some text and a image to the right. Like this;
Can't quite figure out how to get it done without resorting to a table.
See may attempt gone wrong here;

Why don't you use a table, then?

--
François de Dardel
http:/mapage.noos.fr/dardelf
Faber est suae quisque fortunae
Remove fourteen to reply
Enlever le quatorze

 

[Els]

http://makeupheaven.co.uk/testarea/products.html

Heya,

I'm trying to do a products page with various products displayed one
after the other with some text and a image to the right. Like this;


<IMAGE><PARAGRAPH>
<HR />
<IMAGE><PARAGRAPH>
<HR />

... and so on.

Can't quite figure out how to get it done without resorting to a table.
See may attempt gone wrong here;

http://makeupheaven.co.uk/testarea/products.html

Any ideas?

I'm not completely sure, but I'd say when you use
float:left, set also clear:left, instead of clear:right.

That should get the pics to line up under each other instead
of 'cascading'.

 

[Toby A Inkster]

<IMAGE><PARAGRAPH>
<HR />
<IMAGE><PARAGRAPH>
<HR />

On your images use the following CSS:

float: left;

and on your horizontal rules:

clear: left;

 

[Hardeep Rakhra]

Toby A Inkster wrote:

On your images use the following CSS:

float: left;

and on your horizontal rules:

clear: left;

Nearly There :O)

Just that the second lot of image and text is forced past the left
floated menu. Any idea how to fix that?

have updated the page here;
http://makeupheaven.co.uk/testarea/products.html

Thanks for the help.

Hardeep

 

[Hardeep Rakhra]

I'm not completely sure, but I'd say when you use float:left, set also
clear:left, instead of clear:right.

That should get the pics to line up under each other instead of
'cascading'.

Tried that, but cause the image to drop down under the menu. :O( All so
confusing.

Hardeep.

 

[Toby A Inkster]

Just that the second lot of image and text is forced past the left
floated menu. Any idea how to fix that?

Probably by putting a giant <div> wrapper around everything from your
"Products Index" heading down to the "Jump to top" link and then setting
"position:relative;" on it.

 

[Paul Furman]

Nearly There :O)

Just that the second lot of image and text is forced past the left
floated menu. Any idea how to fix that?

have updated the page here;
http://makeupheaven.co.uk/testarea/products.html

I'd guess, put it in another div?

Why do you have the width fixed? It seems to eliminate the advantage of
doing this with CSS:

#precontent {
width: 44.5em;
http://makeupheaven.co.uk/testarea/basic.css

 

[Hardeep Rakhra]

I'd guess, put it in another div?

Why do you have the width fixed? It seems to eliminate the advantage of
doing this with CSS:

#precontent {
width: 44.5em;
http://makeupheaven.co.uk/testarea/basic.css

Another Div? In what way exactly as i'm unsure how i'd postion the div
with respects to the menu. I did i think before have a div around it
all and decied to remove it cos it was acting up between Firebird 0.7
adn IE6. I forget how exactly.

As for the fixed width, it's nothing more than i like it that way. I
have fixed it at about 800pixels as not to offend too many people. And
the design does grow nicely depended on font size.

Hardeep.

 

[Hardeep Rakhra]

Probably by putting a giant <div> wrapper around everything from your
"Products Index" heading down to the "Jump to top" link and then setting
"position:relative;" on it.

Tried that little trick. Even tried making it an opposing float. Which
worked almost in IE, just a few kinks with the content after it. But
thew Mozilla/Firebird/Firefox completely off.

Such a dammed simple concept and so much of pain in the arse!

Driving me mad! Makes u think if CSS is worth the hassel.

Hardeep.

 

[Hardeep Rakhra]

http://makeupheaven.co.uk/testarea/products.html

Heya,

I'm trying to do a products page with various products displayed one
after the other with some text and a image to the right. Like this;

Heya, With your help i came up with the following solutions;

1. float the images to the otherside of the page. works but not how i
wanted things. athough looks quite nice still.

2. enclose the products section in a div as suggested, but float it
right, and give it width of 37em, keeping it clear of the menu. and
clear both afterwards to keep the content after it from riding up into
the space under the menu.

i doubt it's the best way of getting it done but it works kind of. now
if i could just get IE and Mozilla to render the margins in the same
manner i can get some rest :O)

Thank you to everyone,

Hardeep.