Come ottenere la barra di navigazione sotto l’intestazione in CSSheader {

Quando si codifica un nuovo layout del sito Web, a volte può essere complicato ottenere i diversi elementi nelle posizioni esatte desiderate. Qualcosa di semplice come posizionare la barra di navigazione sotto l’intestazione principale è suscettibile a diverse stranezze del linguaggio di markup e potresti finire con la navigazione a destra oa sinistra, anche se il codice è apparentemente corretto. I probabili problemi sono un ordine errato nei file HTML o un utilizzo errato del comando CSS “float”.

1

Apri il tuo file HTML in un editor di testo. Assicurati che il divisore per la barra di navigazione, identificato con un tag, si trovi subito dopo il divisore per l’intestazione. Se sono presenti elementi tra l’intestazione e la barra di navigazione, non sarai in grado di risolvere questo problema tramite la sola codifica CSS. Il risultato finale sarà simile a questo:

Codice di intestazione qui Codice a barre di navigazione qui

2

Carica il foglio di stile contenente il tuo codice CSS. Se non utilizzi fogli di stile separati, il CSS si troverà tra i tag nella parte superiore del file HTML. Scansiona il codice CSS e individua la sezione che regola l’intestazione. Inizia con un simbolo cancelletto e sarà simile a questo:

intestazione {

Codice qui}

Se non è presente, aggiungilo al file CSS, ma assicurati di utilizzare lo stesso nome “id” utilizzato all’interno dell’HTML.

3

Aggiungi un po ‘di codice CSS per posizionare l’intestazione. Se vuoi che l’intestazione sia allineata su un lato, aggiungi la seguente riga, cambiando “sinistra” in “destra” se preferisci:

float: sinistra;

Se vuoi che l’intestazione si estenda su tutta la larghezza del sito, aggiungi le seguenti righe, che creano una linea dura che ritorna dopo l’intestazione e centra tutto ciò che contiene:

blocco di visualizzazione; larghezza: 100%; text-align: center;

4

Individua la sezione del file CSS che controlla la barra di navigazione. Aggiungi la seguente riga di codice a questa sezione:

chiaro: entrambi;

Questo sposta l’elemento sotto qualsiasi oggetto flottato sopra di esso, assicurando che la barra di navigazione appaia sotto, e non a lato, della tua intestazione.

5

Salvare tutti i file e quindi caricare il file HTML in un browser per verificare i risultati. Se la navigazione non viene visualizzata correttamente, ricontrolla tutte le modifiche apportate. In particolare, assicurati che ogni riga nel CSS termini con un punto e virgola e che ogni sezione utilizzi le parentesi di apertura corrette – “{” – e di chiusura – “}”.

Referenze

  • HTML Dog: layout di pagina

  • Scuole W3: barra di navigazione CSS

Scrittore Bio

Warren Davies scrive dal 2007, concentrandosi su progetti su misura per clienti online come PsyT e The Institute of Coaching. Questo è stato accanto al lavoro nella ricerca, nel web design e nel blogging. Utente e giocatore Linux, warren si allena nelle arti marziali come hobby. Ha un Bachelor of Science e un Master of Science in psicologia e ulteriori qualifiche in statistica e studi aziendali.

Come allineare il testo in HTML

Il codice HTML per elenchi annidati

Come nascondere l’intestazione su Tumblr

Trasformare un tema WordPress in un tema Tumblr

Come evidenziare un collegamento in Tumblr

Esercitazione avanzata sul layout CSS senza tabella

Come decorare le caselle di intestazione in CSS

Come creare una barra di navigazione del sito web trasparente

Come centrare il mio menu di navigazione tramite CSS in Blogger

Perché il mio piè di pagina è al centro della mia pagina web?

Come ridurre l’involucro nel codice HTML

Come trovare un tag del corpo nel blog di WordPress