Twee of meer afbeeldingen MET onderschrift EN opsomteken NAAST elkaar

[TeKoopjes]

Beste allemaal,

Eerst even dit: ik ben een absolute beginner....

Maar ik heb een website gemaakt (althans daar ben ik nog mee bezig) waar ik onze eigen spullen op verkoop.
Nee, geen webwinkel, maar een gewone site.

Nu hebben we nogal wat verzamelingen te koop, o.a. treinen.

Ik heb noodgedwongen alle afbeeldingen onder elkaar gezet, een ramp want zo'n site wordt te lang.

Nu kan ik wel twee plaatjes naast elkaar krijgen maar ik wil er iets bij zetten:
1. Een opsommingsteken (in dit geval een driehoekje)
2. Een bijschrift om het compleet te maken.

Maar wat ik ook probeer, naast elkaar gaat, maar de bijschriften vliegen over de hele site en de opsommingstekens blijven gezellig bij elkaar boven op de eerste foto staan.

Een tabel schijnt niet meer te kunnen in websiteland.
Lukte trouwens ook niet ;((
Maar hoe dan?

Wie weet raad?

 

[bron]

hoi tekoopjes, het beste kun je op internet een gallery zoeken. Die hebben al de mogelijkheden die je zoekt. Als die te uitgebreid of te complex zijn dan kun je misschien iets met het volgende

<div class="photos">
	<p><img src="foto1.jpg" alt="" /><br />Treinen</p>
	<p><img src="foto2.jpg" alt="" /><br />Auto's</p>
	<p><img src="foto3.jpg" alt="" /><br />Fietsen</p>
	<p class="clear"> </p>
	<p><img src="foto4.jpg" alt="" /><br />Scooters</p>
	<p><img src="foto5.jpg" alt="" /><br />Vliegtuigen</p>
	<p><img src="foto6.jpg" alt="" /><br />Zeilboten</p>
	<p class="clear"> </p>
</div>

.photos {
	/* hier totale width opgeven in px of % */
}

.photos p, .photos img { /* zet alles op 0 en middle */
	margin: 0; padding: 0; border: 0;
	vertical-align: middle;
}

.photos .clear { /* dit staat tussen elke rij fotos */
	clear: both;
	float: none;
	display: block;
	overflow: hidden;
	visibility: hidden;
}

.photos p { /* hierin zit de foto en tekst */
	float: left;
	width: 30%;
	margin: 1%;
	padding: 1px;
	padding-bottom: 4px;
	font: italic 100% arial,sans-serif;
	line-height: 1;
	text-align: center;
	border: 1px solid #ccc;
}

.photos img { /* foto hoogte past zich aan de breedte aan */
	float: left;
	width: 100%;
	height: auto;
	max-height: 100%;
}

Veel suc6 en have fun.

 

[TeKoopjes]

Dank u, ik ga het proberen!

 

[TeKoopjes]

Geachte,

Ik ben nog te veel een beginner denk ik want als ik bovenstaande heb ingevoerd lukt het niet helemaal goed met uitlijnen naar het midden.
Ik heb inmiddels wel voor elkaar dat er onderschriften onderstaan maar zonder opsommingstekens.

Dat ik vaak wat laat reageer in uw ogen komt omdat ik ziek ben en niet altijd in staat alles 'zomaar even snel' uit te voeren.
Bovendien ben ik een doorzetter en probeer, voordat ik zeg dat het niet lukt, wat er nog meer mogelijk is.

m.vr.gr.
T(e) Koop(je)s

 

[bron]

Het is niet te doen zonder Javascript of jQuery denk ik. Je wilt foto's in de juiste verhouding stretchen, elke foto moet even hoog zijn, elke foto moet in een kader staan die allemaal een vaste breedte en hoogte hebben, alle foto's moeten gecentreerd zijn en ook nog een tekst erbij. Losse delen hiervan zijn wel met css te doen, maar alle wensen bij elkaar lukt niet in css.
Misschien is dit wat of wellicht weet iemand anders een mooi gallery / portfolio script?

 

[TeKoopjes]

Helaas niet de bedoeling, maar zag er wel prima uit.
Ik heb de site wel opgeslagen, voor als ik misschien wat meer ervaring heb.
Hartelijk dank!