[CSS]Floatende objecten terugspringen naar begin van regel

[mithras]

Ik zit hier met een (waarschijnlijk gemakkelijk op te lossen) probleem. Ik ben een gallery aan het maken, waarin thumbnails van afbeeldingen worden getoond. Onder elke thumb komt een linkje om te reageren op die foto. Om deze constructie toe te passen is de volgende html gebruikt:

HTML:

<div class="gallery-photos">
  <a href="locatie/van/plaatje.jpg">
    <img src="locatie/van/thumb/plaatje.jpg">
  </a>
  <p>Hoi!</p>
</div>

Met de volgende css:

Cascading Stylesheet:

.gallery-photos{
    float:left;
    text-align:center;
    margin: 2px;
}

Het probleem is dat sommige foto's landscape zijn en andere in portrait. Dat betekent dat als er een nieuwe regel wordt gemaakt met foto's (door de float links uitgelijnd) blijven deze haken aan de opstaande foto's.

Een voorbeeld:

Een margin-bottom of een line-height toepassen heeft geen zin. Ook kan ik van de div als blokelement niets anders maken (bijv een span) omdat er een nieuw blokelement inzit (de p), waardoor een inline element dus niet werkt.
Het is geen probleem als ik de p binnen .gallery-photos een display:inline meegeef, zodat ze áchter de thumb komen te staan. Alleen als ze eronder staan werkt het niet.

Ook zijn er vrijwel geen vergelijkbare problemen, omdat andere users met floats zitten te klooien waarin de elementen allemaal eenzelfde hoogte hebben. Dat is hier niet het geval. Heeft iemand een idee?

edit:
Ik weet dat er per ongeluk 2 topics zijn geopend. Is een tr gedaan, andere wordt hopelijk zsm gesloten

[ Voor 3% gewijzigd door mithras op 24-09-2006 12:13 ]

[Verwijderd]

Je moet zorgen dat alle elementen in de float dezelfde hoogte hebben, dan zullen ze op één lijn worden weergegeven.

[mithras]

Verwijderd schreef op zondag 24 september 2006 @ 12:36:
Je moet zorgen dat alle elementen in de float dezelfde hoogte hebben, dan zullen ze op één lijn worden weergegeven.

Mm, dat was heel dom. Ik keek naar de tekst in het blok, en de margin/paddings. Maar de hoogte zelf meegeven was natuurlijk genoeg. Stom. Maar wel bedankt

[moozzuzz]

Je kan dit ook met een <ul><li>-constructie, daar een fotoboek eigenlijk gewoon een lijstje foto's is.

JavaScript:

ul.fotoboekfoto   {list-style: none; margin: 0; padding: 0; }
li.fotoboekfoto   {display: inline; text-align: center; padding:0; margin: 0;}
li.fotoboekfoto img {border: 10px solid #ffffff; background-Color: #f9f9f9; vertical-align:middle;}

HTML:

<center>
<ul class="fotoboekfoto">
   <li class="fotoboekfoto"><a href="" title=""><img alt="" src="./1dynamic/getfoto.php?foto=blah.jpg&w=150&h=150&thumb=1"></a></li>
</ul>
</center>

- getfoto.php geeft dan een thumbnail terug met maximale afmetingen: w=150 en h=150;
- voorbeeld op eigen site

[Geert.H]

Je mag ook gewoon een tabel gebruiken, het is data die je wilt rangschikken. Is niets mis mee om hier een tabel voor te gebruiken.
Is in ieder geval netter dan een lijst

[mithras]

moozzuzz schreef op maandag 25 september 2006 @ 18:58:
Je kan dit ook met een <ul><li>-constructie, daar een fotoboek eigenlijk gewoon een lijstje foto's is.

JavaScript:

ul.fotoboekfoto   {list-style: none; margin: 0; padding: 0; }
li.fotoboekfoto   {display: inline; text-align: center; padding:0; margin: 0;}
li.fotoboekfoto img {border: 10px solid #ffffff; background-Color: #f9f9f9; vertical-align:middle;}

HTML:

<center>
<ul class="fotoboekfoto">
   <li class="fotoboekfoto"><a href="" title=""><img alt="" src="./1dynamic/getfoto.php?foto=blah.jpg&w=150&h=150&thumb=1"></a></li>
</ul>
</center>

Net als tabulair (zie hieronder) zou je het ook als een lijst kunnen zien. Toch moet je imho veel meer code gebruiken, dan dat ik nu doe (welke semantisch gewoon wel correct is). Het is een overweging, maar als ik onder elke foto ook tekst wil hebben, is er meer css nodig dan nu. En ik streef ernaar om alles zo schoon mogelijk te houden.
Het is css, geen js

offtopic:
Alleen k*t IE dat die niet netjes de floatende objecten eindigt. Ik ontwikkel niet onder Windows, dus zie het niet direct. Misschien een lelijke hack gaan inbouwen, maar ik blijf wel liever met deze blokelementen zitten

Ghoekzema schreef op maandag 25 september 2006 @ 19:41:
Je mag ook gewoon een tabel gebruiken, het is data die je wilt rangschikken. Is niets mis mee om hier een tabel voor te gebruiken.
Is in ieder geval netter dan een lijst

Je zou de plaatjes als tabulaire data kunnen zien. Dan zitten echter alle foto's netjes onder elkaar. Door ze gewoon te floaten verspringen ze iets meer, omdat je smallere en breedere thumbnails hebt (als in: portrait en landscape), zie hiero. Persoonlijk vind ik dat mooier, dan alles recht en strak uitgelijnd, omdat er nu gewoon 10px ruimte tussen beide plaatjes zit, ongeacht de breedte van de thumbnail.