CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12517

Image on left of list elements

I want to have a list with a different image on the left of each list element. This is the code I have so far: http://jsfiddle.net/spadez/t7jCd/8/

        <li>
            <span class="navimg"><span>
            <span class="navtxt"><a href="url">User</a></span>
        </li>

My question is, is using two span classes the correct way to achieve this, as I have started to go down this route. If it is, do I put an image inside the span tag or apply it to the span id.

Edit

This is what I am going for:

enter image description here

Upvotes: 0

Views: 370

Answers (3)

Vangel Tzo
Vangel Tzo

Reputation: 9313

I would always suggest the css solution to these kind of problems.

<ul>
    <li>
      <a href="url">User</a>
   </li>
   ...


ul li {
    position: relative;
    list-style: none;
    padding-left: 20px;
}

ul li:first-child:before {
    background: url(...) no-repeat;
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    left: 0;
}

ul li:nth-child(2):before {
    background: url(...) no-repeat;
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    left: 0;
}



...

An example:

http://jsfiddle.net/t7jCd/11/

Upvotes: 1

David Randall
David Randall

Reputation: 770

You have two HTML elements there in the form of <li> and <a>. Why not set a background image on each, therefore removing extraneous code?

li {
  background: url(image.png) 0 0 no-repeat;
}

li a {
  background: url(image2.png) 0 0 no-repeat;
  display: inline-block;
  margin-left: Xpx;   /*To allow for the image width on the <li>*/
  padding-left: Ypx;  /*To allow for the image width on the <a>*/
}

Upvotes: 1

Cjmarkham
Cjmarkham

Reputation: 9700

You could just use an image tag since images and spans are both inline elements.

<li>
    <imgclass="navimg" src="" alt="" />
    <span class="navtxt"><a href="url">User</a></span>
</li>

Upvotes: 0

Related Questions