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 PROBLEMAAvere un div fisso sulla pagina (div id="menu"), con una soluzione funzionante su tutti i browser e utilizzando solo i CSS.
LA SOLUZIONE1^. 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.
