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!