Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

Un menu inchiodato

Il menu che si vede nell'angolo in alto a destra di questa pagina è semplicemente un DIV con qualche elemento A al suo interno. Tutto il lavoro per renderlo fisso nella sua posizione è fatto da delle regole nel foglio di stile. Ecco qui il codice di mark-up, è stato preso direttamente dal codice sorgente di questa pagina:

<div class="banner">
<p>
<a href="http://www.w3.org/"><img alt="W3C" src="http://www.w3.org/Icons/w3c_home"></a>
<a href="http://www.w3.org/Consortium/Activities">Activities</a>
<a href="http://www.w3.org/TR/">Tech. reports</a>
<a href="http://www.w3.org/Help/siteindex">Site index</a>
<a href="http://www.w3.org/Consortium/Translation/">Translations</a>
<a href="http://www.w3.org/Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="http://www.w3.org/Style/">Style</a>
<a href="http://www.w3.org/Style/CSS/">CSS</a>
<a href="./">tips & tricks</a>
</div>

In un browser senza CSS, o con i CSS disattivati, risulterà; un semplice paragrafo con dei link. Ma grazie alle regole qui sotto, esso apparirà; "flottante" in cima alla pagina, inchiodato in alto a destra della finestra del browser:

div.banner {
 margin: 0;
 font-size: 80% /*smaller*/;
 font-weight: bold;
 line-height: 1.1;
 text-align: center;
 position: fixed;
 top: 2em;
 left: auto;
 width: 8.5em;
 right: 2em;
}
div.banner p {
 margin: 0; 
 padding: 0.3em 0.4em;
 font-family: Arial, sans-serif;
 background: #900;
 border: thin outset #900;
 color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Le regole interessanti qui sono 'position: fixed', che rende il DIV fisso sullo schermo, e 'display: block' che trasforma gli elementi A all'interno del DIV in elementi blocco (block elements), così da essere visualizzati uno sotto l'altro pittosto che uno accanto all'altro.

Fare attenzione all'ordine delle ultime tre regole, hanno tutte la stessa specificità; (specificity) quindi l'ultima tra le applicabili determina il colore. Se si punta il mouse sopra il link, vogliamo che venga applicata la regola :hover, quindi deve essere scritta per ultima.

Il resto, margini, bordi, colori, etc. possono essere levati o cambiati secondo il gusto personale. Notare, comunque, le regole impostate tra i link: ci sono bordi sopra tutti i link, tranne il primo grazie alla regola con ':first-child'. Un paio di regole come queste (border-top su tutti gli elementi più; un 'border-top: none'sul primo figlio) vanno molto bene per creare bordi tra gli elementi.

(Se si guarda agli effettivi fogli di stile associati a questa pagina, banner-o.css e banner.css, si troveranno delle regole in più; che sembrano contraddirsi. Ci sono per prevenire i bug di pochi vecchi browser. In particolare, in banner-o.css, DIV.banner è nascosto e in banner.css è mostrato come un blocco. Questo ha l'effetto di nascondere DIV.banner a Netscape 4, dato che salta @import in banner.css.)

FAQ: IE 5 & 6 su Windows?

Se si visualizza questa pagina con Microsoft Internet Explorer 5 o 6 su Windows ("WinIE5" e "WinIE6"), si noterà; che non funziona. Almeno non con le attuali versioni di Settembre 2002. Molte persone mi hanno chiesto a riguardo, ecco quindi qualche spiegazione. In breve: il bug è nel browser, non in questa pagina.

WinIE5 e WinIE6 non implementano ancora il valore 'fixed'. Un caso sfortunato, ma più; grande è il problema che questi browser non fanno correttamente il parsing della proprietà; 'position'. Un browser che non riconosce il valore 'fixed' dovrebbe ignorare la regola 'position: fixed' e ripiegare su qualunque sia il precedente valore di 'position' nel foglio di stile. Allora potremmo aggiungere 'position: absolute' appena prima di 'fixed' e il browser lo userebbe. Ma in WinIE 5 e 6 non è quel che succede. Apparentemente la keyword 'fixed' è in qualche modo interpretata come 'static'.

Non si può; far sì che WinIE 5 e 6 supportino il valore 'fixed', ma c'è un work-around per questo problema sul parsing. Johannes Koch mi ha informato di questo stratagemma (dalla sua collezione di work-around). Prima sostituisci, nella regola di stile summenzionata, 'position: fixed' con 'position: absolute' e poi inserisci la seguente regola un po' più; in basso nel foglio di stile:

body>div.banner {position: fixed}

(Se DIV.banner è dentro un elemento diverso da BODY, sostituisci BODY con quel elemento.) L'effetto di ciò; è che i browser che riconoscono il selettore del CSS '>' (figlio) useranno questa regola ma i browser che non lo riconoscono, in particolare WinIE5 e WinIE6, la ignoreranno. La regola 'position: absolute' sarà; quindi usata e il menu starà; ancora al suo posto, salvo che non rimarrà; fisso durante lo scroll.

E' importante che non ci siano spazi intorno a '>'.