CSS Lists
List In CSS :
In HTML, you can find two types of lists:
- unordered lists – the list objects are noted with bullets
- ordered lists – the list objects are noted with numbers or words
With CSS, lists could be styled further, and images can be used while the list object marker.
An Image as The List Item Marker :
To specify an image as the list item marker, use the list-style-image property.
Example:
ul
{
list-style-image: url(‘sqpurple.gif’);
}
{
list-style-image: url(‘sqpurple.gif’);
}
The example above doesn’t present equally in all browsers. IE and Opera can present the image-marker a little bit greater than Firefox, Chrome, and Safari.
Crossbrowser Solution :
Example:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
- For ul:
- Set the list-style-type to nothing to eliminate the list object sign.
- Set both padding and profit to 0px .
- For several li in ul:
- Set the URL of the picture, and display it just once.
- Place the picture wherever you are interested.
- Place the writing in the list with padding-left.
List – Shorthand property :
It is also probable to specify all of the list properties in a single, simple property. This really is named a shorthand property.
The shorthand property useful for provides, could be the list-style property:
The shorthand property useful for provides, could be the list-style property:
Example:
ul
{
list-style: square url(“sqpurple.gif”);
}
{
list-style: square url(“sqpurple.gif”);
}
