Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

menu a coriandoli

Il menu colorato che si vede qui sotto è semplicemente un elemento DIV con pochi elementi P all'interno. L'effetto grafico è dovuto al fatto che ogni elemento P è posizionato singolarmente ed ha il proprio font e colore. Funziona meglio con testi brevi, perchè l'effetto grafico si basa sulla sovrapposizione e se il testo è troppo lungo, allora si sovrappone tanto da diventare difficile da leggere.

Il foglio di stile prevede un menu fino a 10 elementi, l'esempio sopra ne usa 8. Ecco qui il sorgente HTML dell'esempio sopra:

<div class="map">
<p id="p1"><a href="http://www.w3.org/Style/CSS/#news">What's new?</a>
<p id="p2"><a href="http://www.w3.org/Style/CSS/#learn">Learning CSS</a>
<p id="p3"><a href="http://www.w3.org/Style/CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="http://www.w3.org/Style/CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="http://www.w3.org/Style/CSS/#specs">Specs</a>
<p id="p6"><a href="http://www.w3.org/Style/CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Notare la classe "map" sull'elemento DIV, la quale lo rende un contenitore per il menu, e gli attributi ID sulle P. Gli elementi P devono tutti avere un (diverso) ID, chiamato p1, p2, ... o p10. Non è necessario usare gli ID in ordime (come mostrato nell'esempio). Si può usare il foglio di stile copiandolo sul proprio foglio di stile, oppure usando @import o un elemento LINK per importare map.css direttamente dal sito della W3C: così

@import "http://www.w3.org/Style/map.css";

o così

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

spiegazione sul foglio di stile

Ecco qui come funziona il foglio di stile. Il foglio di stile comincia con la definizione dell'elemento DIVdi classe "map". Crea uno spazio alto 190px nel quale i contenuti degli elementi P saranno piazzati. Ad ognuno degli elementi con ID da p1 a p10 è dato un colore ed un font, e ogni elemento è posizionato dentro lo spazio creato dal DIV per mezzo della proprietà 'margin': un margine superiore negativo sposta l'elemento su nel DIV e un margine inferiore positivo assicura che il seguente elemento riparte dal fondo del DIV.

(Il punto debole del foglio di stile è che fa tutto in px. Si può voler cambiare i px in percentuali, se si ha un browser che implementa molto bene i CSS.)

DIV.map { /* Reserve some room for the links */
 padding-top: 190px;
 margin-left: -2em; /* Adapt this to your own page... */
 margin-right: -2em; /* Adapt this to your own page... */
 margin-bottom: 4em;
 margin-top: 5em;
 clear: both;
 text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
 white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
 text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
 text-decoration: none }

#p1, #p1 A {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1 {text-align: right; margin: -185px 0 85px 0} /* top right */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* top left */
#p3 {text-align: right; margin: -90px 35% 50px 0} /* center */
#p4 {text-align: right; margin: -95px 0 55px 0} /* center right */
#p5 {text-align: left; margin: -130px 0 30px 0} /* center left */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* bottom center */
#p7 {text-align: right; margin: -80px 0 0px 0} /* bottom right */
#p8 {text-align: left; margin: -40px 0 20px 3%} /* bottom left */
#p9 {text-align: right; margin: -25px 0 5px 0} /* bottom right */
#p10 {text-align: left; margin: -130px 0 70px 0} /* center left */

Naturalmente si è liberi di cambiare il foglio di stile per provare diversi font, colori e posizioni, o per creare regole di stile extra per più di 10 elementi. Dare un occhiata anche ai margini destro e sinistro del DIV: essi sono negativi, cosicchè il menu è più largo del testo circostante, ma in certe pagine il margine potrebbe non essere largo abbastanza per questo, e quindi si dovrebbero rimuovere queste regole.

Se si prova lo stile, si può notare che non funziona tanto bene in Netscape 4. Questo per colpa di Netscape 4, naturalmente. Comunque, map-ns.css è un foglio di stile che è simile e che sembra funzionare bene con questo browser. Il seguente trucco nello head del documento HTML permetterà alla versione per Netscape 4 e alla versione sopra per implementazioni migliori del CSS di coesistere:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Una implementazione corretta del CSS leggerà entrambi i fogli di stile, ma le regole nel secondo foglio avranno la precedenza sul primo, quindi a parte un po' di lavoro in piu, non ci sono cambiamenti. Netscape 4, comunque, non caricherà il secondo foglio di stile, a causa dell'attributo "media", che non riconosce.

Inoltre ci si potrebbe chiedere perchè gli elementi sono posizionati tramite margini (negativi), mentre questo sembra essere un ottimo candidato per le proprietà di posizionamento assoluto. Effettivamente si può fare lo stesso con 'position' e 'left' & 'right'. La ragione per cui questo foglio di stile usa invece i margini, è che in questo modo funziona in quei browser che implementano solo il CSS1.