Inserimento del menù di navigazione principale nell’home page di un sito

In questa lezione vedremo come inserire il menù di navigazione nella testata principale di un sito web. Duplica lezione-6 all’interno della cartella htdocs di xampp e rinominarla lezione-7. Successivamente avvia Atom in modalità progetto usando la cartella appena creata.

Posizionamento degli elementi con il tag span

L’inserimento del menù di navigazione all’interno dell div id header, dovrà essere gestito in modo tale da convivere con il logo. Si tratta infatti di usare lo spazio di testata per ospitare due elementi, il logo e il menù.

Vedremo più avanti che ci sono moltissimi modi per impaginare le cose, ma visto che questo è un corso base per ora ci limiteremo ad un approccio semplificato per prendere confidenza con il codice.

Organizzeremo il contenuto dell’header con il tag span, un tag html che consente di impaginare i contenuti senza influenzare il resto. La sintassi è sempre la stessa.

<span>

contenuto

</span>

Il linguaggio html si basa su l’organizzazione dei contenuti come una sorta di matrioska con gli elementi annidati tra loro, pertanto Il nostro div header dovrà contenere due span, uno con il logo e uno con il menù,

<div id=”header” >
<span id=”logo” > immagine.png </span>
<span id=”nav” > link1, link2, link3 </span>
</div>

Abbiamo aggiunto quindi due span all’interno di header con due id diversi per poterli andare a gestire poi nel tag style. Il codice della pagina di presenterà in questo modo.

A video avremo un risultato come questo (vedi immagine).

Inserimento menù di navigazione

La proprietà float

Per spostare gli elementi all’interno della pagina o di uno stesso contenitore, dobbiamo usare la proprietà float, che consente appunto di “fluttuare” i tag della mia pagina web a sinistra o a destra.

Nel nostro specifico caso abbiamo la necessità di fluttuare il logo a sinistra e il menù di navigazione a destra per poter gestire al meglio l’impaginazione. Andremo quindi a inserire nuove regole nel tag style dell’head lavorando su id logo e id nav in questo modo.


<style>
#logo {
float:left;
}
#nav {
float:right;
}
</style>

Il codice della pagina quindi cambierà in questo modo.

E a video avremo questo risultato (vedi immagine).

Elementi con il float

Dov’è finito il div header? Usando la proprietà float vengono influenzati gli elementi presenti nel codice. Il div header c’è, ma viene nascosto in quanto sprovvisto di float, la sua altezza auto non viene interpretata.

Ci sono diversi modi per far vedere di nuovo il div header

  • Usare la proprietà float anche al div header ma questo influenzerà tutti gli altri elementi.
  • Dare un’altezza fissa al div header, ma ci dovremo ricordare ogni volta di doverlo andare a modificare se aggiungiamo altri elementi, in quanto non avendo più height:auto non riucirà ad adattarsi automaticamente
  • Usare la proprietà display:inline-block;

Sceglieremo la terza opzione, usare display:inline-block;

Uso del display:inline-block;

Per ora limitiamo a dire che display:inline-block è uno dei modi per usare la proprietà display, un altro strumento che il codice html ci mette a disposizione per impaginare.

Affronteremo in maniera approfondita l’uso del display nel corso di html livello intermedio. Ora prova ad aggiungere il display:inline-block al div header.

A video ecco di nuovo visibile il div header (vedi immagine).

header con display:inline-block;

Ora andiamo a organizzare meglio il nostro layout, aggiustando gli elementi grafici. Come avrai notato il logo è appiccicato all’header e il menù di navigazione è in alto a destra, vediamo come gestirli.

Usare il padding

Il padding è una delle tante proprietà html usate per impagina e organizzare i contenuti, ci consente di far “rientrare” un elemento quasi come se fosse schiacciato su se stesso per non farlo stare attaccato alle estremità. La logica è la stessa dei margini, quindi vale il concetto di senso orario, con la differenza che i margini spostano fisicamente un elemento, il padding no.

#logo {
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
}

Sopra la sintassi completa che può essere scritta in forma abbreviata per ottimizzare il codice.

#logo {
padding:10px 10px 10px 10px;
}

Abbiamo scritto la stessa cosa in forma abbreviata con la regola del senso orario. Aggiungi questa regola nel codice della pagina web e rimetti i margini a 0 nel body.

Questo sarà il nostro risultato a video.

Uso del padding in un’immagine

Seguendo lo stesso ragionamento, andiamo ad applicare il padding a tutti gli altri elementi in questo modo.

Per avere a video un questo risultato (vedi immagine).

padding negli elementi interni

La proprietà del padding ha fatto si che il main e il footer diventino più larghi rispetto al container, questo perché altezza e larghezza vengono influenzate quando dichiarate. Pertanto in questo caso, avendo dato al main e al footer una larghezza di 700px, un padding-left di 20px e un padding-right di 20px è come se i nostri elementi fossero diventati larghi 740px, 40px in più rispetto al main.

Dobbiamo quindi impostare la loro larghezza a 660px per tornare alla situazione iniziale scrivendo questo codice.

Ho aggiunto al main un’altezza auto e al footer text-align center, il risultato a video sarà così (vedi immagine).

Home page completa con larghezze modificate dopo il padding

Nella prossima lezione vedremo come inserire i link (collegamenti ipertestuali) al testo e alle immagini e come inserire testi e immagini nel documento html.