22. La prima formattazione del menu di navigazione

Diamo quindi i primi stili al nostro menu di navigazione:

  1. #sidebar #navcontainer {
  2. margin: 1em auto;
  3. width: 90%;
  4. background: #fff url("img/sup-sx.gif") no-repeat top left;
  5. }
  6. #sidebar #nav {
  7. margin: 0;
  8. width: 100%;
  9. padding: 0;
  10. background: transparent url("img/inf-dx.gif") no-repeat bottom right;
  11. color: #000;
  12. }

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:

  1. dare la dichiarazione text-align: center sull'elemento #navcontainer
  2. ripristinare l'allineamento tramite 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.