ruimte tussen meerdere foto´s via CSS

[Hereford]

Hallo,

 

Op een webpagina waarmee ik bezig ben staan verschillende tumbnails als link naar een vergroting. Omdat deze kleine foto´s verschillende formaten hebben is het lastig om deze in een tabel te plaatsen.

Nu wil ik wat meer witruimte rondom de verschillende foto´s. Ik had daarbij gedacht aan een externe stylesheet waarbij de groep foto´s in één keer wordt veranderd. Wanneer ik MARGIN of PADDING gebruik wordt de witruimte rondom de groep foto´s veranderd en niet rondom elke foto.

 

Welke code heb ik nodig waarin dit wel lukt?

 

Html-bestand:

<div class="galerie">

<a href="raku/foto01.jpg"><img alt="foto01" src="raku/klein01.jpg"></a>

<a href="raku/foto02.jpg"><img alt="foto02" src="raku/klein02.jpg"></a>

...

<a href="raku/foto11.jpg"><img alt="foto11" src="raku/klein11.jpg"></a>

</div>

 

CSS-bestand:

.galerie {

MARGIN: 5px

}

[Big fellow]

Waarom forceer je niet de thumbnails naar dezelfde grootte toe? Dus met height en width parameters in de img tag? Als je dat doet en ze dan in een tabel zet, en de tabel onzichtbaar maakt, dan ben je er (al) ?

Maar het kan uiteraard ook met een stylesheet, echter om een tabel achtige oplossing te maken in een CSS is niet echt eenvoudig. Ik gebruik daarom voor een groot deel ( zeg 95% ) CSS, maar ook nog "ouderwetse" tabellen voor dit soort dingen.

 

Big fellow

[Hereford]

De foto´s hebben verschillende formaten als 75 x 100, 100 x 100, 150 x 100, 100 x 210, 100 x 175

Wanneer ik deze via height en width forceer naar dezelfde grootte krijg ik erge vervormingen.

 

Dan kan ik in de IMG-tag beter vspace="5" en hspace="5" gebruiken.

Is hiervoor geen algemene code in CSS die je op een groep kunt gebruiken?

 

Hereford

[Gast]

Je kunt natuurlijk ook gewoon simpel een paar spaties ertussen zetten maar wel met

 

 

 

omdat html maar 1 spatie ziet en niet meerdere achter elkaar:)

[pinocchio]

Je hebt nu een box met de id gallery die je een margin

van 5px hebt gegeven, dit doet niets.

Die margin wilt zeggen dat je 5px rondom (buiten) die box vrij laat.

 

Geef de img de class of als het toch om alle

afbeeldingen gaat is het makkelijker met:

 

img{

margin:5px;

}

[Hereford]

Dit werkt zoals ik het hebben wou.

Ik zat alleen te zoeken hoe je vspace en hspace kon veranderen met CSS.

 

Bedankt,

Hereford

[Gast]

<img src="image.jpg" width="100" height="100" style="margin-bottom:5px; margin-left: 5px; margin-right:5px; margin-top:5px;">

of

<img src="image.jpg" width="100" height="100" style="padding-bottom:5px; padding-left:5px; padding-right:5px; padding-top:5px; ">