Tutoriale CSS - Liste

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 su

foarte bun acest tutorial.....ms mult ca l-ai postat chiar ma intereseaza!