Custom Search

News World

May 31, 2011

How To Replace Bullets with Images

Here's some sample CSS code to explain further with important code lines highlighted:

#content-container{
width: 100%;
color: #000;
background: #eee;
padding-left: 10px;
list-style: none;
}

#content-container ul {
list-style-type: none;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-left: 0px;
}

#content-container li {
background-image: url(uploads/images/2/ul_li.gif);
background-repeat: no-repeat;
background-position: 0 0.1em;
padding-left: 20px;
}

#list-check li {
background-image: url(uploads/images/2/ul_li_check.gif);
background-repeat: no-repeat;
background-position: 0 0.1em;
margin: 8px 18px;
padding-left: 20px;
}

#content-container2{ margin: 0 auto; width: 900px;}

#content-container3{ float: left; width: 900px; background: #FFF;}

#content{
clear: left;
float: left;
width: 560px;
padding: 20px 0;
margin: 0 0 0 30px;
display: inline;
font:normal 13px Arial, Helvetica, sans-serif;
}

No comments:

IT Conversations

Moneycontrol Latest News

Latest new pages on Computer Hope

Latest from Infoworld

Door Lock

Door Lock Import Top Door Lock from China Contact Quality Manufacturers Now