Styla listorna med css
För att göra listorna lite mer attraktiva kan du styla dessa med css.
Som sig bör låter vi i första hand vår stilmall sköta denna sak.
Hur du definierar listan direkt i html-koden kan du läsa om längre ned på sidan.
Det finns ett flertal definitioner att använda och vi ska nu kika på hur man kan definiera den odefinierade listan <ul>.
Du kan välja mellan dessa olika listtyper:
decimal | circle | square | disc | none | lower-roman | lower-alpha | upper-alpha | upper-roman.
Definitionerna för dessa värden lägger du in i denna kod:
ul {list-style-type:square;}
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.
Vi börjar med att infoga denna kod i <head> -
använder du en extern stilmall tar du självfallet bort det som är grönmarkerat:
<style type=”text/css”>
dl {margin: 0; padding: 0; width:500px;}
dt {margin:0; padding:0.4em;font: bold 1.2em/1.4em tahoma, times, 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;}
</style>
Html-koden ser fortfarande ut så här:
<dl></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>
Se samtliga färdiga exempel.
För doctype transitional kan du bara använda följande tre märkningar - fungerar inte i strict:
<ul type=”disc”>
<ul type=”square”>
<ul type=”circle”>
För doctype strict är det viktigt att du definierar property och value i selektoren du ska ha. 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å.
(No Ratings Yet)
Loading ...