Tutorial 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 sus.
Comentarii
Astept cu nerabdare urmatoarele tutoriale css din categoria aprofundare. Sper sa fie cat mai curand.
Multumesc pentru efortul depus pentru a initia pe alti in ale programarii css.
Foarte bune tutorialele pentru HTML si CSS.
Va multumesc !
Trimite un comentariu!
