[cssdesign] Photo gallery

[Roberto Ellero]

E' possibile anche una semplice serie di collegamenti (glish.com)
http://www.protty.it/album/pottree_2003/2003.htm



----- Original Message ----- 
From: "Tamtando's Web Administrator" <web a tamtando.com>
To: <cssdesign a itlists.org>
Sent: Wednesday, February 01, 2006 10:07 AM
Subject: [cssdesign] Photo gallery


Ciao a tutti.

Devo sviluppare una galleria fotografica.
Pensavo di farlo utilizzando una lista ordinata e lavorando con gli stili, 
ma mi sorge qualche dubbio.
Leggendo l'articolo CSS Swag: Multi-Column Lists, mi sono accorto che non è 
prevista una certa eventualità.
Supponiamo, per l'appunto, di voler visualizzare una classica galleria, 
formata da NxM miniature.
Ciascuna miniatura ha può essere grande al massimo 150x150 pixel (vuol dire 
che, per un'immagine rettangolare, il lato più grande sarà di 150px).
Ciascuna miniatura ha un titolo (utilizzato come alternate text e come title 
del link, ma visualizzato anche sotto la miniatura) e una didascalia.

Il risultato sarebbe qualcosa del genere:

      150      150      150      150
    +------+ +------+ +------+ +------+
1 + ######## ########  ######  ########
5 | ###1#### ###2####  ##3###  ###4####
0 | ######## ########  ######  ########
  + ########           ######
    (Didasc) (Didasc) (Didasc)
1 +  ######   ######   ######  ########
5 |  ##5###   ##6###   ##7###  ###8####
0 |  ######   ######   ######  ########
  +  ######   ######   ######  ########
    (Didasc)          (Didasc)
1 + ######## ########  ######  ########
5 | ###9#### ###10###  ##11##  ###12###
0 | ######## ########  ######  ########
  + ########           ######
    (Didasc)          (Didasc) (Didasc)
1 +  ######   ######   ######  ########
5 |  ##13##   ##14##   ##15##  ###16###
0 |  ######   ######   ######  ########
  +  ######   ######   ######  ########
    (Didasc) (Didasc) (Didasc) (Didasc)



Si vede poco, ma all'interno di ciascuna miniatura c'è un numero.
Il codice html risultante, pensavo che potrebbe essere qualcosa del genere:

<ul>
    <li>
        <img src="dominio.tld/img/1.jpg" alt="titolo1" />
        <cite>Titolo1</cite>
        <p>Didascalia1</p>
    </li>
    <li>
        <img src="dominio.tld/img/2.jpg" alt="titolo2" />
        <cite>Titolo2</cite>
        <p>Didascalia2</p>
    </li>
    <li>
        <img src="dominio.tld/img/3.jpg" alt="titolo3" />
        <cite>Titolo3</cite>
        <p>Didascalia3</p>
    </li>
    <li>
        <img src="dominio.tld/img/4.jpg" alt="titolo4" />
        <cite>Titolo4</cite>
    </li>
    <li>
        <img src="dominio.tld/img/5.jpg" alt="titolo5" />
        <cite>Titolo5</cite>
        <p>Didascalia5</p>
    </li>
    ...........
</ul>

dal punto di vista del foglio di stile, pensavo di rendere flottante ciascun 
li con qualcosa del tipo:

li
{
    float: left;
}

Inizialmente non voglio preoccuparmi di stabilire quante colonne e quante 
rige vedere, ma iniziare una nuova riga quando si raggiunge il bordo destro 
del contenitore della lista ordinata.

Però mi chiedo come fare per ottenere l'equivalente di una tabella.
Immagino che con il codice che ho scritto, avrei dei grossi problemi di 
visualizzazione (miniature allineate in un modo, titoli e didascalie in un 
altro), dovuti alle diverse dimensioni dell'immagine.



--------------------------------------------------------------------------------


_______________________________________________
cssdesign mailing list
cssdesign a itlists.org
http://itlists.org/mailman/listinfo/cssdesign