- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Disposizione immagini e didascalie con layout fluido
-
Disposizione immagini e didascalie con layout fluido
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 naturalmente 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 in colonna non mi avrebbe fatto 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 le colonne) come faccio a fare in modo che ridimensionando le finestre si dispongano su due righe senza debordare dal box?
Grazie dell?aiuto!
-
Ora, è vero che siamo in un forum pubblico. Ognuno di noi contribuisce secondo le proprie risorse di tempo e di conoscenza, e naturalmente secondo la voglia che ha... quindi non è obbligatorio rispondere.
Ma possibile che, con 77 visite dopo 4 giorni, nessuno si sia preso la briga di rispondere qualcosa, anche un semplice " :bho: "?Ho riscontrato molte più risposte le volte che ho posto questioni nei thread dedicati al fisco.....
-
Prova a raggruppare in un unico div float l'immagine e la didascalia insieme così resteranno sempre "incollate". Non so se mi sono spiegato
Es:<div id="box-contenitore" style="float:left: height:100px; width:200px;">
<div id="immagine">
<img src="..."/>
</div>
<div id="didascalia">
Testo della didascalia
</div>
</div>
-
Grazie dell'idea, sembra funzionare.
-
E' come dice Cloix...
Quando lavori con i CSS devi cercare di inserire tutto all'interno di DIV innestati....magari organizzati in base ai contenuti...dovresti avere un unico grande div contenente tutti i div 'minori'.
Successivamente all'interno di ogni div minore (che rappresenta un elemento) inserisci 2 altri div (uno per l'immagine e uno per la didascalia)...Così facendo stringendo il div principale si sposteranno i singoli div minori ma raggrupperanno immagine e didascalia..
-
E' che, e pur avendo fatto alcuni siti web a livello amatoriale in passato (con frame e tabelle :bho:), con quel sito (che per inciso non avevo fatto io... è nato nel 2005 con l'allora Frontpage 2002) in realtà è la prima volta che affronto concretamente "il mondo magico e misterioso dei css".
Diciamo anche che ci sto prendendo gusto e, definito quel sito, vedrò di rimettere mano ad altri!
-
Si il passaggio da tabelle a DIV/CSS è piuttosto ostico ma una volta capito il funzionamento ci si rende conto che è molto lineare il ragionamento
