kaxigt.com

Lästid: 42 minuter

Välkommen till åttonde lektionen!

För att göra listorna lite mer attraktiva kan du styla dessa med css. Det finns ett flertal listegenskaper att använda. Vi ska börja lektionen med att kika på hur man kan definiera den odefinierade – unordered- listan <ul>.

• Unordered list – oordnade listor
• Ordered lists – ordnade listor
• List bullets – använd en bild
• Definierade listor

Unordered lists – odefinierade listor

Ul betyder unordered list och li list item. När du gör odefinierade listor kan Du välja mellan dessa olika listtyper:

decimal | circle | square | disc | none | lower-roman | lower-alpha | upper-alpha | upper-roman

Egenskaperna för dessa värden lägger du in i denna kod:

ul {list-style-type:square;}

Vill du positionera listan kan du använda dig av två egenskaper – inside eller outside. Outside är grundläget för alla listor men vill du skapa ett indrag för listan anger du värdet inside – du får då en marginal från vänsterkanten.

Css-syntax:

1. ul.inside {list-style-position:inside}
2. ul.outside {list-style-position:outside}

Ordered list – ordnad lista med siffror eller bokstäver

När vi vill lista en uppräkning som exempelvis antal kommentarer använder vi en ordnad lista . I sin enklaste form ser selektorn ut så här ol – ol li. Men vi kan ju ange några egenskaper om vi vill, exempelvis dessa:

1. ol {list-style-type:upper-alpha;}
2. ol {list-style-type:lower-roman;}

W3C ger ytterligare exempel på hur man kan specificera listorna – både som oordnad och ordnad lista. Kika på koderna här under:

1. ul.circle {list-style-type:circle}
2. ul.square {list-style-type:square}
3. ol.upper-roman {list-style-type:upper-roman}
4. ol.lower-alpha {list-style-type:lower-alpha}

Läs mer i html-guiden om att göra listor.

Egenskaper för listor

list-style	anger att det är lista med märkning som ska användas
list-style-type	anger vad för typ av listmärkning som ska användas, ex: square, circle, disc, decimal, upper-alpha, upper-roman, lower-alpha, lower-roman, none
list-style-image	anger att listan ska ha en bild vid varje listmärkning istället för ovanstående listmärken.
list-style-position	anger var listmärkningen ska placeras i listan, ex: outside, inside

Egenskaperna för en lista kan användas som short hand declarationgroup och ska då skrivas i följande ordning:

list-style-type | list-style-position | list-style-image

Listbullets – använda bild i listan

Du kan också välja att använda en bild. Då ser märkningen i sin enklaste form ut så här. Observera att koden är skriven som short hand declaration.

ul {list-style-type:none;background: url(images/bullet.gif);}

Inte oväntat så läser inte alla webbläsare in koden på samma vis – skillnaden mellan Firefox, Chrome, Safari mot IE och Opera är att de två sistnämnda har en tendens att positionera bilden något högre än de tre första webbläsarna.

Av den anledningen kan det vara bra att positionera vår bild i listan så den ligger snyggt och lika i alla webbläsare, men då måste vi ytterligare lägga till några egenskaper och värden:

li {list-style-type:none;  background: url(images/pages.gif) no-repeat 5px .20em; padding:0px 0px 0px 30px;}

Med url(images/pages.gif) no-repeat 5px .20em; anger du först att bilden inte ska upprepas, och med värdet 5px .20em; positionerar du sedan bildens förhållande till baslinjen på listan, det vill säga uppåt, nedåt, utåt eller inåt.

Med padding:0px 0px 0px 30px; anger du sedan förhållandet mellan bilden och innehållet i listan. Padding 30px ger innehållet/texten/länken i listan en indragning från vänster på 30px, bilden ej medräknad.

Hade värdet varit 0px så hade innehållet i listan hamnat ovanpå bilden.

• Här har jag alltså angett padding:0px;

Om man ska använda en bild eller ta bort listmarkeringen i en oordnad lista (ul) måste man ange list-style-type:none;. För att också få listan crossbrowser måste margin och padding i ul definieras som 0px.

Vad det gäller själva listan li så ska man inte låta bilden repeteras – vi lägger då till no-repeat. Använd egenskaperna 5px .20em; för att positionera bilden och padding:0px 0px 0px 30px; för att positionera listans innehåll i förhållande till bilden (eller innehållet i listan utan bild).

Normal css-syntax utan short hand:

1. ul {
2. list-style-type:none;
3. padding:0px;
4. padding:0px
5. }
6. li {
7. background-image:url(images/page.gif);
8. background-repeat:no-repeat;
9. background-position:5px .20em;
10. padding-left:30px;
11. }

Styla definition lists – definierade listor

Vi ska nu titta på hur du kan formatera dina definierade listor. Vi ska använda mitt exempel men lägga till lite mer text och använda oss av css för att ge listan ett mer attraktivt utseende.

dl {margin: 0; padding: 0; width:500px;}
dt {margin:0; padding:0.4em;font: bold 1.2em/1.4em Arial, verdana, serif;
background: #fff; text-align:left;color:blue; text-transform:uppercase; 
letter-spacing:2px;}
dd {margin:0; padding: 0 0px 0 30px; text-align:left; border-top:1px solid #f5f5f5;
font: 12px/2em arial, verdana, serif;color:#111;}

Html-koden ser fortfarande ut så här:

<dl>
<dt>Kaxigt</dt>
<dd>En site för dig som är nyfiken på webstandard xhtml/css. Här har du flera tips som kan vara till hjälp i ditt hemsidesnickrande.</dd>
<dt>Besökare</dt>
<dd>Här finns många webguider i olika ämnen. Eftersom jag är intresserad av webstandard är guiderna främst riktade mot xhtml/css.</dd>
<dt>Skoj</dt>
<dd>Webdesign är kul! Oavsett om du hamrar vanlig html eller webstandard är det viktiga att du har kul i ditt byggande.</dd>
</dl>

För doctype transitional kan du använda följande tre märkningar direkt i htmlkoden- fungerar inte i strict

<ul type="disc"></ul>
<ul type="square"></ul>
<ul type="circle"></ul>

För doctype strict är det däremot viktigt att du både definierar property och value i selektoren du ska ha om du väljer att definiera denna direkt i html-koden. Koden för detta ser ut så här:

<ul style="list-style-type: disc;"></ul>

Använd din css och låt fantasin flöda – du har oändligt många variationer att tillgå.
I lektion nummer 9 ska vi gå gruppera element med div, ID, span och class.

Välkommen dit!