Simulare frames con i CSS mantenendo header e colonna sinistra fisse

Per la precisione avevamo visto come ottenere la header fissa e nell' altro, invece, la colonna sinistra fissa.

Nell' articolo odierno "racchiuderemo" queste due tecniche ed alla fine avremo la classica struttura che spesso vediamo nei siti: header e colonna sinistra fisse e parte destra scorrevole.

Come per gli altri due esempi, otterremo identica visualizzazione sia per i browser più moderni, sia per Internet Explorer, nelle versioni 5.0 e 5.5 in quanto questi browser, anche nella versione 6.0, non supportano l'attributo "fixed" se non per far restare ferma una immagine posizionata come background.

Suddivisione della pagina

I nomi che ho dato ai tre elementi di blocco sono rispettivamente:
#header, #sidebar e #content. Premetto che quest' ultimo viene ricavato nella pagina per "differenza" dagli altri due; cioè non verrà dichiarato nessun elemento di blocco con questo nome. Verranno dichiarate tutte le sue caratteristiche nel foglio di stile adottato solo da Internet Explorer. Potrebbe sembrare un pò contorta la cosa attualmente, ma con la scrittura del codice apparirà molto semplice.

Il codice CSS

Cominciamo con la dichiarazione del codice per il body; questo determina, a grandi linee le misure, relative, che ho stabilito per la testata e la colonna di sinistra.

body{
margin:0;  
padding:7em 0 0 13em; 
background: #fff;  
font-size: 1em; 
}  

Unica e sola cosa importante in questo codice è il padding; per la parte alta ho lasciato uno "spazio" di 7em. Per la colonna di sinistra ho lasciato 13em. Questo cosa vuol dire? Che le misure della testata e della colonna di sinistra avranno rispettivamente 6em e 12em. Ne ho dato uno in più per distanziare il testo dai bordi. Vediamo adesso il codice di questi due elementi:

div#header, div#sidebar{  
position:absolute;  
left:0;  
overflow:auto; 
}  

Entrambi hanno un posizionamento assoluto; motivo per cui è possibile dichiararli assieme. La distanza dal bordo sinistro è pari a zero. La proprietà overflow:auto indica che se il contenuto dovesse eccedere la misura impostata, apparirà la barra di scorrimento laterale.

#header{  
top:0;  
z-index:10;  
width:100%;  
height:6em; 
border-bottom:1px solid #000;  
background:#aaa; 
} 

Il codice qui su appena scritto, molto semplice ed intuibile, completa la dichiarazione per la testata. Riprendendo quanto più anticipato circa la suddivisione della pagina, si può notare la misura pari a 6em. Per il resto non mi pare ci siano delle difficoltà particolari. Passiamo al codice per la colonna di sinistra.

#sidebar{
top:6em; 
bottom:0; 
width:12em;  
margin:0; 
padding:0; 
border-right:1px solid #000; 
color:#000; 
background:#ccc; 
}  

Essendo un elemento con posizionamento assoluto, viene dichiarato quanto deve essere distante dall' alto: 6em. [Ricordarsi della differenza di 1em per tenere il testo "distante" dai bordi]. Stessa cosa dicasi per la larghezza [width:12em]. In ultimo, ma non meno importante, la posizione dal basso: 0. Questo perchè la colonna di sinistra, indipendentemente dal contenuto, deve essere pari alla colonna del contenuto.

La rules @media screen

Anche questo argomento è stato trattato nei due articoli precedenti. In breve riassuno la sua funzione: in base al tipo di media usato [nel nostro caso media="screen"] ad un determinato elemento si assegna il comportamento che deve assumere nella pagina: fixed nel nostro caso. Di conseguenza il codice sarà:

@media screen{  
body>#header, body> #sidebar
{
position:fixed!important;
}
}  

A differenza degli altri due articoli, questa volta ho notato uno strano comportamento della colonna sinistra: non si allungava per tutta la sua altezza, nonostante lo scroll della pagina; questo è successo solo con il browser Opera. Aggiungendo !important, tutto è andato come doveva.

Il CSS per Internet Explorer

Come detto all' inizio, per fare in modo che anche su Internet Explorer avremo la pseudo visualizzazione dei frames, dovremo implementare un apposito foglio di stile solo per questo browser. Innanzitutto lo faremo attraverso una condizione "if" posta tra i tag <head> e cioè:

<!--[if IE]> 
<link href="/nomefile.css" rel="stylesheet" type="text/css"  media="screen"> 
<![endif]-->  

Come si può vedere, è stato realizzato un altro foglio di stile, solo e soltanto per i browser Internet Explorer richiamato dalla condizione qui sopra scritta. Le "differenze" sostanziali tra questo foglio di stile e quello per tutti gli altri browser, riguarda il body, il #content e la #sidebar. Come potrete notare, ho introdotto, apparentemente, un nuovo elemento: #content, che nell' altro codice non era presente. Ma se ricordate bene ho scritto che l' elemento per il testo veniva ricavato per "differenza". Questo non accade con i browser Explorer. Lo si deve dichiarare espressamente. Il codice per il body, nel foglio di stile per IE, diventa:

body{  
overflow:hidden;  
margin:0; 
padding:6em 0 0 0; 
}  

A differenza dell' altra dichiarazione, al body è stato assegnato un overflow:hidden. Questo per fare in modo che appaia la barra di scorrimento laterale alla destra dell' elemento #content che andremo a dichiarare tra poco. Il padding della parte alta è uguale a 6em che è sempre la misura effettiva della testata. Passiamo adesso all' elemento #content:

#content{
width:100%; 
height:100%;  
overflow-y:scroll; 
margin:0 0 0 12em; 
padding:1em; 
}  

Oltre ad impostare una misura pari al 100% dell' area utile per questo elemento, sono da notare le due righe di codice che regolano l' overflow:
overflow-x » gestisce la barra orizzonatale
overflow-y » gestisce la barra verticale
Di conseguenza avremo una barra verticale quando il contenuto eccederà dal contenitore [#content appunto].

#sidebar{
top:0;  
overflow:hidden; 
height:100%;  
margin:0; 
padding:6em 0 0 0;  
}  

Questo è il codice per quanto riguarda la colonna sinistra. Affinchè esso sia posizionato al di sotto della testata, basta impostare il padding come dichiarato. Settando l' altezza pari al 100% abbiamo tutta la colonna alta quanto è l' area della pagina. Questi tre elementi, appositamente creati per Explorer, ci permettono di avere un layout con visualizzazione a frames. Il risultato finale lo si può vedere nella pagina di esempio.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati