Sempre un pò curiosa di rifare esempi flash puramente in css, ho ripreso l’idea della galleria flash chiamata Illusion creata da Flep.
Questa galleria css d’immagini riusa stesse immagine sia per le miniature in verticale (impostate come sfondo con la proprietà background) che per la loro visualizzazione completa sullo stato hover (elemento <img>) dei link con relativa descrizione (elemento <span>).
Questi 2 elementi sono nascosti inizialmente con il display:none; e resi visibile con il display:block; impostando un z-index superiore per ricoprire le miniature e posizionati in modo assoluto in relazione al <div> contenitore.
Visualizza questa galleria css…
css-menu-esempio-7.zip (244.7 KiB, 2,912 hits)
Galleria css provata su IE6, IE7, FF2, FF3, Safari 3, Opera 9 su Windows.
PS: per chi di voi, si mette a studiare il html/css di questo esempio. Gli elementi <img> sono stati integrati dentro elementi <b>. La ragione è per rendere questa galleria css compatibile con IE6. Con Internet Explorer 6, il css applicato direttamente ai <img> non è interpretato nel modo corretto e rende questa galleria css del tutto inutilizzabile. Stranamente applicando stesso css ai <b> che contengono le immagini, il tutto funziona normalmente.
{ 10 comments… read them below or add one }
Proprio bella Gaelle !
Sei proprio bravissima
Complimenti!
c’è il modo di avere una voce sempre aperta?
Ciao, avrei un piccolo problema anche qui.
Ho preso il css per la galleria e sono riuscita a modificarla adattandola alle mie esigenze, adesso però mi si presenta un problema che riguarda il posizionamento della galleria nella pagina.
Io l’avevo settato in modo che la gallaria andasse esattamente dove la volevo io rispetto allo sfondo, purtroppo aprendola su altri pc mi sono accorta che la sua posizione cambia di volta in volta (da risoluzione a risoluzione credo) e non riesco a trovare un settaggio che permetta a galleria e sfondo di restare come io li metto.
ps. perdonate la carenza di termini tecnici, spero si capisca lo stesso
Ciao Roberta,
dipende come l’hai posizionato e delle proprietà del tuo sfondo.
Se hai un link della pagina di prova e spieghi in piu dettagli come dovrebbe essere, magari si trova una soluzione
Certo
questo è il link della pagina di prova (è il catalogo di una bottega di un gioco di ruolo online, non ti spanventare ) http://isolaavalon.altervista.org/bottega/catalogobalocchi.html
e questo è l’immagine di come la vedo io: http://isolaavalon.altervista.org/bottega/shotcatalogo.jpg
Le persone a cui ho chiesto di guardarlo mi hanno detto tutte che vedono la galleria spostata a sinistra, pare che la veda solo io come la volevo.
Ti ringrazio davvero tanto, sei gentilissima
Buongiorno Roberta,
il problema si pone quando ridimensiona la finestra. La galleria rimane a una posizione fissa mentre lo sfondo impostato al corpo della pagina si sposta basato sulle misure della finestra del browser.
Soluzione…
Struttura html:
<body>
<div id=”contenitore”>
<div id=”content”>
<!–aggiungi contenuto come galleria, testo…–>
</div>
</div>
</body>
Regole css:
body{
margin:0;
padding:0;
background-color:#000;
}
#contenitore{
width:1100px;
height:825px;
margin:auto;
background:url(http://isolaavalon.altervista.org/bottega/catolobalocchi_copy.jpg) no-repeat;
overflow:hidden;
}
#content{
width:680px;
margin:150px 0 0 310px; /*aggiustare margine se necessario*/
}
#css_galleria_1{
width:680px;
height:500px;
padding:20px 10px 20px 20px;
border:1px solid #FFFFFF;
position:relative;
}
In questo modo, ‘contenitore’ con l’immagine di sfondo rimanerà sempre centrato e ‘content’ rimanerà posizionato in rapporto a questo ultimo qualunque sia la risoluzione di monitor del utente.
Grazie infinite, adesso anche questo è perfetto *_*
ciao molto carina, aggiungendo un pò di javascript potresti creare l’effetto dissolvenza prima di visualizzare completamente l’immagine..
Ciao Yughs,
vero ma preferisco mantenermi al css personalmente. Se lo vuoi aggiungere e condividere, sei sempre il benvenuto!