[css] List stylen als "tabel", in een raster

[Zoefff]

Omdat plaatjes soms meer kunnen zeggen dan 1000 woorden, begin ik daar even mee.



Dit is een stukje van een gallery-admin die ik aan het maken ben. Het is heel simpel gewoon een lijst, met li { float:left; }.

Door de lijst een bepaalde breedte mee te geven, krijg je dus alle items netjes in een soort raster op je scherm.

Het probleem is nu de hoogte van sommige listitems doordat er een groter plaatje in staat. Zoals je bij het eerste plaatje al ziet, dat neemt eigenlijk 2 rijen in beslag. De bedoeling is dat het 5e plaatje ónder het eerste terecht komt, terwijl hij er nu náást komt te staan.

Is er (binnen css) een mogelijkheid om dit op te lossen?

Een fixed hoogte kan ik niet meegeven, aangezien ik niet weet hoe groot de plaatjes gaan worden.

[crisp]

je 5e (en 9e en 14e etc.) plaatje een clear-property geven. Helaas is de nth-selector nog niet breed ondersteund...

[BtM909]

Tabel gebruiken?

Je kan nu nl. niks clearen, tenzij je altijd 4 LI's naast elkaar wilt en dan per 'row' een wrapper gebruikt. Maar mooi is anders

---

crisp schreef op zondag 05 juni 2005 @ 23:54:
Helaas is de nth-selector nog niet breed ondersteund...

Dat is helaas de beste oplossing idd

[ Voor 44% gewijzigd door BtM909 op 05-06-2005 23:55 ]

[Zoefff]

crisp schreef op zondag 05 juni 2005 @ 23:54:
je 5e (en 9e en 14e etc.) plaatje een clear-property geven. Helaas is de nth-selector nog niet breed ondersteund...

Tsja, CSS level 3 is nu hetzelfde als de Pentium 4 toen ik nog een 286 had

Maar, hoewel het niet echt een nette oplossing is, het 4e item steeds een clear geven had ik nog niet aan gedacht, wat dom.

Bedankt

BtM909 schreef op zondag 05 juni 2005 @ 23:54:
Tabel gebruiken?

Dat heb ik expres niet gedaan, aangezien dat semantisch niet helemaal jofel zou zijn

[Tonio]

http://elitedead.ath.cx/gallery.htm heel snel in elkaar geprutst, maa ris zoiets wat je bedoeld?

oh, dat had crisp dus ook al geopperd

[ Voor 19% gewijzigd door Tonio op 06-06-2005 00:04 ]

[Zoefff]

Jup, dat is het. Werkt ook prima, alleen is het wel minder flexibel. Ik zit nu vast aan een breedte van 4 stuks, en als ik dat anders wil moet ik dat weer in m'n script veranderen

[SuperRembo]

En wat is er tegen om hier een tabel voor te gebruiken?

[crisp]

SuperRembo schreef op maandag 06 juni 2005 @ 00:29:
En wat is er tegen om hier een tabel voor te gebruiken?

het is geen tabulaire data maar een opsomming?

[Zoefff]

Helemaal opgelost is het nog niet trouwens

De pagina bestaat uit 2 kolommen. Links een dirlisting, en rechts de thumbs. Als ik het 5e plaatje clear:both; meegeef, dan komt 'ie dus naast, maar ook onder de dirlisting-kolom terecht

Nouja, ik vogel wel wat verder

[Verwijderd]

Geef of het vijfde plaatje clear:left of het vierde plaatje clear:right mee. Lijkt me. (Afhankelijk van waar die tweede column staat.) Absoluut positioneren is uiteraard ook nog een oplossing.

[BtM909]

Zoefff schreef op maandag 06 juni 2005 @ 00:00:
[...]
Dat heb ik expres niet gedaan, aangezien dat semantisch niet helemaal jofel zou zijn

crisp schreef op maandag 06 juni 2005 @ 00:31:
[...]

het is geen tabulaire data maar een opsomming?

Mmmm, zou weleens centraal discussiepunt moeten zijn. Waar eindigt een opsomming?

[Spruit_elf]

bij een tabel is er een relatie tussen de waarde van de rij en de waarde van de kolom en de inhoud van de cel, in een lijst is dat er neit, daar is er alleen een relatie tussen de items onderling, maar bij een ul is dat het enige en bij een ol is er ook nog een volgorde.

verder een oplossong voor zoefff:

je kan ook alle li's van een gelijke grote maken en dan de plaatjes erin dmv overflow:hidden of overflow :scroll er in laten passen. Eventueel kan je dan met :hover of javascript het zo maken dat de plaatjes in zijn geheel getoond worden oid als een soort van tooltip of pop-over

[Verwijderd]

Op het moment dat je gerelateerde data over een object wilt structureren? (Dus dat er meerdere stukjes 'data' zijn en niet maar een, zoals hier alleen het plaatje de data is.)

[Verwijderd]

