Simulare frames con i CSS mantenendo la header fissa

Il risultato finale è stato quello della parte sinistra fissa e del corpo centrale scrollabile. Nell' articolo odierno, tratteremo sempre della simulazione dei frames ottenuti grazie ai fogli di stile ma l' effetto sarà quello di avere un header, o testata, fisso ed il corpo sottostante anch' esso scrollabile. Mi preme sempre precisare che, oltre all' utilizzo del codice CSS, la pagina senza l' ausilio dei fogli di stile rimane sempre navigabile, accessibile e fruibile su diversi tipi di media. Diamo uno sguardo a questo primo esempio.

Con l'apporto di un pò di codice, sarà trasformata e altrettanto visibile alla stessa maniera su tutti i moderni browser oltre che su Internet Explorer versione 5.0 e 5.5.

Il codice CSS

Dopo aver spiegato, con un pò di teoria, quello che otterremo, passiamo alla scrittura del codice CSS. Partiamo dal body:

body{  
margin:0; 
padding:8em 0 0 0;  
} 

Ho settato il margine a zero ed il padding pari ad 8em nella parte alta. Questo vuol significare che la testata avrà stessa altezza [cioè 8 em]. La testata, che ho nominato con il div #header avrà:

#header{  
overflow:auto;  
width: 100%; 
height: 8em;  
line-height:8em; 
position: absolute; 
top: 0;  
left: 0; 
background: #09d;  
}  

La proprietà overflow, come abbiamo visto in altri articoli, stabilisce che se il contenuto devesse superare l' altezza dichiarata, vedremmo apparire la barra di scorrimento verticale. Nel nostro caso, però non succederà in quanto andremo a scrivere solo testo e non molto lungo. La sua larghezza si espande per tutta la larghezza della finestra del browser; la line-height pari alla sua altezza [per avere testo centrato in verticale] e posizionato in maniera assoluta. Il corpo centrale della pagina è stato inscritto in un altro elemento di blocco: #content. Il codice da dichiarare riguarda solo il padding per fare in modo che il testo non sia addossato ai 4 lati.

#content{ 
padding:1em; 
}  

La @-rules media:screen

Ci siamo avvalsi di questa @-rules anche nell' esempio fatto in precedenza. Invito a rileggere questa parte coloro i quali non l' abbiano fatto la volta scorsa. Questa @-rule mette nella posizione "fissa" l' header nella pagina. Il codice è:

@media screen
{  
body>#header{ position: fixed;}
}

Ma questo vale per i browser che interpretano correttamente il position:fixed. Non è valido per Internet Explorer.

Il codice CSS per Internet Explorer 5 e superiori

Per avere la stessa visualizzazione anche su Internet Explorer, anche in questo caso dobbiamo ricorrere ad un codice CSS appositamente creato per esso, oltre che ad una "condizione". Ma andiamo con ordine:

body{  
height: 100%;  
overflow: hidden;  
font-size: 100%; 
}  

Confrontare questa dichiarazione con quella del body all' inizio dell' articolo. Dobbiamo scrivere in maniera specifica l' altezza della finestra del browser [ height: 100%;] ed un overflow:hidden.

#content{ 
width:100%;  
height:100%;  
overflow:auto; 
}  

Stessa cosa dicasi per il div #content: occorre l' esplicita dichiarazione dell' altezza, della larghezza e come si deve comportare lo stesso elemento se il contenuto dovesse superare il contenitore.

La condizione if nella pagina html

Nella pagina html dobbiamo introdurre la stessa "condizione" vista la volta precedente, che serve per avere pari visualizzazione anche per Internet Explorer. Il codice da scrivere è il seguente:

<style type="text/css" media="screen">@import url(stile.css  );</style> 
<!--[if IE]> 
<link href="/stileie.css" media="screen" type="text/css"  rel="stylesheet" /> 
<![endif]-->

Al di sotto della regola @import inseriamo il codice tra i commenti denominato, appunto, "condizione". Se il browser è Explorer, visualizza il file CSS stileie.css ecc... Questa condizione non viene interpretata da altri browser più standard, ma viene solo resa come un normalissimo commento. Essa va scritta tra i tag <head> e </head> della pagina.

Siamo giunti alla fine dell' articolo. Visualizziamo il file di esempio finale che "maschera" la sua suddivisione grazie all' uso dei CSS.

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