Ciao ragazzi!
Vorrei chiedervi come potrei realizzare, utilizzando html e css, il layout di quelle sei finestre rettangolari identiche che vedete nel sito internet di questo museo britannico, subito dopo lo slider delle immagini:
https://www.prm.ox.ac.uk/
qualche idea?
vi ringrazio molto! a presto!
Francesca
intendi dire le sei immagini che quando fai hover vengono bordate?
se sì puoi guardare il codice sorgente e relativo css con un semplice inspector del browser per capire come è stato fatto posizionamento ed effetto.
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
Ciao! Innanzitutto grazie per la tua risposta.
No, intendo come posso posizionare quelle sei finestre ed i relativi titoli (what's on; explore; research ecc.) in quel modo nella pagina web?
Ti ringrazio
codice:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title> <style type="text/css"> .txt { background-color: rgba(0,0,0,0.5); height: 70px; margin: 180px 0 0 0; text-align: center; } #contenitore { float: left; } #box1, #box2, #box3, #box4, #box5, #box6 { float: left; background-image: url(tua-immagine.jpg); margin: 20px; padding: 10px; height: 250px; width: 250px; color: #FFFFFF } </style> </head> <body> <div id="contenitore"> <div id="box1"> <div class="txt">Descrizione</div> </div> <div id="box2"> <div class="txt">Descrizione</div> </div> <div id="box3"> <div class="txt">Descrizione</div> </div> <div id="box4"> <div class="txt">Descrizione</div> </div> <div id="box5"> <div class="txt">Descrizione</div> </div> <div id="box6"> <div class="txt">Descrizione</div> </div> </div> </body> </html>
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Grande!! Grazie mille!
scusa se ti disturbo ancora ma come posso cambiare le dimensione del background-image presente nel tuo codice?
Grazie mille! :-)
Permessi di invio
Rispondi quotando