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.