Come centrare header

Ecco una guida utile ed interessante, attraverso il cui aiuto, concreto ed anche molto e del tutto pratico, potremo essere in grado d'imparare come centrare Header. Come sempre cercheremo di eseguire nei minimi dettagli e con estrema efficacia, anche questo articolo, affinché tutti i nostri lettori, anche coloro i quali non hanno delle grosse capacità in questo ambito, potranno essere in grado d'eseguire il tutto, con estrema facilità. Il linguaggio HTML si avvale di molti elementi complementari per rendere ancora più belli e godibili i siti internet. Tra questi esiste il linguaggio CSS, un utile complemento che serve a dettare lo stile che verrà usato nella pagina web per immagini, scritte, link e quant'altro. Creare e formattare in CSS l'header di un sito è sicuramente uno dei principali problemi riscontrati dai webmaster. La difficoltà sta nel centrare tutti gli elementi presenti nell'header (logo, titolo, menu di navigazione, form di ricerca), e distribuirli equamente in tutto lo spazio disponibile. Vediamo quindi come procedere per creare un header pulito e ordinato, attraverso pochi e semplici passaggi e in maniera pratica.

• Browser
• Blocco note

Creiamo il nostro file .css e modifichiamolo con un semplice blocco note (tasto destro, apri con, blocco note) o con qualsiasi altro editor di testo. È possibile anche interagire con CSS all'interno della nostra pagina HTML, inserendo tutti i dati necessari del nostro CSS tra tra gli del sito. Creiamo l'header che chiameremo appunto #header e impostiamo l'altezza e la larghezza con height e width. Esempio: #header{height: 100px; width: 500px;}. Tuttavia è consigliato creare un contenitore principale e inserirci l'header, in modo da separare header e la barra di navigazione che andranno entrambi nel contenitore principale.

A questo punto per centrare il nostro header bisogna aggiungere "position: relative;" e "margin: 0 auto;". Quindi avremo: #header{width: 500px; height: 100px; position: relative; margin: 0 auto;}. Con la creazione di un header senza il contenitore principale sarà necessario impostare i valori di width e height in pixel, mentre se l'header è posizionato all'interno di un altro contenitore principale è possibile utilizzare la % per i due valori (esempio: width: 50%; height: 40%;) La dichiarazione di position: relative; ci servirà per posizionare gli elementi all'interno dell'header.

A questo punto tutti gli altri DIV che andranno all'interno dell'header (logo, titolo, barra di ricerca) li setteremo tutti con "position: absolute;". Se per esempio volessimo creare un form di ricerca, questo sarà il risultato: #search {position: absolute; margin: 0; height: 20px; width: 100px; top: 45;}. La barra di navigazione possiamo inserirla nel contenitore principale invece che nell'header, settando così "position: relative;". Per far in modo che la barra di navigazione sia attaccata all'header così da non farli sembrare staccati, useremo un posizionamento relativo negativo "top: -10px;". Esempio: #navigation {width: 50%; height: 80px; margin: 0 auto; position: relative; top: -10px;}.
Centrare un header non è un'operazione così difficile, basterà in fatti seguire le istruzioni di questa guida oppure divertirsi a sperimentare le varie opzioni di questo utilissimo linguaggio.
Non mi resta quindi che augurarvi buon divertimento e buon lavoro.
Alla prossima.

• Come eseguire dei comandi con il proprio pc

• http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html

• Gli errori più comuni su CSS
• CSS: 10 cose da sapere