Felsorol�sok form�z�sa CSS-ben

K�tf�le felsorol�s l�tezik: sz�mozott (=ordered list=ol) �s sz�mozatlan (=unordered list=ul). Ez a st�lusokn�l fontos k�l�nbs�g, mert a sz�mozott felsorol�sokn�l mindig m�smilyen a felsorol�sjel (sz�mok vagy bet�k), m�g  a sz�mozatlan felsorol�sokn�l mindig egyforma a listajel, teh�t nem csak el�re meghat�rozott forma lehet, hanem ak�r k�p is.

Itt l�thatsz n�h�ny p�ld�t k�ddal egy�tt (csak az els� sor a k�d):

• ul.f {list-style-type: square;}
• CSS
• CSS

• ul.i {list-style-type: circle;}
• CSS
• CSS

1. ol.r {list-style-type: katakana;}
2. CSS
3. CSS

1. ol.e {list-style-type: lower-alpha;}
2. CSS
3. CSS

Ez itt n�gy felsorol�s, mindegyikben csak egy pont van, a b�ng�sz�nek pedig valahogy k�l�nbs�get kell k�zt�k tenni, teh�t a list�n bel�l CSS oszt�lyok vannak, ezeket ponttal kell elv�lasztani. Az els� p�ld�n�l a sz�mozatlan list�n bel�l van az "f" nev� oszt�ly. Ha nem tudod, mik az oszt�lyok , itt le van �rva, hogy mik az oszt�lyok �s mire j�k.

Az �sszes CSS-ben haszn�lt listajel k�dja t�bl�zatos form�ban:

K�p felsorol�sjelnek

K�pet csak sz�mozatlan felsorol�sokhoz tudsz betenni. T�ltsd fel a k�pet, m�sold ki a c�m�t �s tedd be a k�dba, fontos, hogy a k�p m�rete j� legyen:

ul {
list-style-image: url('K�P URL C�ME');
}

Alapvet�en ez a k�d, de n�ha a k�l�nb�z� b�ng�sz�kben kicsit feljebb/lejjebb jelenik meg a k�p. Ez �ltal�ban 1-2 pixel �s nem zavar�, de az�rt le�rom a m�sik k�dot, ami kik�sz�b�li ezt a probl�m�t, de bonyolultabb is:

ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
li {
background-image: url('K�P URL C�ME');
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}ul

Amit meg kell adnod:

• k�p URL c�me
  
• hol legyen a "listajel"
  
• hol kezd�dj�n a sz�veg, teh�t mekkora legyen a beh�z�s, milyen t�vols�gra legyen balr�l

<< vissza a CSS k�dokhoz!