Tutorial CSS - Liste

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Liste

Mesaj de DarkArms » Vin Apr 22, 2016 9:42 am

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:

Cod: Selectaţi tot

ul { list-style-type:disc; }
ol { list-style-type:upper-roman; }
Pentru a folosi o imagine ca marcador vom folosi:

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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

Cod: Selectaţi tot

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

Cod: Selectaţi tot

list-style:none inside url("arrow.gif");
Va trebuii sa pastram ordinea mentionata mai sus.

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator