CSS: creare l'header di un sito

L'header di un sito è sicuramente una delle sezioni più difficili da formattare con i CSS. Le difficoltà sono quasi tutte nell'esatto allineamento verticale ed orizzontale degli elementi. Se abbiamo un titolo, una descrizione, un menu di navigazione e un form di ricerca, dobbiamo fare in modo che lo spazio sia distribuito equamente e che non si verifichino sovrapposizioni quando l'utente ridimensiona la finestra del browser o modifica la dimensione dei font. Vediamo come procedere.

Partiamo dalla seguente struttura:

<div id="green-solutions">


    <div id="branding">
	
	    <h1>Green</h1>
		<p id="tagline">CSS makes it easy!</p>
		
		<hr />
		
		<form id="search" action="" method="get">
		
		    
			
			<div>
			     <input type="text" name="q" id="q" />
				 <input type="image" src="img/search.png" name="search-btn" id="search-btn" alt="Search" />
			</div>
		
		</form>
		
		<hr />
	
	
	</div>
	
	<div id="navigation">
	
	    <ul>
		
		    <li><strong>Home</strong></li>
			<li><a href="#">The Project</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contacts</a></li>
		
		</ul>
	
	</div>
	
	



</div>

Resettiamo subito gli stili predefiniti dei browser:

/*= Elementi HTML */

body {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #333;
	font:  62.5%/1 Arial, Helvetica, sans-serif;
}

a:link, a:visited {
	color: #466432;
}
a:hover {
	color: #9c3;
}

hr {
	display: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: Georgia, serif;
    font-size:. 100%;
}

p, li {
	line-height: 1.4;
}

input, textarea, select { /* Normalizza l'altezza degli elementi dei form */
	font: 1em Arial, Helvetica, sans-serif;
	vertical-align: middle;
}

Usiamo misure dei font in em, che andremo ad aumentare sul contenitore del sito:

/*=Layout */

/*= Contenitore del sito */

#green-solutions {
	width: 100%;
	font-size: 1.3em;
}

Definiamo quindi un'altezza per l'header e gli assegniamo un'immagine ripetuta di sfondo:

/*= Header */

#branding {
	height: 10em;
	background: #446432 url(img/branding.gif) repeat-x;
	color: #fff;
	padding-left: 1.5em;
	position: relative;
}

Abbiamo creato un posizionamento contestuale con la dichiarazione position: relative che ci servirà per posizionare gli elementi all'interno dell'header:

#branding h1 {
	font-size: 4em;
	font-weight: normal;
	letter-spacing: 0.1em;
	color: #446432;
	float: left;
	height: 2.5em;
	text-indent: 125px;
	padding-top: 35px;
	background: transparent url(img/h1.png) no-repeat 0 100%;
	text-transform: uppercase;
}

#branding #tagline {
	margin: 0;
	font-variant: small-caps;
	font-style: italic;
	font-weight: bold;
	font-size: 1.5em;
	padding-bottom: 0.2em;
	border-bottom: 0.4em solid #fff;
	color: #fff;
	float: left;
	padding: 45px 0.4em 0 2em;
}

#branding #search {
	position: absolute;
	height: 2em;
	margin: 0;
	top: 45px;
	right: 1.5em;
}

#branding #search #q {
	width: 150px;
	height: 2em;
	display: block;
	border: none;
	background: #fff;
}

#branding #search #search-btn {
    position: absolute;
	display: block;
	top: 0.5em;
	right: 0;
}

Il menu di navigazione deve essere portato più in alto, quindi useremo il posizionamento relativo negativo:

/*=Navigazione */

#navigation {
	width: 60%;
	margin: 0 auto;
	position: relative;
	height: 2em;
	top: -2.1em;
	font-size: 1.2em;
}

#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

#navigation ul li {
	float: left;
	height: 100%;
	margin-right: 0.5em;
}

#navigation ul li a {
	float: left;
	display: block;
	height: 100%;
	line-height: 2;
	background: #446432;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	padding: 0 1em;
	border-radius: 5px 5px 0 0;
}

#navigation ul li strong {
	float: left;
	display: block;
	height: 1.6em;
	line-height: 1.6;
	border-top: 0.4em solid #446432;
	padding: 0 1em;
}

#navigation ul li a:hover {
	background: #ccee98;
	color: #333;
	height: 1.8em;
	line-height: 1.8;
	border-top: 0.2em solid #446432;
}

Per spostare il menu in alto abbiamo usato la sua altezza come valore negativo della proprietà top. Potete visionare l'esempio finale in questa pagina.