CSS Zibaldone

[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]

Sei qui: Home > Articoli > Posizionamento degli elementi all'interno di un header

Posizionamento degli elementi all'interno di un header

Introduzione

Una delle tante difficoltà che si incontrano nella realizzazione di un layout con i CSS è il posizionamento degli elementi all'interno di un contenitore. Con le tabelle il problema non si presenta, in quanto queste ultime permettono di controllare il posizionamento con maggiore facilità (si pensi alla proprietà vertical-align). A complicare ulteriormente la situazione si aggiunge il fatto che spesso occorre inserire anche delle immagini, per esempio dei loghi. Le immagini hanno delle dimensioni intrinseche espresse in pixel, e non è sempre agevole trovare la giusta ratio tra questo tipo di misure e valori fluidi (em, percentuali, ecc.). In questo articolo illustreremo un modo per posizionare un logo, un menu di navigazione ed un form di ricerca all'interno di un header (intestazione).

L'allineamento

Partiamo da una semplice struttura XHTML:

<div id="header">
<p id="logo">
<a href="#"><img src="logo.gif" alt="Logo" /></a>
</p>

<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

<form id="search" action="" method="get">
<div>
<input type="text" value="" id="testo" name="testo" />
<input type="submit" value="Cerca" />
</div>
</form>

</div>

L'immagine che segue ci mostra la situazione di partenza:

Il codice CSS potrebbe essere:

body {
margin: 0;
padding: 0;
font: 76%/1.5 Verdana, sans-serif;
background: #fff;
color: #000;
}

a:link, a:visited {
color: #00c;
background: transparent;
}

a:hover {
color: #c00;
background: transparent;
}

a:focus {outline-style: none;}

a img {border: none;}

#header {
height: 5em;
border-bottom: 1px solid #000;
margin: 0;
}

#logo {
margin: 0;
float: left;
width: 150px;
}

#nav {
float: left;
width: 30%;
margin: 0;
padding: 0;
list-style: none;
}

#nav li {
float: left;
margin: 0;
padding: 0 0.5em;
height: 5em;
line-height: 5em;
}

#search {
margin: 0;
width: 30%;
float: left;
}

#search div {
height: 5em;
line-height: 5em;
}

Internet Explorer 6 (ed inferiori) necessita del seguente codice aggiuntivo:

<!--[if lt IE 7]>
<style type="text/css">
#search input {
position: relative;
top: 1.5em;
}
</style>
<![endif]-->

Il risultato finale ci mostra il posizionamento ottenuto all'interno dell'header. La soluzione è compatibile anche con Internet Explorer 7, come mostrato dal seguente screenshot:

Poichè abbiamo deciso di usare un'immagine come collegamento ipertestuale, la prima cosa da fare è rimuovere il bordo assegnato di default all'immagine:

a img {border: none;}

Quindi, avendo scelto il float come schema di posizionamento, assegnamo un'altezza all'header per impedire il collassamento dello spazio verticale:

#header {
height: 5em;
border-bottom: 1px solid #000;
margin: 0;
}

A questo punto posizioniamo in orizzontale gli elementi usando la proprietà float:

#logo {
margin: 0;
float: left;
width: 150px;
}

#nav {
float: left;
width: 30%;
margin: 0;
padding: 0;
list-style: none;
}

#nav li {
float: left;
margin: 0;
padding: 0 0.5em;
height: 5em;
line-height: 5em;
}

#search {
margin: 0;
width: 30%;
float: left;
}

Per il posizionamento verticale del testo scegliamo di assegnare un'interlinea uguale all'altezza degli elementi contenitori (5em), uguale a sua volta all'altezza complessiva dell'header:

#nav li {
float: left;
margin: 0;
padding: 0 0.5em;
height: 5em;
line-height: 5em;
}

#search div {
height: 5em;
line-height: 5em;
}

Si noti come la scritta del logo si trovi leggermente più in alto rispetto alle voci del menu e al form di ricerca. La soluzione consiste nel creare un'immagine con il testo perfettamente centrato in verticale ed in orizzontale, cosa che non è stata fatta in questo caso, avendo l'immagine uno scopo puramente dimostrativo. Quindi occorre trovare una misura equivalente all'altezza dell'immagine da usare come altezza dell'header. In questo caso il valore 5em è un'approssimazione usata allo scopo di garantire la scalabilità in caso di ridimensionamento del testo. Ad ogni modo occorre stabilire quale sia la misura più adatta attraverso vari test. I test vanno effettuati ridimensionando la finestra del browser e la dimensione dei caratteri sui vari browser (Internet Explorer, Firefox ed Opera, soprattutto).

Infine, si noti come il posizionamento degli elementi possa essere variato a seconda delle esigenze. Se per esempio avessimo voluto avere il form di ricerca sul lato destro dell'header, avremmo dovuto semplicemente far flottare il form a destra.