Listor och CSS

Den här artikeln bygger vidare på den startsida som vi bygger upp med XHTML och CSS i guiden "Webbsida - praktiska exempel".

I den här artikeln lär du dig att skapa en lista till den webbsida som användes i förra kapitlet. Du lär dig också att använda display:inline som gör att listan skrivs ut horisontellt istället för vertikalt, en egenskap som även kan användas på andra taggar. Till sist visar jag hur du kan använda pseudoklassen first:child för att endast påverka det första listelementet.

Skapa en lista i XHTML

Det finns två typer av listor: numrerade listor (ol), onumrerade listor (ul) och definitionslistor (dl). I det här exemplet använder vi oss av en onumrerad lista och tanken är att vi ska använda en lista för att hålla länkarna som vi lagt uppe i sidhuvudet. Det är mer naturligt att använda ett en lista som hållare för navigationslänkar än att använda exempelvis taggen p för stycke.

Ersätt dina länkar i koden i sidhuvudet med följande kod:

<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 1</a></li>
<li<a href="#">Länk 1</a>></li>
</ul>

Gör en horisontell lista med CSS

För att göra så att listelementen <li> visas horisontellt, så lägger du till detta i CSS-filen som skapade tidigare:

div#sidhuvud li {
display:inline;
}

Eftersom länkarna kommer att ligga för tätt inpå varandra så skapar vi en högerpadding för varje listelement så här:

div#sidhuvud li {
display:inline;
padding-right: 12px;
}

Du kan skapa en kantlinje som skiljer elementen åt:

div#sidhuvud li {
display:inline;
padding-right: 12px;
border-right: solid 1px;}

Det blir dock snyggare om vi har padding på både höger och vänster sida då vi använder kantlinje. Vi ersätter höger-paddingen på 12px med en vänsterpadding på 6px och en högerpadding på 6px:

div#sidhuvud li {
display:inline;
padding-left: 6px;
padding-right: 6px;
border-right: solid 1px;}

First child

Ibland kan det vara bra att kunna en kantlinje även på elementet längst till vänster för att få en enhetlig design. Att lägga en border-left på alla element blir dock fult eftersom den egenskapen kommer att "krocka" med element som använder sig av border-right, vilket skapar dubbelkanter.

För att lösa problemet använder vi oss av en pseudoklass.

Lägg till detta i stilmallen för att skapa en kant på enbart det första listelementet i navigationsmenyn:

div#sidhuvud ul:first-child {
border-left: solid 1px
;}

"First-child" betyder direktöversatt "första barnet". Första barnet till taggen ul får med denna kod tillagd i stilmallen en 1 pixels solid kantlinje.

Kommentar: Om ett element (2) ligger inuti ett annat element (1) så räknas det som ett barn till 1. Motsatsen till first-child är last:child, som påverkar det sista elementet och fungerar på samma sätt.

Slutresultat

Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)

Relaterade artiklar

• Webbdesign
• XHTML
• CSS
• Hemsideprogram
• Köp Dreamweaver