How to Put Your Image in List Item with CSS

Thursday, July 31, 2014

Lists are useful when you want to list your text in a number or bullet style. But you don’t always want to use the default, boring list style. What would look even better is if you use your own image or style instead. Follow the steps provided in this tutorial to put your own image in list item using CSS.


Steps to put your image in list item with CSS


1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:


<html>

<head>

<title>CSS tutorial – 6</title>

<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

</head>

<body>

<h3>Fruits:</h3>

<ul>

<li>Apples</li>

<li>Bananas</li>

<li>Oranges</li>

</ul>

</body>

</html>


And then save the file as .html (eg: tut6.html).

Here,

<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.


The <ul> tag creates an unordered list whereas <ol> tag creates ordered list.


step-1-create-html-image-list


2. Next, put the small image (usually less than 20px width and 20px height) in the same folder where your html file is.


step-2-save-image-list step-3-create-css-image-list step-4-type-css-image-list


3. Next, in the same directory (folder), create another folder named css and create a new css file named style.css. To do that, open notepad and save it as style.css


step-3-create-css-image-list


4. Next, type the following code in the css file we have created in step-2 i.e. style.css


ul{

margin-left: 15px;

list-style-image:url(‘../img1.gif’);

}


Here,


margin-left will add the margin to the left and list-style-image will add an image as a list item instead of a default oval list.


step-4-type-css-image-list


This completes our tutorial on how to put your image in list item with CSS. If you’ve found this CSS tutorial helpful, please leave a comment below!



The post How to Put Your Image in List Item with CSS appeared first on Web Design Blog | Magazine for Designers.







via http://ift.tt/1oSx8ad

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading