[css] thumbnail layout problemen

[Clay]

Ik zit met de volgende gewenste layout, waar ik maar ten dele uitkom. Wat ik wil bereiken is het volgende:

code:

|---------|  |---------|  |---------| 
| |-----| |  | |-----| |  | |-----| | 
| | img | |  | | img | |  | | img | | 
| |-----| |  | |-----| |  | |-----| | 
|   txt   |  |   txt   |  |   txt   | 
|---------|  |---------|  |---------|

Op zich zijn dat gewone thumbnail blokjes. plaatje, met een stukje tekst eronder. Meerdere kunnen naast elkaar komen, en als het niet meer in de breedte past gaat het naar de volgende rij.

Het probleem is echter dat ik geen vaste waardes heb waar ik van uit kan gaan, en dat 1 rij met thumbs gecentreerd moet staan in een bredere container, ala:

code:

        |---------|  |---------|  |---------|
        | |-----| |  | |-----| |  | |-----| |
 auto   | | img | |  | | img | |  | | img | |   auto
margin  | |-----| |  | |-----| |  | |-----| |  margin
        |   txt   |  |   txt   |  |   txt   |
        |---------|  |   txt   |  |---------|
                     |   txt   |             
                     |---------|

Het ziet er oersimpel uit, maar er zitten een paar flinke problemen aan. Er zijn dus geen vaste waardes; images kunnen van maat verschillen, en de tekst van lengte. De tekst moet eigenlijk wrappen op de breedte van de image. Maar zonder verdere styles/afmetingen/breedtes zal de text gewoon zoveel mogelijk op 1 regel proberen te proppen en juist niet gaan wrappen.
Ook werkt margin auto niet zomaar op block elementen, die rekken immers uit naar 100% en ik kan geen breedte opgeven. Een table display zou het wel kunnen, maar floats vallen eigenlijk af, aangezien die niet centreren.

De tekst eronder moet dus om goed te wrappen dezelfde breedte krijgen als de image. Ik heb dus nu een aantal consessies gedaan waardoor het op zich werkt in IE en Firefox:

• Het zit in een table anders geen table display gedrag in IE. Vanzelf naar de volgende rij springen gaat dus al niet meer.
• width voor de tekst staat voor IE met een expression op de breedte van de image, en voor moz staat de max-width op 100%.

En dat laatste is raar. Ik zou namelijk zeggen dat de image de tablecell op een bepaald breedte forceert. De max 100% van de tekst wordt daarmee maximaal de breedte van zijn parent: de cell. Firefox doet dit inderdaad zo (denkt blijkbaar zoals ik ook denk), en toont exact wat ik wil. IE gebruik de expression en doet het dus ook goed. Maar b.v. Opera en macIE laten de text gewoon doorlopen. De width zelf op 100% zetten werkt niet, en hier zit ik dus zo'n beetje vast nu.

De testcase ziet er zo uit:

code:

<div class="content">
    <table class="gallery">
    <tr>
        <td>
            [img]"fiets"[/img]
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </td>
        <td>
            [img]"fiets"[/img]
            <p>Lorem ipsum dolor sit amet, ...</p>
        </td>
        <td>
            [img]"fiets"[/img]
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </td>
    </tr>
    </table>
</div>

en de css:

code:

.content {
    width:600px;
    border:1px solid gray;
}

.gallery {
    margin:0 auto;
    border-collapse:collapse;
}

.gallery td {
    vertical-align:top;
    padding:5px;
}

.gallery img {
    display:block;
    
    /* broken image ff grootte geven */
    width:120px;
    height:120px;
}

.gallery p {
    font:11px arial;
    width:expression(this.parentNode.firstChild.offsetWidth);
    max-width:100%;
    padding:5px 5px 10px 0;
    margin:0;
}

en met verschillende tekst lengtes is dat geen gezicht (table-layout:fixed; helpt niet). iemand een idee of eerdere ervaring hiermee?

[André]

Kun je niet met allemaal floats werken die op float:left staan? Als de regel vol is gaan ze wel naar de volgende regel. Nadeel is wel dat ze niet meer gecentreerd staan dan.

[PhysicsRules]

Wat is nu je uiteindelijke vraag? Lukt het centreren niet? Probeer eens

code:

.content {
   ...
   text-align: center;
}

Zelf heb ik in mijn fotogalerij de foto's binnen de <p> gezet. Weet niet of dit 100% correct XHTML is, maar het werkt wel.

code:

<p><img ... />Lorem ipsum dolor sit amet, consectetuer</p>

[Clay]

André, het centreren moet juist wel maar je houdt dan nog steeds het probleem dat de tekst niet wrapt aan het einde van de image.

PhysicsRules, check de testcase, die is gewoon gecentreerd. De vraag is hoe ik dit - overal - werkend kan krijgen, en niet alleen op IE en FF.

[Clay]

