CSS-liste

[juNktw-]

[centru]CSS - Liste

In HTML avem doua tipuri de liste:

- ordonate - numere, nuemere romane sau litere
- neordonate - cerculete, buline, patratele etc.

Atributul list din CSS permite modificarea tipului de lista sau sau folosirea unei imagini ca marcador.

Un exemplu practic de a folosi atributul list este:

ul {list-style-type:disc;}
ol {list-style-type:upper-roman;}

Pentru a folosi o imagine ca marcador vom folosi:

ul { list-style-image:url("image.png"); }

Mentiune:
NU toate browser-ele vor afisa imaginea in aceasi pozitie. De exemplu Internet Explorer si Opera va afisa imaginea ceva mai sus decat Firefox si Google Chrome.

Pentru a plasa imaginea in pozitia dorita si sa ramana acolo in orice navigator vom:

- folosi imaginea ca background fara sa o repetam.
- vom stabili distanta fata de marginea din stanga si cea de sus.
- vom stabili ca lista sa nu aibe nici un marcador si vom egala margin si padding cu 0 pentru a fi afisat la fel in toate browser-ele.
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
li {
background-image:url(image.png);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:15px;
}
Alinierea unei liste

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

Valuarea standard pentru o lista este outside. O valuare precum inside va impinge lista spre interiorul paginii.
CSS - Forma scurta a unei liste
list-style:none inside url("arrow.gif");

Va trebuii sa pastram ordinea mentionata mai sus.[/centru]