Diamo quindi i primi stili al nostro menu di navigazione:
Centriamo il contenitore esterno del menu di navigazione (#navcontainer
) tramite margini orizzontali
automatici e gli assegniamo una larghezza pari al 90% della colonna laterale. Quindi posizioniamo un'immagine di sfondo
in alto a sinistra. Questa immagine andrà a formare l'angolo arrotondato superiore del menu.
A questo punto passiamo all'elenco non ordinato (#nav
). Annulliamo i suoi margini e il suo padding e gli assegniamo
un larghezza pari a quella del suo genitore. Quindi posizioniamo un'immagine di sfondo sulla parte inferiore destra dell'elemento.
Questa immagine andrà a formare l'angolo arrotondato inferiore del menu. Si noti come il colore di sfondo di questo
elemento sia trasparente, in modo da non coprire l'immagine di sfondo del suo genitore.
La centratura orizzontale tramite margini automatici non è compatibile con Internet Explorer 5. A questo proposito dovremmo:
text-align: center
sull'elemento #navcontainer
text-align: left
sull'elemento #nav
.Si noti infine come le dichiarazioni di larghezza siano sempre esplicite. Questo ci permette di evitare i noti problemi con alcune versioni di Internet Explorer.
Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.