Creating a Products List with Descriptions and Left Floated Images?

Discussion in 'HTML' started by Hardeep Rakhra, Feb 18, 2004.

  1. Hardeep Rakhra, Feb 18, 2004
    #1
    1. Advertising

  2. On 2004-02-18 22:04:42 +0100, Hardeep Rakhra <> said:

    > 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
    =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=, Feb 18, 2004
    #2
    1. Advertising

  3. Hardeep Rakhra

    Els Guest

    Hardeep Rakhra wrote:

    > 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'.

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 18, 2004
    #3
  4. Hardeep Rakhra wrote:

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


    On your images use the following CSS:

    float: left;

    and on your horizontal rules:

    clear: left;

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 18, 2004
    #4
  5. 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, Feb 18, 2004
    #5
  6. Els wrote:

    > 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.
    Hardeep Rakhra, Feb 18, 2004
    #6
  7. Hardeep Rakhra wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 18, 2004
    #7
  8. Hardeep Rakhra

    Paul Furman Guest

    Paul Furman, Feb 18, 2004
    #8
  9. Paul Furman wrote:

    > 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, Feb 19, 2004
    #9
  10. Toby A Inkster wrote:

    >
    > 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, Feb 19, 2004
    #10
  11. Hardeep Rakhra wrote:
    > 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.
    Hardeep Rakhra, Feb 19, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jersie0
    Replies:
    0
    Views:
    682
    jersie0
    Nov 23, 2003
  2. Mitja
    Replies:
    0
    Views:
    426
    Mitja
    Mar 6, 2004
  3. Rik
    Replies:
    0
    Views:
    525
  4. Replies:
    2
    Views:
    341
    Jim Moe
    Dec 5, 2006
  5. dspfun
    Replies:
    2
    Views:
    849
    Flash Gordon
    Aug 14, 2006
Loading...

Share This Page