Programmazione Web » Css » Simulare una struttura a frame grazie ai Css
Simulare una struttura a frame grazie ai Css
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1259 volte
Navigando sul web capita spesso di imbattersi in siti ormai datati che fanno ancora uso dei frame! Questo accade perchè il webmaster è inconsapevole del fatto che non tutti i browser li riescono a visualizzare correttamente, specie quelli ormai obsoleti.
Una nuova tendenza del web è rappresentata dagli i-frame (inline frame) che, a differenza dei loro antenati, possono essere collocati in un qualsiasi punto della pagina. Esiste una soluzione per rendere accessibili le nostre pagine web a tutti gli utenti, compresi quelli che utilizzano browser datati!
E' possibile ottenere l'effetto i-frame grazie alla proprietà overflow dei Css che ci permette di visualizzare, all'occorrenza, le scrollbar in un div. Vediamo le tre righe di Css strettamente necessarie per ottenere l'effetto:
<style>
div#main {
width: 300px;
height: 200px;
overflow: auto; /* superate le dimensioni mostrera le scrollbar */
}
</style>
Ovviamente adesso creeremo un div assegnandogli come id "main":
<div id="main">Testo di prova!</div>
Qualora il contenuto del div dovesse eccedere le dimensioni specificate nel Css (300px * 200px) vedrete comparire le scrollbar. L'effetto desiderato sarà il medesimo e, allo stesso tempo, accessibile a tutti! Modificate, se ne avete voglia, il bordo e il colore del div per ottenere un effetto personalizzato. Buon lavoro!
Aggiungi questo tutorial ai preferiti
