Mer om listor

1. Inledning

Den här sidan bygger vidare på det jag skrev på sidan om Autotext. Där visade jag framförallt hur man kan ändra listtecknen, dvs punkterna och numreringen för listor.

Läs mer om detta på sidan Autotext >

Här skall jag inledningsvis bygga vidare på det temat då jag i nästa avsnitt visar hur man skapar egna listtecken och styr listan på olika sätt.

I avsnitten som sedan följer visar jag några mer avancerade sätt att skapa listor. Jag har använt mig av flera olika källor, framförallt stilmallsskolan på W3 Schools och Website Tips CSS Section.

2. Lista med egna tecken

På min startsida har jag en lista med en stjärna i stället för de vanliga punkterna. Listan ser ut så här:

Listan i min webbläsare	Så här ser den ut i din webbläsare
	Ananas Banan Citron

Grundkoden ser ut så här:

<style type="text/css">
ul { list-style-image: url('listtecken.gif') }
</style>

Den kod jag använde i exemplet innehåller sedan ytterligare några kommandon. Jag har t.ex skapat en klass som heter .lista, eftersom jag inte vill ändra alla mina listor, utan blott där jag själv vill:

.lista {
list-style-type: none;
list-style-image: url('listtecken.gif');
list-style-position: inside;
font-family: Verdana, sans-serif;
margin: 2px;
border: 0px;
padding: 2px;
}

Kommandot list-style-type berättade jag om på sidan om autotext. Läs mer här >

Nytt är list-style-image som är ganska självförklarande. Man anger bildens placering som med vanlig Html, dvs 'listtecken.gif' innebär att bilden ligger i samma mapp som sidan där den skall visas.

list-style-position går jag mer igenom i nästa avsnitt. Man hämtar sedan listformatet med följande kod:

<ul class="lista">
<li>Ananas</li>
<li>Banan</li>
<li>Citron</li>
</ul>

Det tecken jag använt mig är alltså en helt vanlig bild:

Jag har även använt mig av margin, padding och border för att få webbläsarna att inte dra in listan så mycket. Margin påverkar grundinställningen i Internet Explorer och Opera. Padding påverkar Netscape och Mozilla.

Här får man eventuellt experimentera själv tills man hittar lämpliga värden.

3. list-style-position

Detta kommando används för att placera listtecknen på olika sätt, inuti eller utanför själva textinnehållet.

Bilden till höger visar vilka möjliga inställningar man kan göra.

Man kan använda kommandona för både punklistor och numrerade listor.

Man använder sig av inside och outside och det ser ut så här:

ul { list-style-position: inside }

• Den här listan har listtecknen placerade inuti listan. Det betyder att punkterna i din webbläsare bör hamna med samma indrag som den övriga texten.
• Det finns vad jag vet ingen särskild regel för när man använder inside eller outside. Man använder dem således helt enkelt som man vill.

ul { list-style-position: outside }

• Den här listan har listtecknen placerade utanför listan. Jag föredrar ofta detta sätt då det blir enklare att läsa listan.
• Har man listor med kortare meningar spelar det ingen roll vilken av listtyperna man använder.

4. Avancerade listor

Självklart kan man hitta på en hel del roliga saker med listor och stilmallar. Jag kommer att återvända till detta tema på sidan Tio sätt att göra hemsidor, men här vill jag ändå visa några saker man kan göra.

Listor kan nämligen delvis ersätta tabeller i och med att man kan behandla listans rader som tabellceller. Här är ett exempel:

.speciallista {
background: #FFCC33;
font-size: 100%;
font-weight: bold;
font-family: Verdana, Trebuchet, Geneva, Arial, Helvetica, sans-serif;
vertical-align: top;
text-align: left;
padding: 3px;
border-left: ridge 1px;
border-left-style: solid;
border-left-color: #000000;
border-right: ridge 1px;
border-right-style: solid;
border-right-color: #000000;
border-bottom: none;
border-top: ridge 1px;
border-top-style: solid;
border-top-color: #000000;
}

Lägger man in denna kod för att styra varje post i listan får man följande:

I min webbläsare blir det:	Så här blir det i din:
	Ananas Banan Citron

Varje rad styrs alltså via kommandot:

<li class="speciallista">

Observera att jag här inte lagt till någon linje längst ner, eftersom vi då skulle få dubbla linjer (uppe och nere). I stället skapar man en ny stilmall för enbart sista raden, som har linjer runt om.

Punkterna för listan kan man enkelt ta bort som vanligt genom att styra hela listan med:

.ingapunkter {
list-style-type: none;
}

5. Horisontella listor

Om man vill kan man sedan ta ytterligare ett steg mot en mer fri layout och placera listor inuti stycken, skapa horisontella listor (inline) eller placera listor var som helst på en sida (position).

Dock bör man vara på det klara med att ju mer avancerade stilmallskoder man använder desto större är risken att webbläsarna skall missförstå den.

Här är dock ett exempel som fungerar. Koden ser ut så här:

#horisontell ul {
display: inline;
margin-left: 0;
padding-left: 0;
}

#horisontell ul li {
display: inline;
list-style: none;
margin-left: 0;
padding: 4px 12px;
border-left: 1px solid #333333;
font-weight: bold;
}

#horisontell ul li.first {
display: inline;
list-style: none;
margin-left: 0;
border-left: none;
}

Den första stilmallen styr hela listan och elementet ul. Nästa mall styr alla listelement som finns inuti den lista som märkts med "horisontell".

I tredje mallen talar man om hur första listelementet skall behandlas. Här vill vi undvika att första listposten får en kant till vänster om sig.

Använder man färgad bakgrund får man försöka anpassa mellanrummen något och man bör tänka på att olika webbläsare tolkar listan på olika sätt.

I min webbläsare blir det:

Så här blir det i din:

Tricket här är att lägga listan i en <div> som man märker så här:

<div id="horisontell"><ul> o.s.v.

När man väl har lärt sig dessa principer kan man sedan gå vidare och göra menyer som listor i stället för tabeller. Men det visar jag i stället på sidan Tio sätt att göra hemsidor.