afbeelding uitlijnen met div

[Verwijderd]

Ik zou graag gebruik maken van div's om mijn fotos te centeren op een pagina.

Ik heb 3 foto's naast elkaar staan en dit meermaals op een pagina.
Deze foto's verschillen van grootte.

Als ik div's gebruik, dan word alleen de eerste rij goed uitgelijnd.
Hoe kan ik dit oplossen? Gaat dit met div's of moet ik dit op een andere manier oplossen?

[djluc]

Waarschijnlijk op basis van je beperkte info kan je dit doen met floating divjes en het clear statement.

[WPN]

waarom kan je geen tabel gebruiken en die met de div centreren?

[Woudloper]

Zoals al eerder gezegd door djluc, kan jij (ellenv) wellicht iets meer informatie geven over hoe je de foto's wilt centreren. Wellicht door middel van een illustratie met de huidige HTML/CSS welke je gebruikt (wel even tussen [code=html] code [/code] plaatsen)

Het floaten is wellicht een optie en anders kan je ze nog gaan groeperen, maar ik neem aan dat dat niet is wat je wilt...

[crisp]

Plaatjes zijn gewoon mbv text-align:center te centreren. Op het moment dat je block-level elementen zonder fixed width wilt gaan centreren loop je in de problemen...

[curry684]

Verwijderd schreef op donderdag 31 maart 2005 @ 04:26:
Als ik div's gebruik, dan word alleen de eerste rij goed uitgelijnd.

Ik snap vooral deze regel niet Wil je iedere regel op basis van z'n eigen grootte centreren of bedoel je met 'uitlijnen' dat de plaatjes verticaal ook onder mekaar moeten komen te staan?

[Verwijderd]

dit is de html code:

HTML:

<div id="left">[img]"images/figure-2.1.gif"[/img]</div>
<div id="right">[img]"images/figure-2.3.gif"[/img]</div>
[img]"images/figure-2.2.gif"[/img]

dit is de css code:
#left
{
float: left;
}

#right
{
float:right;
}

de afbeelding aan de rechterkant word goed uitgelijnd en de afbeelding aan de linkerkant ook.
Maar de middelste foto word tegen de rechterkant geplakt en ik zou deze graag in het midden van de andere 2 fotos krijgen (namelijk evenveel witruimte rechts als links).

De pagina ziet er als volgt uit:
tekst ...
[ ]     [ ]     [ ]
tekst ....
tekst ...
[    ] [    ] [   ]

omdat deze fotos in rij 2 groter kunnen zijn als in rij 2, kan je de afstand niet op een bepaalde waarde instellen.
Als je een vaste waarde instelt voor de eerste rij klopt het niet voor de 2, 3, ... rij.

[ Voor 21% gewijzigd door Verwijderd op 01-04-2005 04:48 ]

[WPN]

code:

<div id="alles">
 <div id="left">[img]"images/figure-2.1.gif"[/img]</div>
 <div id="right">[img]"images/figure-2.3.gif"[/img]</div>
 [img]"images/figure-2.2.gif"[/img]
</div>

css
#alles
{
 text-align: center;
}
(en de rest van jou css code)

maar is het niet handiger om er thumbnails (vaste afmetingen) van te maken en als je daarop klikt de werkelijke foto ziet in zn eigen formaat

hetzij met een target="_blank" of met een stukje javascript waar je een nieuw window laat komen met specifieke afmetingen voor die fotos


edit: ps... aangezien je het meerdere keren op de site wilt zetten moet je de id's vervangen voor class
met de id werkt het wel, maar een id behoort naar mijn weten uniek te zijn in de pagina en dat wordt het dus niet op deze manier, het ziet er dan zo uit:

code:

<div class="alles">
 <div class="left">[img]"images/figure-2.1.gif"[/img]</div>
 <div class="right">[img]"images/figure-2.3.gif"[/img]</div>
 [img]"images/figure-2.2.gif"[/img]
</div>

css code:
.alles
{
 text-align: center;
}
.left
{
float: left;
}

.right
{
float:right;
}

[ Voor 93% gewijzigd door WPN op 01-04-2005 11:38 ]