Sto procedendo, assieme a mia sorella, a ridisegnare il sito web di un Istituto Comprensivo Scolastico al fine di rispettare i requisiti dell’accessibilità W3C, lasciandogli una veste colorata ma meno kitsch dell’attuale (e con l’occasione si toglie dal dominio di secondo livello per metterlo su uno di primo livello ).


Sto cercando di evitare Ajax e Flash, limitandomi al solo Javascript, e ovviamente spostando tutta la formattazione possibile sui CSS.


Ho un problema relativamente ad una galleria di immagini.


L’istituto comprensivo è costituito da 7 scuole (3 dell’infanzia, 1 primaria e 1 secondaria) e nella home page del sito attuale ci sono delle immagini di piccole dimensioni (100x100pixel) delle scuole, inserite (come era di uso comune prima della diffusione della giusta cultura de CSS e della riduzione dell'uso delle tabelle al minimo indispensabile) in una tabella composta da 3 righe e 7 colonne (1 colonna per ogni scuola, nella prima riga la tipologia di scuola, nella seconda riga la foto, nella terza il nome della scuola).


Ho necessità di rimettere quelle immagini nella home page del sito (che è costituita al momento da 5 box: la testata, i menu, l’area con queste foto, un’area di news e il footer)… in fila orizzontale perché così vuole il preside... (se le avesse volute tutte in colonna sulla sinistra mi avrebbe certo fatto meno problemi ma.... come si dice... bisogna cercare di accontentare il committente)


Ho scelto il layout fluido per consentire la visibilità anche su pc non di ultimissimo grido (ho messo una width pari al 90% mentre le altezze dei box sono fisse) .


Purtroppo quel tipo di layout mi complica le cose per quella galleria: come posso tenere in fila quelle sette immagini con ordinate le didascalie sotto di esse, facendo si che, se la finestra di visualizzazione si stringe e le immagini si dispongono su due file, ci si trovi in questa situazione:


immagine A ----- immagine B ------ immagine C ------ immagine D
didascalia A ---- didascalia B ----- didascalia C ---- didascalia D

immagine E ------ immagine F ------ immagine G
didascalia E ----- didascalia F ------ didascalia G


e non:

immagine A ----- immagine B ------ immagine C ------ immagine D
immagine E ------ immagine F ------ immagine G
didascalia A ---- didascalia B ----- didascalia C ---- didascalia D
didascalia E ----- didascalia F ------ didascalia G



E comunque, visto che non sono un falco sui CSS, se eventualmente decidessi di montare con Photoshop foto e didascalia di ogni scuola in una sola immagine, (e così non avrei problemi nel mantenere incolonnate le immagini con le rispettive didascalie) come faccio a fare in modo che ridimensionando le finestre si dispongano su due righe senza debordare dal box?

Grazie dell’aiuto!