Punktlistor i CSS

Här har du en lista:

<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>

Detta är en oordnad lista. Avstånden sköter du med CSS. margin-left och padding-left. Margin för att bestämma avståndet innan punkt och padding för att bestämma avstånd mellan punkt och text.

Kalle M skrev:

2. Vad är skillnaden på att definiera <UL> och <LI> i min CSS?
Ska man ha med båda?

Du använder UL för att skapa själva listningen och li (list item) för varje värde du vill ha i din lista.

2. Vad är skillnaden...?

I din CSS sätter du egenskaper för hela listan på UL t.ex list-style,
och egenskaper för själva listelementen på LI t.ex. margin:, padding;.

Om jag fattat frågan rätt.

Ok!

Får till avståndet mellan vänster kant och punkt men mellan punkten och texten är det värre. Nån som kan visa mig hur koden ser ut så vore det jättesnällt.

Kalle M skrev:

Ok!

Får till avståndet mellan vänster kant och punkt men mellan punkten och texten är det värre. Nån som kan visa mig hur koden ser ut så vore det jättesnällt.

Om jag inte minns fel så ska du ha padding-left på <li> i stilmallen. Testa.
Men tänk på att alla typer av listor renderas ganska olika i olika webbläsare. Man får verkligen kolla så att det blir ok i alla. Kan se jättebra ut i en, men vara katastrof i en annan. Det är bl.a. därför som man sällan ser listor som har mer än bara grundläggande stilsättning.

Ja det funkar när jag sätter paddin left i <li>.

Förbryllar dock att jag måste ha med både <ul> och <li>

Kalle M skrev:

Räcker det inte att jag definierar <UL> i min stilmall?
Kommer det sig att man behöver definiera <li>? Ärvs den inte?

Testa. ;)

Ser koden ok ut? Tycker det förbryllar att det inte räcker med <ul>.

ul {
    list-style-type: square;
	margin-left: 20px;
	padding-left: 20px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 10px;
	
}
li {
	padding-left: 20px;
}

Tänk dig att <ul> är som en låda, eller ram, där du kan bestämma dig för margin, dvs en yttre marginal och padding, dvs luftutrymme till innehållet, dvs <li>.

För <li> kan du i sin tur bestämma dig för margin, dvs en yttre marginal per varje list-item, som då också gäller mot andra <li> och den omslutande <ul> samt att du kan välja att sätta padding för att kontrollera det "inre" luftutrymmet i varje enskild <li>

Det kanske inte är så supertydligt med nyttan i alla val, men om du börjar experimentera med färgsättning så kommer det att klarna avseende styrkan i alla detaljval du kan göra.

Testa att sätta background-color: #0f0; på <li> och en annan färg på <ul> så tror jag det blir enklare att förstå :)

/HB

ok!

kan jag göra koden bättre som jag skrivit?

Nja, koden du skrivit gör precis det som står, är det bättre eller sämre beror ju såklart på vad du vill göra :p

Ser det bra ut i både FF och IE6/7 som du tänkt dig, då är det bara att låta det vara så :)

Räcker det inte att endast ha listtype inom <ul> och resten i <li> ?
När man sätter ut padding och margin..bör man sätta på alla? top,left,right osv?

Mvh

Kalle M skrev:

Räcker det inte att endast ha listtype inom <ul> och resten i <li> ?
När man sätter ut padding och margin..bör man sätta på alla? top,left,right osv?

Mvh

Det beror ju på vad du vill göra. Ofta räcker det med listtype i stilen för ul, men ibland måste man ha marginal (särskilt vänster).

När du sätter padding och margin kan du använda "shorthand", t.ex.:

padding:10px 5px 6px 19px
är det samma som
padding-top:10px;
padding-right:5px;
padding-bottom:6px;
padding-left:19px;

padding:10px 5px 6px 19px visar alltså från "klockan 12" (top) och medurs.

Jag vet inte hur mycket du gör av det som du får tips om, men om du gjort som headbug sa till dig om att sätta bakgrundsfärger så skulle du sett vad som händer.
Med den css du visat lite högre upp så blir skillnaderna så här om du har det mesta antingen i li eller i ul.
Med andra ord en stor skillnad och ingen annan än du vet ju hur du vill ha det och vad som är bäst eller...???
Så testa och använd färger så ser du när du får det som du vill ha det :) .