Liquid thumbnail pagina.

[Nephilim]

Ik probeer een pagina met een aantal thumbnails te maken. Normaal gebruik
ik hiervoor een tabel met bvb 6 td's. Probleem is dat dat je op een lage
resolutie een deel niet ziet, en op een hoge veel plaats over houdt.

Ik probeer nu om dit te maken met 'liquid design', maar dat lukt dus
totaal niet.

ik heb een <div id="pictures"> die ik ergens positioneer en daarin toon ik
dan alle thumbnails. Het probleem is dat er zowel portrait als landscape
pictures tussen zitten, waardoor het nogal rommelig overkomt.

Ik zou dan ook graag hebben dat elke picture in een soort blok zit, zoals
het zou zijn als ik een tabel zou gebruiken.

Zoiets dus:

code:

 +-----*-----+-----*-----+
 |     | *** |     | *** |
 |*****| *** |*****| *** |
 |*****| *** |*****| *** |
 |*****| *** |*****| *** |
 |     | *** |     | *** |
 +-----+-----+-----+-----+

Ik dacht aan een <span> ofzo te gebruiken en daarin een 'width: 120px;' te
definiëren, maar dan resized hij de foto, wat niet echt m'n bedoeling is.

Enig idee hoe ik dit toch kan oplossen?

[Verwijderd]

ik zou thumbnails gewoon altijd resizen en anders croppen naar 66x100, zo blijft het overzichtelijk. Ik zou ze allemaal portrait houden dus.
met het programma: arles (http://download.com.com/3000-2192-10175825.html?tag=lst-0-1) kan je dit heel makkelijk doen.

Misschien niet het antwoord op je vraag, maar wel een goeie tip

[Nephilim]

Altijd portrait houden is idd een mogelijkheid, maar teneerst is het niet echt mooi de helft op z'n kant te zien staan en ten tweede heb ik maar weinig te zeggen over de foto's, t zijn de mijne niet.

Als het echt niet anders gaat, is dit natuurlijk nog steeds een oplossing.

[HunterPro]

Nephilim schreef op 26 december 2002 @ 15:06:
Altijd portrait houden is idd een mogelijkheid, maar teneerst is het niet echt mooi de helft op z'n kant te zien staan en ten tweede heb ik maar weinig te zeggen over de foto's, t zijn de mijne niet.

Als het echt niet anders gaat, is dit natuurlijk nog steeds een oplossing.

maak met een server-side systeem zoals bijvoorbeeld http://www.imagemagick.org een wit vierkant (max-grootte), zwarte lijn aan de buitenkant, en plaats een verkleinde versie van je origineel hier in. Scheelt je in images op je server, en je werkt met vierkante thumbs.

[Nephilim]

Dat is ook een mogelijkheid, maar mijn mogelijkheden zijn spijtig genoeg beperkt tot de standaard PHP-spullen.


Ik zou er nochtans zeker van zijn dat dit ook via CSS op te lossen is.

[Nephilim]

Ondertussen heb ik het dus kunnen oplossen via CSS:
http://www.realworldstyle.com/thumb_float.html

Een voorbeeldje hiervan is te zien op http://www.realworldstyle.com/thumbs_2.html (resize je browser om het effect te zien)