E Online Support - Free Software Download
How to make list using css??
I want to make attaractive list using css. is it possible?
Shruti
Answer
1

Using css we can make them stylish and effective, we can also use images as list item marker
HTML Code :
 
<div class="list-type1">
<ol>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
<li><a href="#">Formget Online Form Builder Create Online Forms</a></li>
</ol>
</div>

CSS Code:

 

.list-type1{
width:400px;
margin:0 auto;
}

.list-type1 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}
.list-type1 ol ol{
margin: 0 0 0 2em;
}

.list-type1 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #93C775;
color: #000;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: 10em;
transition: all .2s ease-in-out;
}

.list-type1 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}

.list-type1 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#93C775;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
color:#FFF;
}
Question*:
Description*:
Script:
Related To:
 PHP    HTML    CSS    JAVASCRIPT    JQUERY   
 AJAX    WINDOWS    GAMES    DRIVERS    MAC   
 LINUX    MOBILE    GADGETS   
Security Code:
6176
Enter Security Code:
 
Facebook   Linkedin   Skype   Twitter