Didascalia su immagine (html)

[leo99]

Buonasera, sto lavorando ad un progetto scolastico nel quale devo fare un sito a due colonne utilizzando html e css. Andando sul sito, mi è stato utile utilizzare una "didascalia su immagine". Utilizzando una sola immagine non ho riscontrato nessun problema, ma provando ad utlizzarne due nello stesso div, le due immagini si attaccano e esce solo una didascalia. E anche provando a mettere un altra immagine con didascalia nell altro div, quest ultima immagine si posiziona sotto all altra.
Spero mi possiate aiutare. Grazie.

[carlomarangoni]

Ovvio che se non metti un a capo tra le due immagini, queste vengono messe una dopo l'altra e se ne metti tre che occupano pià spazio della larghezza del div una va a capo,
Pertanto se vuoi farne andare a capo devi mettere un <br/> dopo l'immagine, per la didascalia se hai usato title in tutte le immagini dovrebbe uscire, ma per una risposta più sicura ci devi far vedere il codice che hai usato per le immagini e per la didascalia

[leo99]

Ovvio che se non metti un a capo tra le due immagini, queste vengono messe una dopo l'altra e se ne metti tre che occupano pià spazio della larghezza del div una va a capo,
Pertanto se vuoi farne andare a capo devi mettere un <br/> dopo l'immagine, per la didascalia se hai usato title in tutte le immagini dovrebbe uscire, ma per una risposta più sicura ci devi far vedere il codice che hai usato per le immagini e per la didascalia

Questo è il codice interessato html:
<div class="caption" id="extra">
<img src="pallone.jpg"><span><strong>testo</strong>testotestotesto</span>
<br><br><br><br><br><br><br>
<img src="kepler.jpg"><span><strong>testo</strong>testo</span>
</div>


<div id="contenuto">
<img src="cosi.jpg"><span><strong>testotestotesto</strong>testotestotesto</span>
</div>

Mentre questo è quello css:
.caption { font-family: Geneva;font-size: 15px;float: left;margin: 0;position:relative; overflow:hidden; }
.caption img {margin: 0;padding: 0;background: #fff;border: none; }
.caption span {float: left;margin: 0; padding: 10px; width: 100%; color: #dedede; display: none;
background: #222; /* browser che non supportano rgba */ background: rgba(0,0,0,0.7); position: absolute; left: 0; bottom: 0; }
.caption span strong { font-weight: bold; font-size: 20px; text-transform: uppercase; display: block; padding-bottom: 5px; }
.caption:hover span { display: block; }

Con questo codice nella sezione "extra" vengon fuori due immagini staccate ma di cui soltanto una ha la didascalia (tra l'altro ha anche sovrapposta la didascalia della prima immagine)