Per un sito che sto realizzando, si è presentata la necessità di creare una struttura con una parte fissa (il menu), e una parte "scrollabile" (il contenuto), senza ricorrere all'uso dei frame (in questo caso indubbiamente utili!). Mi è venuto in aiuto questo articolo, realizzato dal L. A. U. (Laboratorio di Accessibilità e User Innovation), che spiega come sfruttare i vantaggi dei frame senza utilizzare un frameset, ovvero creando, grazie alle istruzioni CSS, dei div "fissi" sulla pagina, che sembrino appunto frame.
IL PROBLEMA
Avere un div fisso sulla pagina (div id="menu"), con una soluzione funzionante su tutti i browser e utilizzando solo i CSS.
LA SOLUZIONE
1^. Creiamo innanzitutto la struttura html:
<body>
<div id="menu">
voce 1
voce 2
voce 3
</div>
<div id="content">
...il nostro contenuto...
</div>
</body>
2^. Ora creiamo il css.
Per i browser moderni (Firefox 2+, Opera 9+, Safari 3+, IE 7+) sarebbe sufficiente usare la proprietà position:fixed;, che risolverebbe completamente tutti i nostri problemi.
Purtroppo, però, gli altri browser (ad esempio IE 6 e precedenti) non recepiscono correttamente questa istruzione, ma la interpretano come position:static;, che non produce alcun risultato sulla nostra pagina.
Dobbiamo quindi ricorrere ad un piccolo trucco.
Diamo un posizionamento assoluto al nostro div fisso, e poi rendiamo l'istruzione fixed interpretabile solo per i browser moderni:
#menu { position:absolute; top:0; left:0; height:100%; width:250px; background-color:#00FF00;}
body>#left {
position: fixed;
}
E diamo al nostro div di contenuto un padding pari alla larghezza del menu:
#content {
padding-left:250px;
width:500px;
background:#0000FF;
}
Questa soluzione funziona correttamente sui browser moderni, ma non su IE 6, che visualizza il div con posizionamento assoluto. Certo è meglio di niente, ma non è sufficiente.
Dobbiamo quindi inserire un commento condizionale, con del codice visibile solo da IE6 e precedenti, e forzare il browser ad operare in Quirksmode.
Il commento condizionale sarà il seguente:
<!--[if lte IE 6]>
<style type="text/css">
body
{
overflow-y: hidden;
}
#content
{
height: 100%;
width: 100%;
overflow: auto;
}
</style>
<![endif]-->
Il commento condizionale non fa altro che forzare l'altezza del nostro div di contenuto al 100% della finestra del browser, e quindi mostrare la barra di scorrimento verticale per il contenuto eccedente tale altezza.
Per forzare il browser ad operare in modalità Quirksmode, invece, è sufficiente inserire un commento prima della dichiarazione del DOCTYPE. Questa soluzione presenta però un inconveniente, in quanto inserendo un commento, forziamo anche IE7 ad operare in Quirksmode, quando in realtà il browser già funziona correttamente.
Ci sono quindi due possibilità: estendiamo il commento condizionale a IE7 (<!--[if lte IE 7]>), oppure inseriamo prima del DOCTYPE la dichiarazione XML (<?xml version="1.0" encoding="utf-8"?>). Attenzione, però. Utilizzando la dichiarazione in un file .php, questo smette di funzionare (<? è anche il tag di apertura del php). Consiglio quindi la prima soluzione.
Il nostro codice finale:
<!-- comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#menu { position:absolute; top:0; left:0; height:100%; width:250px; background-color:#00FF00;}
body>#left {
position: fixed;
}
#content {
padding-left:250px;
width:500px;
background:#0000FF;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body
{
overflow-y: hidden;
}
#content
{
height: 100%;
width: 100%;
overflow: auto;
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
voce 1
voce 2
voce 3
</div>
<div id="content">
...il nostro contenuto...
</div>
</body>
</html>
Ritengo che questo sito sia fonte di grande ispirazione per chi vuole creare siti con contenuti pienamente accessibili, e voglia rispettare in pieno quanto previsto dalla legislazione in materia.
4 commenti:
invece di preoccuparti della 'legislazione in materia' posta qualcosa di meno orrendo e magari anche funzionante con Firefox 3.0
miiiiii........
Caro anonimo,
evidentemente non sei stato in grado di applicare quanto descritto nel semplice tutorial :)
Il trucchetto proposto dal LAU (uno dei migliori siti in fatto di accessibilità e compatibilità) funziona perfettamente su Firefox 3, come puoi vedere cliccando qui (si tratta di un sito da me realizzato con questa tecnica).
Prima di postare un commento, accertati di sapere di cosa parli ;)
Ciao, mi è stato molto utile il tuo post, ma non ho capito due cose:
1. Se dovessi creare un'altra divisione in alto, per inserire il logo, che rimanesse fissa come il menù, come devo fare?
2. Il mio menù non rimane fisso, come faccio? quando clicco sul collegamento apre un'altra pagina, invece dovrebbe rimanere sempre visibile...
Grazie mille!
ciao...io vorrei utilizzare il metodo da te proposto per creare una barra dove è contenuto un player, in modo che cambiando pagina il player non si blocchi. il "problema" è che il sito l'ho realizzato con wordpress, e non so come fare! mi sapresti aiutare?
Posta un commento