Come centrare header

Tramite: O2O 07/06/2017
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

Internet

Come centrare la pagina di Google

In questo articolo vi spiegherò come centrare la pagina di Google. Molto spesso può capitare a tutti di avere dei problemi con la corretta visualizzazione della pagina web. Ad esempio può succedere di accendere il proprio computer e di ritrovarsi di...
Internet

Come centrare un video

Oggi grazie a questa semplice guida cercheremo di capire come centrare un video all'interno di post o articolo sul web, in modo da consentire a tutti coloro che visualizzano il testo di vedere ben centrato ed ordinato anche il video ad esso correlato....
Internet

Come centrare una pagina html

Hai creato un sito web o una pagina di un blog e il testo non vuole saperne di stare al centro della pagina? Le immagini e i paragrafi risultano decentrati, spostati a sinistra e risulta tutto attaccato e di difficile lettura?Il codice html usato nelle...
Internet

Come centrare un oggetto in html

HTML è il linguaggio di programmazione utilizzato per disegnare le pagine web.In questa guida, passo dopo passo, vedremo come centrare un oggetto in HTML. Solitamente in ogni testo scritto, si usa l'allineamento a sinistra per il corpo del documento,...
Internet

Come centrare le foto sul profilo Facebook

Facebook è senza dubbio il social network più utilizzato dalle persone di tutto il mondo. Grazie ad esso, infatti, è possibile mettere in contatto due o più persone indipendentemente dalla distanza in cui essi si trovano. Ma oltre a questo, Facebook...
Internet

Come centrare pagina Google

Il PC rappresenta uno strumento elettronico che fa ormai parte di qualunque famiglia italiana. Ad utilizzarlo sono tanto i bambini (che vanno controllati anche mediante software tipo Revealer Keylogger Free) quanto dagli adulti. I piccoli adoperano il...
Internet

Come centrare un'immagine HTML

Le immagini HTML sono quelle che danno ad un sito Internet un aspetto piacevole, che spiegano meglio quanto vi viene descritto e che lo rendono maggiormente “appetibile” per i visitatori. Utilizzare in modo sapiente le immagini in un sito web o in...
Internet

Cos'è una blockchain

In questa guida cercheremo di capire, dettagliatamente, cos'è una blockchain. La blockchain è sostanzialmente una lista di registri, chiamati blocchi, precisamente blocks, collegati tra di loro in maniera sicura, tramite strumenti di crittografia. Nella...