Come centrare header

Di:
tramite: O2O
Difficoltà: media
17

Introduzione

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.

27

Occorrente

  • Browser
  • Blocco note
37

Come creare il file .css

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.

47

Come aggiungere la dichiarazione di position

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.

Continua la lettura
57

Come creare un form di ricerca

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.

67

Guarda il video

77

Consigli

Non dimenticare mai:
  • Come eseguire dei comandi con il proprio pc
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Software

Come realizzare animazioni in JQuery responsive

JQuery è una libreria javascript che consente ai programmatori e ai designer di produrre pagine e contenuti su internet attingendo alle più moderne funzioni interattive. Ma la principale caratteristica di JQuery è rappresentata dal suo linguaggio semplice,...
Programmazione

Come mandare una mail in PHP

Inviare un'email in PHP, per un programmatore abbastanza pratico del linguaggio in HTML, è un'operazione abbastanza semplice ed intuitivo. Questo è possibile in quanto è presente, di default, l'apposita funzione mail nelle librerie, senza che sia necessario...
Programmazione

Come definire una classe in C++

Attraverso la lettura di quest'interessante guida, andremo a occuparci del linguaggio C++. Per essere più specifici, come abbiamo avuto occasione di indicarvi nel titolo di questa guida, ci dedicheremo a spiegarvi come definire una classe all'interno...
Software

Web Design: come disegnare un template con Photoshop

Un template è sostanzialmente la "maschera" di un sito web, ovvero il modo in cui si presenta graficamente e in cui esso viene organizzato. Per creare un template personalizzato, si può ricorrere a Photoshop, un programma di grafica che ormai non ha...
Internet

Come creare un tema per Mybb

MyBB è un software gratuito, che chiunque puó utilizzare per realizzare il proprio forum o portale. Oltre ad offrire temi predeterminati che potete scaricare sempre gratis, consente di creare, esportare, importare temi personalizzati. Vediamo a grandi...
Internet

Come centrare titolo del blog

Se avete appena creato un blog da annettere ad un sito di e-commerce, e il titolo non vi soddisfa perché vi appare troppo piccolo e soprattutto non ben centrato, non è il caso di farne un dramma; infatti, ci sono svariate opzioni per intervenire con...
Internet

Come creare un modulo Drupal

Per creare un semplice modulo in Drupal basterà seguire poche, semplici ma necessarie regole, senza dover essere degli esperti smanettoni. Quella del “come si crea un modulo per Drupal? ” è la domanda che spesso viene fatta e spesso la risposta...
Programmazione

Come effettuare un redirect in PHP

Il tutorial di oggi è dedicato alla creazione di un file *. Php da caricare sul vostro server che avrà il compito di reindirizzare un vostro visitatore verso un link prestabilito e deciso da voi. Nel codice che vi mostrerò, ci sarà la possibilità...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.