Ciao,
ho la necessità di ordinare dei nomi tramite una lista orizzontale;a ciascuno di questi nomi vorrei associare un'immagine che dovrebbe andare in alto rispetto a questi nomi che diventerebbero quindi una sorta di didascalia dell'immagini.
html:
codice:
<div id="campo">
<div class="por"><ul>[*][img]img.jpg[/img]gioc[/list]</div>
<div class="dif"><ul>[*][img]img.jpg[/img]gioc[*][img]img.jpg[/img] gioc[*][img]img.jpg[/img] gioc[*][img]img.jpg[/img] gioc[/list]</div>
<div class="cen"><ul>[*][img]img.jpg[/img]gioc[*][img]img.jpg[/img] gioc[*][img]img.jpg[/img] gioc[*][img]img.jpg[/img] gioc[*][img]img.jpg[/img] cen4[/list]</div>
<div class="att"><ul>[*][img]img.jpg[/img]gioc[*][img]img.jpg[/img] gioc[*][img]img.jpg[/img] gioc[/list]</div>
</div>
codice:
.por{
margin-top:10px;
text-align:center;
}
.dif{
margin-top:50px;
text-align:center;

}
.cen{
margin-top:100px;
text-align:center;
border:1px solid;
}
.att{
margin-top:120px;
text-align:center;
}
div#campo ul{ list-style-type: none;MIN-height:20px;  margin:5px auto;
}
div#campo li{display:inline;font-size:12px;font-weight:bold;  border:3px solid;margin-right:5px;
}
div#campo img{display:block;
}
In pratica metto ciascuna lista in orizzontale grazie a display inline e riesco poi a gestirmi i margini dei vari div; mettendo però la proprietà display:block alle immagini, grazie al quale ciascuna immagine ha il nome correttamente sotto, tutte le voci della lista appaiono a loro volta come elementi blocco, uno sopra l'altro...
Come faccio l'imitare questa proprietà alla coppia immagine/testo adiacente e non a ciascuna voce della lista?