Grow your CSS skills. Land your dream job.

[Solved] Simple table using div

  • # January 29, 2010 at 9:47 pm

    The layout used for most of the "images and text" sets on this page: http://www.maitrebart.net/exphotos/lapoc/fleuve.htm
    is done using tables (except the first set). I want to convert the table tags for div tags (that is the first set!).

    As you can see (except for the IE users), I could achieve equivalent results for the first 2 sets by using "display: table;" and "display: table-cell;" in set 1. However, "display: table;" and "display: table-cell;" are not recognized by the IE (even version 8), according to w3shcool.

    Before I discovered "display: table;" and "display: table-cell;" I tried many combination of margin, height and float (as you will see in http://www.maitrebart.net/exphotos/lapoc/fleuve.css) without any success. My guess is that I was (again) placing all those css qualifiers at the wrong places.

    Can anyone knowledgeable indicate me how to make set 1 appear as set 2 without using the "display: table;" / "display: table-cell;" combo, so that IE users will enjoy the same experience as the others? ;) Ho! And by the way, I wish not having to specify any fixed width or height neither (px or %). Because I don’t want to retrieve an image’s size and then go back in the css file every time I add a new set in the page.

    Thank you.

    # January 30, 2010 at 3:48 am

    I would suggest using something like lightbox. You can add captions to the images instead of typing it out underneath the image. http://leandrovieira.com/projects/jquery/lightbox/

    I always use unordered lists to display my gallery.

    Code:
    • Cliquez pour voir l'original grandeur nature.

      Cabane sur le bord du fleuve

    • Cliquez pour voir l'original grandeur nature.
    • Cliquez pour voir l'original grandeur nature.

      Au crépuscule

    • Cliquez pour voir l'original grandeur nature.

    You can style it to fit your needs.

    # January 30, 2010 at 8:10 am

    I agree with Jamy_za. There are ways to float your images, but why make life complicated when it can be simpler with either of his suggestions.

    # January 30, 2010 at 9:14 am
    "jamy_za" wrote:
    I would suggest using something like lightbox. [...] I always use unordered lists to display my gallery. [...] You can style it to fit your needs.

    Brilliant! Thanks for your suggestions.

    In the mean time, I found what I needed in the way I started it: it turns around using "display: inline;" & "text-align: center;" and no inner div!

    But I will most probably give a try to lightbox soon enough. I guess it is what one of my friend uses for his web site: http://www.bertpijs.nl/blog/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".