La prima area che abbiamo definito nel layout è il menu di servizio. Per far sì che il colore di sfondo prenda tutta la larghezza possibile abbiamo già impostato la sua larghezza con il valore 100%.
Ora vediamo come inserire al suo interno un menu con tre voci allineate sulla destra rispetto l'area centrale del nostro layout.
Liste non ordinate
Innanzitutto dovete immaginare qualsiasi tipo di menu come una lista cosiddetta "non ordinata". Il menu infatti concettualmente prevede che vi sia un elenco di voci da cliccare, e come tale semanticamente va trattato. Utilizzeremo pertanto i tag HTML corrispondenti che sono:
| Tag | Descrizione |
|---|---|
<li></li> |
è il tag che racchiude i singoli elementi della lista (list-items) |
<ul></ul> |
è il tag con il quale si apre e chiude una lista, cioè un insieme di elementi <li>. <ul> sta per unordered list, cioè lista non ordinata, per differenziarla da <ol>, la lista ordinata, che di default organizza gli elementi in ordine crescente anteponendo all'elemento, a seconda del css assegnato un numero o una lettera. |
Le liste sono estremamente utili e facili da manipolare. Ad esempio possiamo modificare il comportamenti di una lista non ordinata (unordered-list), scritta in questo modo nel nostro codice HTML:
<ul>
<li>chi siamo</li>
<li>dove siamo</li>
<li>contatti</li>
</ul>Ma nel CSS dichiariamo che lo stile che avranno gli elementi della nostra lista sia simile a quello di una lista ordinata, in questo modo:
ul li {
list-style: decimal-leading-zero;
}Otteniamo il seguente risultato
- chi siamo
- dove siamo
- contatti
Mentre normalmente, con una lista non ordinata, il risultato di default (senza alcuna indicazione nei css), sarebbe la seguente:
- chi siamo
- dove siamo
- contatti
Che in genere corrisponde alla regola list-style: disc.
Alla luce di queste riflessioni, utilizziamo tutte le proprietà di cui possiamo disporre per le liste per fare in modo che siano rappresentate come desideriamo, senza dimenticarci di scrivere correttamente il codice HTML.
Pensando di rappresentare un menu dobbiamo ad esempio considerare che le singole voci sono dei link, ai quali pertanto va aggiunto il corretto tag:
<div id="menuservizio">
<ul>
<li><a href="chisiamo.html">chi siamo</a></li>
<li><a href="dovesiamo.html">dove siamo</a></li>
<li><a href="contatti.html">contatti</a></li>
</ul>
</div><!--menuservizio-->Ora possiamo definirlo correttamente nel nostro css, e trasformiamo il tag <ul> in un elemento di blocco in modo da gestirne più semplicemente la posizione all'interno del div #menuservizio:
#menuservizio ul
{
display: block;
margin: 0 auto;
padding:10px 0 0 560px;
width: 260px;
}Come potete vedere abbiamo dato un margine automatico laterale in modo che si posizioni esattamente al centro della pagina. La width è stata diminuita in quanto è stato definito un padding sinistro di 560px per poter spostare le 3 voci sulla destra rispetto ai confini del sito (560+260 fa infatti 820 che è la larghezza stabilita).
Ora andiamo invece a definire i singoli elementi di lista, che al contrario dovremo trasformare da elementi di blocco ad elementi in linea per poterli allineare orizzontalmente. Il trucco è sempre quello di usare la proprietà display.
#menuservizio li
{
display: inline;
margin: 0;
padding:0 8px;
}Ora mancano i link, o àncore, la cui definizione nel css merita una digressione.
I link e le pseudoclassi nei link
Molto semplicemente, i link, come anche altri elementi specifici, possono avere delle classi particolari che ne definiscono comportamenti tipici.
Per i link infatti esistono ben 5 pseudoclassi, due "di stato" e tre "dinamiche", che ne determinano il comportamento in base all'azione dell'utente nei confronti di quel tag.
Iniziamo da due classi che vanno sempre controllate, poiché altrimenti possono assumereil comportamento assegnato di default dai browser.
| Pseudoclasse | Attivazione |
|---|---|
| a:link | è lo stato normale del link (di default è di colore blu e sottolineato) |
| a:visited | è lo stato in cui si trova quando il collegamento è già stato visitato (di default è color viola e sottolineato) |
Le seguenti pseudoclassi invece si associano a comportamenti dell'utente, pertanto non c'è nessuna opzione di default assegnata dal browser, e se graficamente non vogliamo che i collegamenti cambino aspetto, possiamo anche ometterle.
| Pseudoclasse | Attivazione |
|---|---|
| a:hover | attiva quando l'utente si posiziona su di esso con il mouse |
| a:focus | attiva quando il link è selezionato tramite il tab della tastiera |
| a:active | attiva nell'istante in cui stiamo cliccando sul link (quindi uno stadio successivo all'hover ma prima che si trasformi in visited) |
È importante che le suddette pseudoclassi vengano evidenziate nel CSS nell'ordine suddetto, poiché se ad esempio la classe visited fosse scritta prima dello stato link, tutti i link nello stato normale prenderebbero le sue caratteristiche. Pertanto è bene che, se volete segnalarle tutte e 5 o parte di esse, siano nell'ordine segnalato.
Dov'è il link? Non lo trovo...
Solitamente i link hanno bisogno di essere segnalati con la sottolineatura, soprattutto se sono contenuti all'interno di un testo lungo. Non basta cambiarne di colore o renderli in grassetto, poiché potrebbero essere facilmente scambiati per testo evidenziato, bisogna inoltre considerare che non tutti hanno la stessa percezione del colore e non tutti hanno voglia di scorrere un intero testo con il mouse per individuare dove siano i link la cui sottolineatura si attiva solo sull'hover.
È invece lecito non apporre una ridondante sottolineatura nei menu o in tutte quelle sezioni di navigazione dove la grafica e la funzione del testo che fa da link è evidente, e dove magari la sottolineatura rovinerebbe solo la grafica del sito, oltre che essere inutile.
Torniamo quindi al nostro layout e definiamo i nostri link del menu tenendo presente quanto evidenziato.
Ricordiamoci che stiamo definendo i link di un'area specifica con uno specifico div, pertanto è bene essere specifici per evitare che tutti i link di tutto il sito assumano il comportamento che stiamo per assegnare.
#menuservizio a:link,
#menuservizio a:visited
{
color: #fff;
text-decoration:none;
font-variant:small-caps;
}