eigenlijk vind ik de hele boel er gewoon niet uitzien en ik zou persoonlijk voor thumbs kiezen die horizontaal en verticaal een maximum hebben, zodat je thumb altijd in een vierkante container past (zeg maar zoals de thumbs in een explorer preview).

Dan hoef je ook niet zo te "puzzelen"

[Sappie]

Wat mophor tikte wilde ik ook net voor gaan stellen Heb afgelopen paar dagen een fotoalbum beheer geschreven en daarbij liep ik ook tegen dit "probleem". Heb er toen ook voor gekozen vierkante containertjes te nemen waar de foto ongeacht zijn verhouding in past.

[Zoefff]

Jup, daar heb ik ook wel aan gedacht, maar;

M'n thumbs zijn nu 120px breed. Dat is een prima breedte voor de landscape foto's, aangezien de hoogte dan over het algemeen 80px word (foto's van mij zijn altijd 3:2). Als je die 80px als maximum hoogte aanhoud, dan worden portrait foto's maar 53px breed. Dat is wat mij betreft echt te weinig, zodra ik moeite moet doen om iets op de foto te herkennen vind ik het eigenlijk vervelend.

Ik heb hierbij ook een beetje naar het t.net fotoalbum gekeken, daar word ook een maximum breedte aangehouden en geen hoogte. Verschil is alleen dat ze daar (nog) wel een tabel gebruiken, dus niet tegen mijn probleem aanlopen.

[Verwijderd]

ik bedoel dus dat je portrait foto's dan ook 80 x 120 zijn, dus je container 120 x 120 (plus de hoogte van je selectbox), iets als http://www.venusovergang.nl/resultaten/fotoalbum.php

je kan zelfs nog door je img verklein script (php?) je thumbs gewoon vierkant laten maken, met balken (zwart / wit / achtergrondkleur / transparant) laten maken

[Zoefff]

Ah, ik snap wat je bedoelt. Dat is inderdaad ook een goede oplossing, die ga ik straks nog even uitproberen.

Wat ik nu probeer is de oplossing van mrcactus, de volledige afbeelding pas laten zien on hover.

Werkt opzich prima, alleen nou heb ik weer gedonder met de z-index.

Cascading Stylesheet:

#thumbs ul {
    padding-left:0px;
    margin-left:0px;
    position:relative;
    z-index:10;
}
#thumbs li {
    list-style-type:none;
    width:130px;
    height:102px;
    text-align:center;
    background-color:#DDDDDD;
    border:1px solid #B23327;
    margin:3px;
    padding:5px 0px 5px 0px;
    float:left;
    position:relative;
    z-index:20;
    overflow:hidden;
}
#thumbs li:hover {
    width:130px;
    min-height:102px;
    height:auto;
    overflow:visible;
    position:relative;
    z-index:30;
}

Je zou toch zeggen dat on hover de li bóven de rest komt te liggen, maar hij schuift ze gewoon allemaal opzij (en dan krijg je dus weer de wir-war uit de TS ).

edit:
Ik ben me er trouwens van bewust dat dit een FF-only oplossing is, maar dat maakt niet uit. Ik gebruik het aanvankelijk alleen voor mezelf. En, als je het in IE wilt gebruiken, kan je opzich ook nog gewoon op de plaatjes klikken om ze te selecteren, alleen zie je dan niet of het vinkje aan staat of niet

[ Voor 15% gewijzigd door Zoefff op 06-06-2005 12:33 ]

[IschaGast]

Ik zou gewoon zoiets maken zoals dit:
http://www.dbowman.com/photos/sxsw05/gallery/

[Verwijderd]

code:

#thumbs li:hover {
    width:130px;
    min-height:102px;
    height:auto;

Je moet juist niks aan de height en width wijzigen. Alleen overflow:visible het werk laten doen.

[Zoefff]

Ja, maar dan "klapt" alleen het plaatje uit, en zweeft zijn selectbox dus ergens over het plaatje eronder. Ik wil graag dat de achtergrond & border ook meeklapt, voor de duidelijkheid.

[Verwijderd]

Dan zou je of een element binnen het LI element moeten hebben wat als nadeel heeft dat mensen moeten hoveren om de checkbox aan te kunnen vinken (hoewel dat misschien sowieso al het geval is). Als je alles absoluut positioneert dan zou je huidige oplossing moeten werken.

[Verwijderd]

Kun je es een nieuwe screenshot plaatsen hoe het nu is ??

[Zoefff]

Het ziet er nu zo uit:



En als je met je muis over een item heengaat, dan ziet het er zo uit:



Waarbij alles dus gewoon een plaatsje opschuift

Ik ben er nog steeds niet uit wat ik nou ga doen, alle thumbs 120*120 met eventueel opvul-balken, of alles 120 breed, en onbepaalde lengte, en er voor zorgen dat het mooi uitklapt.

[Verwijderd]

zoals morphor zegt, 't ziet er niet echt super uit. mensen klikken toch wel als ze de grote versie willen zien, zelfs vanaf een klein thumbje. (de mind word er door getriggered) laat ik m'n eigen site "promoten" zelfde grootte staat m.i. mooier dan die ongelijke handel