Hmz. Het gedrag van width blijkt in dit geval niet echt te voorspellen. Bij de CSS 2.1 specs staat oa het volgende:

If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.

En dat is nou net het geval hier CSS1 zegt er niets over, en CSS3 is er niet duidelijker over. Ik ben bang dat het gewoon niet lukt zonder hacks of scripts.

[Verwijderd]

Het punt is ook, dat je bij een langere tekst, dus de situatie die je hebt uitgetekend, de tweede rij er heel vreemd komt uit te zien, tenzij alle elementen op de volgende rij op minimaal de hoogte beginnen van het langste element in de eerste rij.


Wat ik me nu afvraag, waarom beperk je bijvoorbeeld de thumbnail labels niet met bijv. text-overflow:ellipsis of is dat niet toegestaan. Je kan dan aan de alt tekst of met wat nifty dialogs de volledige tekst hangen.

Er is namelijk niets irritanters dan een incosistentie lijst met thumbnails in alle vormen en maten. Als je kijkt naar bijvoorbeeld de thumnbail view van Windows XP dan hebben ze daar ook allemaal dezelfde maten. Ook die media browser waar ik mee bezig was (weet je nog met multihreaded js zut, en sorting) die we toen 's avonds hebben besproken over MSN maakt gebruik van een vaste grootte aan thumbnails. Je kunt er anders ook helemaal niets meer mee

[ Voor 6% gewijzigd door Verwijderd op 22-09-2004 16:00 ]

[Clay]

text overflow kan ik helaas niet gebruiken. de tekst onder de afbeelding moet in het geheel leesbaar blijven. Vaste groottes van afbeeldingen en vaste lengtes van tekst zouden het inderdaad een stuk makkelijker maken ja Ueberhaupt als ik ergens ook maar een vaste afmeting voor had. Er zijn op deze manier gewoon te veel variabelen.

[Verwijderd]

Clay schreef op 22 september 2004 @ 16:26:
text overflow kan ik helaas niet gebruiken. de tekst onder de afbeelding moet in het geheel leesbaar blijven. Vaste groottes van afbeeldingen en vaste lengtes van tekst zouden het inderdaad een stuk makkelijker maken ja Ueberhaupt als ik ergens ook maar een vaste afmeting voor had. Er zijn op deze manier gewoon te veel variabelen.

De afbeelding hebben geen vaste breedte of vaste hoogte, hebben ze wel een vastgestelde max breedte of hoogte? Dus dat ze ook met aspect ratio in gedachte worden verkleind indien (image > max hoogte) || (image > max width) ?

Als ik kijk naar de 1ste rij met de middelste afbeelding als uitstulping, hoe gaat die 2de rij zich gedragen? Betekend dit dat in de 2de rij boven de 1e en 3de afbeelding een stuk witruimte komt te zitten? Of gaat de 2de rij op de visueel bovenliggende afbeelding aansluiten zodat je een golf beweging van afbeeldingen krijgt ipv een grid?

Eigenschap van floats is dat ze gewoon pakken wat ze pakken kunnen, als je dus elke thumbnail zou wrappen in een floatend element dan krijg je dat de 2de rij niet op één lijn staat. Je ontkomt niet aan het gebruik van Javascript om de offsetWidth op te vragen van je parent element, en adh hiervan het aantal elementen op een rij te bepalen per rij, en elke rij op dezelfde hoogte te positioneren.

Vooralsnog zie ik volgens de specs ook geen manier om het aan te pakken. Je geeft immers aan een variabel aantal elementen per rij te hebben, afhankelijk van de width. De ene keer passen er 10, de andere keer 3, een uitstekende taak voor floats, mits de afmetingen overeenkomen.

[ Voor 26% gewijzigd door Verwijderd op 22-09-2004 17:10 ]

[Clay]

_{typ ik hier net een heel boek, krijg ik ene templateset defaulttemplate error?}

De rijen moeten zich idd als een grid gedragen. De 2e rij moet dus onder het hoogste element van de rij ervoor beginnen. Nou heb ik vanwege die table wel een teller tot mn beschikking (in de xsl) zodat ik er als het met floats zou lukken ook een element met een clear tussen zou kunnen zetten...

Ik ben idd ook bang dat het niet gaat lukken zonder script. Al met al wordt het er zo niet mooier op allemaal

[Verwijderd]

Ja ik zat zelf nog te denken, als je nu de thumbs nest in een rij element, en dat rij element ook een float:left geeft dan worden ze mooi uitgelijnd. Maar natuurlijk gaat dat niet werken als je niet met vaste maten werkt. Want dan float een rij misschien als 2 rijen, en zit je met hetzelfde gelul.

Het is imo ook handiger om elke thumb een vaste positie mee te geven, dan kun je er nog wat leuks mee doen

var blaat = new album();
album.add(new photo('my photo','photo.jpg'));
album.add(new photo('my photo','photo.jpg'));

etc.