tutorial: gör roligare listor med css!

tutorial: gör roligare listor med css!
 
Fick en fråga om hur jag gjorde så att mina menylistor bestod av hjärtan istället för vanliga prickar, så jag tänkte att jag kunde göra en snabb tutorial av det. Det är nämligen hur lätt som helst, men gör så att listorna ser mycket roligare ut!
 
❀ När man ska ändra utseendet på detta sätt så gör man ändringen i stilmallen.
 
 Där skriver man in den här textraden:
 

li {

  list-style-image: url(länktillbilden);
  list-style-type: disc/square/circle;
  margin-left: 0px;
}

 
 "li" innebär att det är just listornas utseende som ändras på. Sedan är det bara att göra de ändringar som ni vill!
 
Det jag har gjort här på sidmenyn är att jag har valt att göra list"prickarna" till bilder, och sedan använt en bild på ett hjärta istället. Om du vill göra det skriver du in en länk till bilden inom paranteserna efter "list-style-image".
 
Du kan även t.ex. ändra stilen från cirklar/prickar. Då skriver du in antingen "square" (fyrkanter), "disc" (vanliga, prickar) eller "circle" (tomma cirklar). Detta gör du efter "list-style-type".
 
Jag har valt allt flytta mina listor lite till vänster. Det gör man genom att ändra på "margin-left". Genom att skriva negativa tal så flyttas listorna till vänster, och genom att skriva positiva så flyttas de till höger.
 
OBS! Om du bara vill ändra till exempel "list-style-type" och inte något annat så är det bäst att ta bort de andra textraderna så att det inte blir några ändringar du inte vill ha!
 
❀ Jag hoppas det här hjälpte någon, och om ni har några frågor så är det bara att fråga på. Ha det bra!