17. La sezione "Sei qui" e lo style switcher
Tocca ora alla sezione "Sei qui" e allo style switcher. Decidiamo di raggrupparli all'interno di
un unico elemento e di farli apparire l'uno a sinistra e l'altro a destra. Gli stili saranno:
- /* Sezione "Sei qui" e style switcher */
- #top {
- margin: 0;
- border-bottom: 1px solid #bccad9;
- height: 1.4em;
- line-height: 1.4em;
- background: #fff;
- color: #000;
- }
- #breadcrumbs {
- margin: 0;
- padding: 0 0 0 1em;
- height: 1.4em;
- line-height: 1.4em;
- float: left;
- }
- #breadcrumbs li {
- float: left;
- display: block;
- height: 1.4em;
- line-height: 1.4em;
- padding-right: 0.5em;
- }
- #breadcrumbs a:link,
#breadcrumbs a:visited,
#breadcrumbs a:hover {
- display: block;
- color: #008;
- background: transparent url("img/freccia.gif") no-repeat 100% 50%;
- padding-right: 1em;
- }
- #change-style {
- margin: 0;
- padding-right: 1em;
- text-align: right;
- height: 1.4em;
- line-height: 1.4em;
- float: right;
- }
- #change-style a {
- padding-left: 0.5em;
- }
Vediamo in dettaglio i nostri stili:
- Righe 2-9: L'elemento
#top
va a contenere le sezioni "Sei qui" e lo style
switcher. Abbiamo impostato un'altezza uguale all'interlinea per 1) contenere i float che andremo ad usare (valore proprietà
height
) e 2) centrare il testo in verticale all'interno degli elementi (valore proprietà
line-height
= valore proprietà height
). Grazie a questa dichiarazione, la semiinterlinea
sarà uguale a 0.7em sopra e sotto il testo, il quale verrà centrato in verticale
- Righe 10-23: Facciamo flottare l'elemento
#breadcrumbs
a sinistra, ma non ne impostiamo la
larghezza, in modo che in questo caso venga applicato l'algoritmo shrink-to-fit. Tale algoritmo fa in modo che
la larghezza del float sia sufficiente per ospitare il suo contenuto, avendo così un float che si adatta al suo contenuto.
Si noti che abbiamo ripetuto le dichiarazioni di altezza e di interlinea impostate in precedenza. Anche le voci dell'elenco sono
state flottate a sinistra, e anche per loro abbiamo la stessa altezza e la stessa interlinea, più un padding destro
per distanziare le voci
- Righe 24-29: I link all'interno del menu vengono dichiarati di blocco, in modo da non incorrere in problemi
con Internet Explorer al momento di applicare l'immagine di sfondo. Tale immagine rappresenta il divisore all'interno del percorso,
e va a sostituire i segni di maggiore usati nel layout originale. L'immagine è posizionata a destra del testo dei link
e centrata verticalmente (coordinate 100%, 50%). Viene distanziata dal testo dei link tramite un padding destro pari ad 1em
- Righe 30-40: Lo style switcher viene fatto flottare a destra. Anche per questo elemento ripetiamo le dichiarazioni
di altezza e di interlinea, e lasciamo che venga applicato l'algoritmo shrink-to-fit nel computo della sua larghezza. I link al suo
interno vengono distanziati tra loro tramite un padding sinistro pari a 0.5em.
Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro
documento HTML.