Horisontale lister
I de forrige innleggene i denne serien har jeg allerede vist hvordan horisonale list kan lages. Det er ganske enkelt: En gir <ul>-elementet en “width” (bredde) som er stor nok til at det er plass til flere <li>-elementer ved siden av hverandre, og bruker “float” (f.eks. “float:left”) for å la <li>-elementene flyte til siden og legge seg ved siden av hverandre.
CSS-en kan se slik ut:
.hor {width:400px; text-align:center; list-style:none;} .hor li { float:left; width:80px; }
og HTML (markup) slik:
<ul class="hor"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
Det gir denne enkle listen:
- Item 1
- Item 2
- Item 3
- Item 4
Stort sett brukes horisontale lister i menyer av forskjellige slag: Horisontale navigasjonsmenyer (som ofte liggen under header, men over overskriften, på toppen av siden), såkalte “breadcrumbs” som er navigasjonsmenyer i poster og innlegg, og i menyer på bunnen av nettsider.
Vi kunne bruke dem til andre ting, for eksempel til å fremstille årsakskjeder eller liknende, slik som her:
- Konflikt →
- Bomber →
- PANG
Poenget er vel at det ikke er noen spesielle grunner til å bruke <ul><li>-konstruksjoner til det. Det er like enkelt å bruker <p>- eller <span>-elementer. F.eks. kunne jeg bruke p-elementer slik:
Konflikt → Bomber → PANG
Selv om det er semantisk riktig og greit nok, er det altså ikke noe stort poeng å bruke <ul><li>-konstruksjoner til dette.
Horisontale menyer
Det virker mer riktig og fornuftig å bruke horisontale lister til meny-fnutter av forskjellige slag. Selv bruker jeg ofte lister til enkle menyer inn i poster eller tekst på nettsider. For eksempel en liste som denne:
Markup for å lage denne listen er enkel (jeg har tatt ut fil-referanser for å forenkle):
<ul class="horlist center"> <li><a href="#">Del 1: Lister</a></li> <li><a href="#">Del 2: Vertikale lister</a></li> <li><a href="#">Del 3: Flerkolonnelister</a></li> </ul>
CSS-en ser slik ut:
.center { text-align:center; }
.horlist { list-style-type:none;text-align:center;
width:95%;margin:0 auto; }
.horlist li { display:inline; }
.horlist a { padding:6px 15px; background:#EDEEFE;
text-decoration:none; color:blue; margin:0; }
.horlist a:hover {color: red; }
Jeg definerer klasser i CSS fordi det kan tenkes at jeg vil ha to eller flere slike lister på en og samme side (om jeg brukte id – # – ville jeg bare kunne ha en per side).
Det som er å legge spesielt merke til ved CSS-en her, er at jeg “styler” linkene i listen (a-elementet) og ikke slik som er vanlig i generelle lister <li> (jeg gir a-elementet padding og background, men ikke <li>-elementet).
Denne måten å gjøre ting på er vanlig i menyer. Grunnen er at når jeg gjør det slik blir det mulig å klikke på menyen selv om en ikke holder cursor akkurat over selve linken – jeg gjør på en måte det klikkbare området større og dermed gjør jeg det lettere for brukerne å bruke menyen.
Legg også merke til at jeg bruker “display:inline” for å gjøre listen horisontal. Det vanlige er “float:left” på liste-elementene, og det er en bedre måte å gjøre det på (støttes av flere browsere). Jeg valgte å gjøre det på denne måten her bare for å vise at det kan brukes som et alternativ.
OK. Neste post i denne serien er om horisontale menyer.
