viklog

Ultimamente, nel mio vagabondaggio sul web, ho scoperto un nuovo header che va molto di moda e che mi piace molto. In pratica l’header contiene, in alto a destra, i link principali del sito. Un esempio è l’header del sito di Mozilla. Ho inoltre notato che l’ultimo urlo è l’uso del nero e dei grigi scuri.Spiando un po’ di CSS e con l’ausilio di alcune guide sono riuscito a riprodurre questa nuova moda. Il risultato finale è visibile qui sotto:

Clicca sull’immagine per ingrandire

Vediamo come si fa.

Passo 0: le regole di base

Ogni foglio di stile che si rispetti inizia con le seguenti regole:

body, html
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	border: 0;
	margin: 0;
	padding: 0;
	background-color: #ededed;
        /* Dopo vedremo perché questo colore  di sfondo */
	color:#000000;
}

Passo 1: header-conteiner

Costruiamo un contenitore dell’header in modo tale che il vero header sia al centro della finestra. E’ semplicissimo:

div#header-container
{
    background-color: #000000;
    /*Come sfondo ho scelto il nero */
    text-align: center;
    margin: 0;
}

Passo 2: header

Ora il vero header: lo disegneremo in modo tale che abbia una larghezza minima e una massima. Le regole fondamentali da usare in questo caso sono max-width e min-width. E’ risaputo che queste regole non sono rispettate da IE. Per risolvere a questo problema si usano (purtroppo) i controlli ActiveX di IE: ho utilizzato questa guida.

div#header
{
   min-width: 750px;
   max-width: 900px;
   /* max-width in IE */
   width:expression((document.body.clientWidth >= 900 ? "900px" :
        (document.body.clientWidth <= 750 ? "750px" :
         document.body.clientWidth + "px")));
   text-align: left;
   margin: 0 auto;
   padding: 0;
   border-left: solid 1px #666;
   border-right: solid 1px #666;
}

Ho utilizzato come larghezza minima 750 pixel (meno di così non mi ci sta più nulla!) e massima 900 pixel. I bordi a sinistra e a destra sono necessari per mostrare quali sono i limiti sinistro e destro del contenuto reale. L’uso di expression è di semplice comprensione: se la larghezza della finestra di IE (che ci viene restituita da document.body.clientWidth) è maggiore di 900 px allora imposterà la regola width a 900px, se è minore di 750 la imposterà appunto a 750, altrimenti se il valore è compreso fra 750 e 900, verrà usata la dimensione attuale della finestra. Purtroppo non ho modo di testare che questo controllo funzioni anche su IE 4 o 5.

Passo 3: il titolo

Ora dividiamo in 2 parti l’header. A sinistra mettiamolo il titolo e a destra, dopo, metteremo i link. Per il titolo ho preferito usare un immagine (anche se è sempre consigliato usare un tag <h1>) di dimensione 200×50 px, con un font casuale. Il testo è stato riempito con un gradient da #ededed (questo spiega il richiamo dello sfondo) a #cccccc.

div#header_title
{
	padding-left: 27px;
	position:relative;
	float:left;
}
img { border:0; }

Passo 4: La barra di navigazione

Questa è la parte un po’ più difficile. Vogliamo che i link appaiano similmente a dei pulsanti, da destra verso sinistra. Per prima cosa creiamo il solito contenitore per posizionare la barra a destra.

div#header_nav
{
   position:relative; /* in realtà non necessario */
   float:right;
   width: 525px;
   margin: 0;
   padding: 0;
}

La larghezza fissa è 525px perché ogni “pulsante” lo imposteremo di dimensione 85px. Io nell’esempio ho 5 link, più margini interni e esterni che modificano la reale dimensione, si arriva a 525px. Per fare la barra si usa un elenco puntato:

div#header_nav ul
{
    display: block;
    margin: 0 auto 0 auto;
    padding: 0;
    list-style: none;
}

La regola display:block trasforma (detto male!) il nostro ul in un blocco, praticamente in un div. Ora inseriamo gli elementi li

div#header_nav li
{
   list-style: none;
   display: inline;
   margin: 0;
   padding: 0;
   text-align: right;
   font-size: 12px;
}

La regola display:inline fa si che i vari elementi dell’elenco sia visualizzati in orizzontale, uno accanto all’altro.

Passo 5: i link

Ora trasformiamo i “pulsanti” in veri link. Io ho scelto i seguenti colori:

• Il link selezionato è rosso scuro(a.selected): #900020;
• Al passaggio del mouse il link diventano color arancione(a:hover): #CC5500;
• Un leggero bordo a sinistra di ogni “pulsante” ne facilità la distinzione.

div#header_nav li a {
    display: block;
    float: right;
    margin: 0;
    padding: 36px 9px 7px 9px;
    width: 85px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-left: solid 1px #333;
}
div#header_nav li a:hover {
    background-color: #CC5500;
}
div#header_nav li a.selected {
    background-color: #900020;
}

Passo 6: clear-div

Purtroppo si rende necessario, a causa delle regole float:left e float:right, l’uso di un div vuoto con la regola clear:both.

.clear { clear:both; }

Non utilizzare questo div ha conseguenze catastrofiche sul risultato!

Ecco fatto! Qui c’è un esempio completo, con relativo foglio di stile. In un prossimo post vedremo anche come creare un corpo del sito adatto e un footer.

Segnalatemi problemi o errori (io l’ho provato con IE 6&7, Firefox 2, Opera e Safari per XP), soprattutto se qualcuno prova la pagina con IE datato (4 o 5) su cui ho forti dubbi sul corretto funzionamento.

- Warning: Divide by zero.

Popularity: 11% [?]

Potrebbe interessarti anche...

• Non ci sono articoli inerenti.