1 Jul
2011
Posted in: Steg för steg
By    Comments Off

31. Listor

Vad ska du med listor till? Jo förmodligen önskar du att ha med en MENY på din hemsida och då kommer du använda dig av en lista!

Vi börjar med att testa på att skapa en lista.

Låt oss säga att vi tänker skapa en lista inför en utlandsresa över vad vi måste ta med oss.

Koden ser ut så här:

<ul>
<li>
Pass</li>
   <li>
Resplanen</li>
<li>
Biljetter</li>
   <li>Underkläder</li>
<li>
Hygienartiklar</li>
</ul>

 

Om vi lägger in det på vår hemsida så får vi alltså en lista som ser ut såhär:

  • Pass
  • Resplanen
  • Biljetter
  • Underkläder
  • Hygienartiklar

 

 

och vi kan Stylea vår lista i vår CSS fil.

T.ex. kan vi skriva att vi vill att alla li ska vara gröna!

då skriver vi

li{
color: #00ff00;
}

 

Då borde alla dina ord ändras om till grön färg!

Vi kan med hjälp av margin bestämma vilket avstånd hela listan ska ha till element (saker/andra grejer på hemsidan) som finns runtomkring.

Om vi helt enkelt skriver

ul{
margin: 20px;
}

Då blir avståndet 20px; till allting åt alla håll, men vi kan också välja att t.ex. endast påverka avståndet ovanför eller under genom att skriva margin-top: 20px; eller margin-bottom: 20px;  för vänster och höger gäller margin-left: och margin-right:

Comments are closed.