CODEWITHSUNDEEP
htmlhtml-lists
Lukas Halim
Lukas Halim

Reputation: 1525

Ordered list with images to the right of each list item

I would like to create an ordered list with a few icons to the left of each list item. I would like the layout to look like this

<image1><image2> 1. Lorem Ipsum
<image2><image2> 2. Lorem Ipsum
<image3><image2> 3. Lorem Ipsum

I can easily place the images to the right of the list item text, but I cannot seem to get it to be aligned to the left of each number in the ordered list.

Upvotes: 1

Views: 4537

Answers (3)

PoseLab
PoseLab

Reputation: 1899

A solution with :before pseudo-elements in css:

    li {
    position: relative;
}
li:before {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    left: -40px;
    background: url(http://www.hadley.edu/images/RightTriangleIcon.png);
    background-size: contain;
}

http://jsfiddle.net/poselab/Qcejy/

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Here is the Updated Solution.

The HTML:

<ol class="img">
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
</ol>

The CSS:

ol.img li{background: url("http://www.siguccs.org/Conference/Fall2007/images/icon_bullet.gif") no-repeat scroll 1px 5px transparent;
    list-style-position: inside;
    padding-left: 16px;}

Upvotes: 1

Nathan
Nathan

Reputation: 25006

the solutions is simple and it should be something like this:

<ol>
<table>
<tr>
<td><image1 /></td>
<td><li>Lorem Ipsum</li></td>
</tr>
<tr>
<td><image2 /></td>
<td><li>Lorem Ipsum</li></td>
</tr>
<tr>
<td><image1 /></td>
<td><li>Lorem Ipsum</li></td>
</tr>
</table>
</ol>

i didnt tested yet, i just wrote the code directly here so give it a try...

The solution is basically to put each image and a text in a row in a table....

Upvotes: 0

Related Questions