[CSS] "fotoalbum" opmaken

[Dr_Frickin_Evil]

Ik ben bezig met een fotoalbum. Hierbij wil ik de foto's in kolommen van 3 en maximaal 4 rijen per keer laten zien. In eerste instantie deed ik dit gewoon met tabellen, maar daar ben ik uiteindelijk vanaf gestapt voor het volgende:

code:

<div class="partypics">
<div>[img]"foto1.jpg"[/img]</div>
<div>[img]"foto2.jpg"[/img]</div>
<div>[img]"foto3.jpg"[/img]</div>
</div>
<div class="partypics">
<div>[img]"foto4.jpg"[/img]</div>
<div>[img]"foto5.jpg"[/img]</div>
<div>[img]"foto6.jpg"[/img]</div>
</div>
<div class="partypics">
<div>[img]"foto7.jpg"[/img]</div>
<div>[img]"foto8.jpg"[/img]</div>
<div>[img]"foto9.jpg"[/img]</div>
</div>

CSS-code:

code:

div.partypics { clear: both; margin: 12px 0 0 0; padding: 0; width: 100%; }
div.partypics div { float: left; height: 100%; margin: 0; padding: 0; width: 33%; }
div.partypics img { float: left; margin: 5px 0 0 5px; padding: 0; }

Dit geeft me niet helemaal het resultaat wat ik zou willen hebben. Sowieso vind ik float absoluut niet handig om mee te werken. Ik heb elke img in een div gezet, omdat ik op die manier de beschikbare breedte beter kan verdelen. Wat is volgens jullie de beste manier om zo'n tabel vorm te geven?

[ Voor 22% gewijzigd door Dr_Frickin_Evil op 13-05-2004 12:30 ]

[André]

Cascading Stylesheet:

DIV { width: 33%; text-align:center; display: inline; }

HTML:

<div>[img]"foto1.jpg"[/img]</div>
<div>[img]"foto1.jpg"[/img]</div>
<div>[img]"foto1.jpg"[/img]</div>
<br />
<div>[img]"foto1.jpg"[/img]</div>
<div>[img]"foto1.jpg"[/img]</div>
<div>[img]"foto1.jpg"[/img]</div>
<br />

Zo?

Of display:inline weglaten en <span> gebruiken.

[ Voor 81% gewijzigd door André op 13-05-2004 13:34 ]

[MarkvE]

André schreef op 13 mei 2004 @ 13:04:

Cascading Stylesheet:

DIV { width: 33%; text-align:center; }

Zo?

Dat is knap, als je zo verschillende DIV's naast elkaar krijgt

Misschien is het handig als de TS een voorbeeldje laat zien of iig de grootte (= breedte) van de gebruikte images vertelt, dat is namelijk een belangrijk punt in zoiets.

[André]

MarkvE schreef op 13 mei 2004 @ 13:22:
[...]


Dat is knap, als je zo verschillende DIV's naast elkaar krijgt

Hmm, inderdaad, foutje. Je moet of span gebruiken in dat voorbeeld, of in de stylesheet de regel display:inline meegeven.

[roytanck]

http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

bekijk deze tutorial eens... heel mooie oplossing imho...

[djluc]

Ik wil de pret niet drukken hoor maar dit zijn toch vrij tabulaire gegevens, we hebben het zelfs al over rijen en kolommen. Waarom willen we dit dan niet gewoon in een tabelletje zetten?

[André]

djluc schreef op 13 mei 2004 @ 14:18:
Ik wil de pret niet drukken hoor maar dit zijn toch vrij tabulaire gegevens, we hebben het zelfs al over rijen en kolommen. Waarom willen we dit dan niet gewoon in een tabelletje zetten?

Dit zijn plaatjes, geen hele lappen data.

[Verwijderd]

Volgens mij is het een (ongeordend) rijtje met plaatjes.

[djluc]

Verwijderd schreef op 13 mei 2004 @ 15:09:
Volgens mij is het een (ongeordend) rijtje met plaatjes.

Het is een beetje een twijfel geval, want de betekenis van de kolommen is hier niet echt serieus. Ze zijn puur voor de opmaak wat natuurlijk niet de bedoeling is. Daarentegen wil je wel de structuur van een tabel hebben, en of het de bedoeling is om deze na te maken in css vraag ik me dan ook weer af.

[Verwijderd]

Als je de structuur van tabellen wil hebben, dan zou ik gewoon ook tabellen gebruiken. Het lijkt me dat je dan de minste problemen krijgt.
css is ook bedoeld om dingen op te maken in allerlei xml-dialecten, en die moeten ook gebruik kunnen maken van allerlei html-gerelateerde opmaak-dingen.

[djluc]

Verwijderd schreef op 13 mei 2004 @ 16:06:
Als je de structuur van tabellen wil hebben, dan zou ik gewoon ook tabellen gebruiken. Het lijkt me dat je dan de minste problemen krijgt.
css is ook bedoeld om dingen op te maken in allerlei xml-dialecten, en die moeten ook gebruik kunnen maken van allerlei html-gerelateerde opmaak-dingen.

Maar wil je wel de structuur van een tabel hebben? Heeft het enige betekenis dat een afbeelding in rij x kolom y zit? Wat dat betreft zou het geen tabel behoeven.

[disjfa]

Je kan wel gaan zeuren of het met tabellen zou kunnen of niet, maar de ts heeft gekozen voor een oplosing naar zijn idee en zijn idee ziet er uit alsof hij het niet tabulair wilt oplossen. Dus pls die discussie hier achterwegen laten

[Dr_Frickin_Evil]

De discussie gaat weer verder zie ik .
Het werkt, ik heb het opgelost met de oplossing van Weefselkweekje, dat werkt prima.

[Ibex]

Helaas was ik te laat hier in dit topic, maar toch post ik nog eventjes een oplossing die ik gebruikt heb bij mijn site. Het kan maar een nuttige toevoeging zijn:

html:

code:

<div class="l">
  inhoud kolom 1
  inhoud kolom 1
</div>
<div class="l">
  inhoud kolom 2
  inhoud kolom 2
</div>
...
<div class="r">
  inhoud kolom n
  inhoud kolom n
</div>

CSS:

code:

div.l {
  display: inline;
  float: left;
}
div.r {
  display: inline;
}

Evenuteel het geheel van div-kolommen in een grote div zetten op het geheel zeker bij elkaar te houden.

[T-MOB]

In aanvulling op dat maxdesign-voorbeeld...
Ik zou geen DIV aanmaken voor elke thumbnail maar iets doen als dit:

code:

<div id="thumbnails">
<img etc..>
<img etc..?
etc...

CSS:

code:

#thumbnails { width: leuke breedte; }

#thumbnails img {
width: 50px;
height: 60 px;
float: left;
}

Uiteraard geldt dat je slechts width of height hoeft op te geven als je de images in verhouding wil houden. Als je 3 images per rij wil hebben zou ik zeggen:

code:

#thumbnails {
width: 3 x img-width + 3 x img-margin;
padding-left: 1 x img-margin;
}
#thumbnails img {
width: img-width;
margin-right: img-margin;
float: left;
}

[Dr_Frickin_Evil]

Maar dan kan natuurlijk alleen als de images steeds dezelfde breedte hebben, en dat is nu niet het geval.