Thursday, July 30, 2009

LI in CSS

CSS CODE


.iconlist{list-style: none;margin: 0;padding: 0;}





li.pdf{background-image: url(bullet_pdf.gif);

background-repeat: no-repeat;

background-position: 0 50%;

padding: 3px 0 3px 20px;

margin: .4em 0;}




li.doc{background-image: url(bullet_doc.gif);

background-repeat: no-repeat;

background-position: 0 50%;

padding: 3px 0 3px 20px;

margin: .4em 0;}





li.text{background-image: url(bullet_text.gif);

background-repeat: no-repeat;

background-position: 0 50%;

padding: 3px 0 3px 20px;

margin: .4em 0;}





li.htm{
background-image: url(bullet_htm.gif);
background-repeat: no-repeat;

background-position: 0 50%;

padding: 3px 0 3px 20px;

margin: .4em 0;}





Code in HTML:











Source file From: http://css.maxdesign.com.au/listutorial/10.htm
Change Background images for bullets~
CSS code:
li{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
margin: 1em 0;
}
*Margin can be set on the top, bottom or top and bottom of each list item. This version has a margin of ".1em" on top and bottom of the list items.


No comments:

Post a Comment