Image groups

  • I’m working on a plugin to insert pictures from coppermine into posts. I want to improve the layout code, and release it as a library that could be used for other integration projects.

    This is a demonstration of different presentation styles for image groups. Do you miss any particular layout style ? Are you a CSS god and do you know how to center the images in section 2 ? Do you have suggestions or questions ?

    Please comment !

Viewing 2 replies - 1 through 2 (of 2 total)

  • no im nto a CSS god, but if i look at the source of the page, i can see a BIG difference with the way that you have done section 1 and section 2

    section 2 you have added div and span to each individual pics
    section one you did not do it individually

    uif section 1 wworks…
    then just copy the html from it and put the html in section 2, change pics if you want to

    <div class=”cpg-grp-center”>
    <img alt=”” src=”zeilen/img001.jpeg”/>
    <img alt=”” src=”zeilen/img000.jpeg”/>
    <img alt=”” src=”zeilen/img002.jpeg”/>
    <img alt=”” src=”zeilen/img003.jpeg”/>
    <img alt=”” src=”zeilen/img004.jpeg”/>
    <img alt=”” src=”zeilen/img005.jpeg”/>
    <img alt=”” src=”zeilen/img006.jpeg”/>
    <img alt=”” src=”zeilen/img007.jpeg”/>
    <img alt=”” src=”zeilen/img008.jpeg”/>
    <div class=”spacer”> </div>
    </div>
    <div class=”cpg-album-link”>Visit this album</div>
    </div>

    vs
    <div>
    <div class=”cpg-img-box”>
    <img alt=”” src=”zeilen/img000.jpeg”/>
    <span class=”label”>img000</span>
    </div>
    <div class=”cpg-img-box”>
    <img alt=”” src=”zeilen/img001.jpeg”/>
    <span class=”label”>img001</span>
    </div>
    <div class=”cpg-img-box”>
    <img alt=”” src=”zeilen/img002.jpeg”/>
    <span class=”label”>img002</span>

    Thread Starter stilgar

    (@stilgar)

    Alas, I wish it were that simple..

    Unfortunately divs are not affected by text-align: center (except in ie…), and there is no centering instruction to align collections of block level elements.

    margin-auto works for a single element, but not to center groups of floats.

    I tried using <a href=".."><img><span></a>, and setting the span to display: block, but that makes that the <a>; is seen as a block-level element too, so it becomes unaffected by text-align.

    It seems like a pretty basic problem, but I’ve tried a lot of different ways to do it, and I bothered many people with this, but no results.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image groups’ is closed to new replies.

Tags