Navigazione Avanzata

Guida Layout dei siti con i CSS, lezione 41.
Layout monolitico fluido >> visualizza il css di questo layout >> /*stili per la navigazione*/

La LISTA si realizza nel modo seguente:
nella pagina HTML, inserire dopo il tag <div id=”...”>:

<div id="box3">
<ul>
<li>HOME</li>

<li>PHOTO GALLERY</li>
</ul>

Il tag <ul> apre la lista, mentre <il> viene inserito per creare le voci della navigazione, creando così una lista verticale, puntata.

Se vogliamo ottenere una navigazione inline, ovvero orizzontale, bisogna ridefinire il foglio di stile inserendo:
#navigation ul{margin: 0;padding: 0; list-style-type: none;}  

#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/ 

Per inserire i link nella navigazione, dobbiamo aggiungere il tag <href>, nella pagina html:

<div id="box3">

<ul>

<li><a href="index.html">HOME</a></li>


Di base, se creiamo un link abbiamo una formattazione standard, che ne definisce lo stile. Per eliminarla, torniamo sul foglio di stile ed inseriamo:

#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none} 
#navigation a:hover{color: #fff;text-decoration: underline}  
#navigation a#activelink{color: #033;text-decoration: none}

Il primo navigation definisce come si vedranno i link, quindi il colore, il font e la grandezza.
Il secondo navigation, riguarda il colore che il link assume quando ci passiamo sopra con il cursore del mouse. Per modificarlo, dobbiamo cambiare il codice cromatico seguente ad a:hover.