Tutorial CSS - Liste

CSS - Liste

In HTML avem doua tipuri deliste:

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

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

Un exemplu practic de a folosi atributul list este:

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

Pentru a folosi o imagine ca marcador vom folosi:

cssul { 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 calista sa nu aibe nici un marcador si vom egala margin si padding cu 0 pentru a fi afisat la fel in toate browser-ele.

cssul {
	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

cssul.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

csslist-style:none inside url("arrow.gif");

Va trebuii sa pastram ordinea mentionata mai sus.