Elenco immagini con descrizione

**iceberg** · 22-09-2011, 00:20

Ciao a tutti, sono alla ricerca di un esempio di questo tipo

un elenco (matrice) di immagini 200x200 pixels: esempio 10 righe e 5 10 immagini per riga

in ogni immagine, sulla parte bassa, vorrei una barra nera semtrasparente con un testo bianco sopra (descrizione dell'immagine)

sapete darmi qualche dritta su come fare?? ho cercato qualche esempio ma non ho trovato nulla

Grazie

**Prill** · 22-09-2011, 08:22

Un esempio:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titolo</title>

<style type="text/css">
ul#gallery {
width:1050px;
list-style-type:none; 
margin:0;
padding:0;
}
ul#gallery li{
display:block;
float:left;
position:relative;
width:200px;
padding:5px;
}
ul#gallery img {
display:block;
width:200px;
height:200px;
}
ul#gallery span {
display:block;
position:absolute;
width:200px; 
height:30px;
bottom:5px;
left:5px;
z-index:2; 
background:rgba(0, 0, 0, 0.5);
color:#fff;
}

</style>

<!--[if lt IE 8]>
<style type="text/css">
ul#gallery span{
background: transparent;
-ms-filter: "progid&#58;DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)";
filter: 
progid&#58;DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
zoom: 1;
}
</style>
<![endif]-->
</head>

<body>

<ul id="gallery">[*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [*][img]immagine.jpg[/img]
   <span>didascalia</span>
 [/list]

</body>
</html>

**Mich_** · 22-09-2011, 08:33

Riscrivo la tua richiesta in termini diversi (semanticametne corretti): questo dovrebbe metterti sulla strada per risolvere

Una llista di oggetti, ciascuno contentente:
- un'immagine (200x200px)
- una striscia semitrasparente con testo bianco (didascalia): tale striscia va posizionata in basso sovrapposta all'immagine

Ed alcuni consigli per realizzarlo
La lista va realizzata con i tag <ul> e[*] ed andranno affiancati tramite il float:left
Ciascun[*] dovra` avere position:relative, in modo da poterci inserire le bande con position:absolute
Le immagini dovranno avere display:block (per poterle dimensionare)
Sia immagini che strisce dovranno avere z-index definito

**iceberg** · 23-09-2011, 15:32

Grazie ad entrambi!!!

Faccio qualche prova sulla base delle vostre preziose indicazioni!!!!

Discussione: Elenco immagini con descrizione

Strumenti discussione

Ricerca discussione

Visualizza

Elenco immagini con descrizione

Permessi di invio