Navigeringsfält

Navigeringsfältet är en del av sidlayouten och förstås nödvändigt för att läsaren ska kunna ta sig runt bland alla sidorna på webbplatsen.

I en typisk traditionell sidlayout är navigeringsfältet antingen vågrätt eller lodrätt. Det är också ganska vanligt med en kombination av dessa, när det finns en undermeny på varje delområde. Hur man än väljer att ordna navigeringen, bör den dock alltid ligga kvar på samma plats på alla sidorna.

Navigering i listform

Ett navigeringsfält är rent strukturellt en lista där de olika ämnesområdena eller huvudrubrikerna presenteras som länkar. Ska man tillämpa XHTML-tänket fullt ut, bör man också lägga länkarna i just en punkt- eller nummerlista.

Att strukturera navigeringsfältet som en lista innebär dock inte att det måste se ut som en traditionell punkt- eller nummerlista. Med CSS är det fullt möjligt att formge listor både liggande och stående, utan vare sig punkter eller nummer, samt med diverse utformningar och bakgrunder.

<div id="nav">
  <ul>
   <li><a href="index.htm">Startsida</a></li>
   <li><a href="om_mig.htm">Om oss</a></li>
   <li><a href="kontakt.htm">Kontakta</a></li>
   <li><a href="arkiv.htm">Arkiv</a></li>
  </ul>
 </div

Liggande navigeringsfält

För att kunna lägga listelementen på samma rad, använder man display:inline på väljaren li. Det här gör också att listmarkörerna försvinner.

Punkt- och nummerlistornas förinställda indrag regleras med margin och padding på hela listblocket (ul). Avståndet mellan listelementen kan ökas genom att man ökar den högra och vänstra marginalen med samma värde.

#nav      { width:400px; height:25px; text-align:center }

 #nav ul  { margin:0; padding:0 } 
 #nav li  { display:inline; margin:0 10px 0 10px; padding:0 }

Stående navigeringsfält

I ett stående navigeringsfält kan listelementen visas med eller utan listmarkör.

Listmarkörerna försvinner när egenskapen list-style-type får värdet none. Denna egenskap sätts till ol, ul eller li.