Formatering af listemenuen

Kun separator

I eksempel 2 viste jeg, hvorledes du kunne formatere en uordnet liste af links på en sådan måde, at listen kommer til at udgøre et menupanel, det vil sige lodretstillet menu.

Denne og de følgende sider viser, hvorledes du med enkle midler kan gøre denne liste til genstand for yderligere præsentationsformatering ved hjælp af et stylesheet.

Stylesheet'et til nedenstående udformning af menuen er:

.menu3 {
  padding: 0 0 0.5em; 
  margin: 0; 
  border-bottom: 1px solid gray; 
  width: 13em;}
.menu3 li {
  list-style: none; 
  margin: 0; 
  padding: 0.25em; 
  border-top: 1px solid gray;}
.menu3 li a {
  text-decoration: none;}

Præsenteret på websiden ser denne menu således ud:

Bemærkninger til stylesheet'et

For at gøre det så simpelt som muligt er jeg i dette og de følgende 6 eksempler (eksempel 3-9 inklusive) afstået fra at tage særlige hensyn til Internet Explorer. Det betyder, at linksene ikke er aktive i hele menuens bredde. I sener eksempler, der bygger videre på disse første eksempler, tager jeg hånd om dette trods alt ret lillel problem.

Dermed bliver konstruktionen ganske ukompliceret: En uordnet liste af links, hvor jeg har fjernet listepunkt-markøren, slået en streg under listen og en streg over hvert listepunkt.

Bemærk i øvrigt i mine eksempler at jeg ikke har sat nogen eksplicitte skriftstørrelser. Det betyder, at al sidens tekst, menuen inklusive, øges og mindskes ved hjælp af browserens tekststørrelsesværktøj. (I Internet Explorer: Menuen Vis/Tekststørrelse).

Webdesign - illustreret håndbog
Webdesign med XHTML

– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S

Eric Meyers listemenuer

Dette eksempel og de seks følgende eksempler (Eksemplerne 3 - 9 inklusive) er baseret på Eric Meyer's ganske fremragende artikel Minimal Markup, Surprising Style. Jeg har foretaget nogle ganske få rettelser i kildekoden af hensyn til browserkompatibiliteten.