[xhtml]Kleine image gallery weergeven.

[Onbekend]

Ik heb een aantal kleine plaatjes op een site staan. Zodra je ze aanklikt, krijg je de grote foto in een nieuw venster te zien.

Zie hier het voorbeeld:

HTML:

<span><a href="locatie" target="_blank">
<img src="afbeelding" alt="beschrijving" /></a></span>
<span><a href="locatie" target="_blank">
<img src="afbeelding" alt="beschrijving" /></a></span>
<span><a href="locatie" target="_blank">
<img src="afbeelding" alt="beschrijving" /></a></span>
..... en zo verder.

Dit werkt netjes. Maar nu wil ik een tekst onder de plaatjes hebben.
Ik dacht dit simpel op te kunnen lossen d.m.v. het volgende:

HTML:

<span><a href="locatie" target="_blank">
<img src="afbeelding" alt="beschrijving" /><br />beschrijving</a></span>

Maar dit heeft helaas niet het gewenste effect. De plaatjes komen schuin onderelkaar te staan.

Een tabel en een div gebruiken werkt ook niet omdat deze van blokniveau zijn.
Een vaste breedte geven aan een element is ook niet gemakkelijk aangezien de kleine plaatjes van verschillende afmetingen zijn.

Ik heb wel iets gevonden, maar die werkt m.b.v. JavaScript. (zoals Google)

Maar ik neem toch aan dat dit ook zonder JavaScript oplosbaar moet zijn?

[NitroX infinity]

Uhm, moet 'beschrijving' niet na afsluiting van A ? Dus:

HTML:

<span><a href="locatie" target="_blank"> 
<img src="afbeelding" alt="beschrijving" /></a><br />beschrijving</span>

[disjfa]

Wat wil je precies maken? Een lijst als google, float wat divjes of spannetjes of iets anders naast elkaar of pak een tabel. Zorg dat ze vaste hoogtes hebben en je bent klaar.

Waar wil je precies naartoe gaan?

En @NitroX infinity: waarom?

[ Voor 6% gewijzigd door disjfa op 13-02-2007 23:35 ]

[BtM909]

En waarom gebruik je nou XHTML? En onnodig spans voor hetgeen wat je bouwt?

[NitroX infinity]

@disjfa; nu je die vraag stelt zie ik het zelf ook niet echt in waarom.

Misschien dat die break (<br />) de boel verprutst?

[Rowanov]

HTML:

<div id="container">
  <div class="fotobox">
    <a href="locatie" target="_blank"><img src="afbeelding" alt="beschrijving" />
    <br />beschrijving</a>
  </div>
  <div class="fotobox">
    <a href="locatie" target="_blank"><img src="afbeelding" alt="beschrijving" />
    <br />beschrijving</a>
  </div>
  <!-- etc... -->
</div>

Cascading Stylesheet:

#container {
  width: 600px;
  overflow: auto;
}
.fotobox {
  width: 200px;
  height: 300px;
  float: left;
}

Erg veel meer dan dit is het niet

[Onbekend]

@NitroX infinity: Je hebt gelijk. De </a> moet achter de tekst aangezien die ook aangeklikt moet worden.

@disjfa: Ik wil dus dat de plaatjes net zoals tekst wordt uitgelijnt: Eerst van links naar rechts, en als het er niet op past ga je op de volgende regel verder. Kijk eens bij Google -> Afbeeldingzoeker voor een voorbeeldje.

@BtM909: Dat komt voort door uitbreiding van de rest van de site. (Zoals je zeer waarschijnlijk gemerkt hebt, is dit niet de gehele webpagina. )
Die spans leek mij de oplossing, omdat div op blockniveau werkt.

@Rowanov: Ik hoop dat die divs werken. Ik kan het pas vanavond uittesten.

[tec]

Aangezien het een lijst images is zou ik er eerder voor kiezen ze in een UL te stoppen.

dan in elke LI een A met daarin een IMG en daaronder een span met de naam van het image, deze kun je dan altijd nog horizontaal centreren of iets dergelijks.

[Rowanov]

Dat is inderdaad semantisch beter, maar dan komt er wel een zut extra styling bij kijken. Ik heb het eigenlijk bewust zo gedaan, zodat het principe duidelijk wordt en om het omtoveren van list naar block even buiten bschouwing te laten.

[Onbekend]

Ok, ik heb het getest en het werkt.

Het item wat toegevoegt moest wordt was float: left;.
Achteraf zeg ik oja, maar ik ben helaas wel 3 dagen aan het klooien geweest...


@Rowanov en de rest: Bedankt voor de hulp.

[HuHu]

Je zou ook de prachtige Lightbox JavaScript klasse kunnen gebruiken voor het weergeven van de afbeeldingen, in plaats van een nieuw venster.

[Onbekend]

Ik heb expres voor een nieuw venster gekozen omdat de gebruiker helemaal niet wordt belemmert door JavaScript of site-layout. Bij het wegklikken van de foto is de site weer te zien.

[Verwijderd]

Ook onbekend schreef op woensdag 14 februari 2007 @ 21:30:
Ok, ik heb het getest en het werkt.

Het item wat toegevoegt moest wordt was float: left;.
Achteraf zeg ik oja, maar ik ben helaas wel 3 dagen aan het klooien geweest...


@Rowanov en de rest: Bedankt voor de hulp.

offtopic:
3 dagen??? Mijn god, moet ik niet op mijn werk flikken

[Onbekend]

Eigenlijk een zondagmiddag en de avondjes daarna.
Het is voor mezelf en niet voor m'n werk....