Li image below li

HTML & CSS
1

So, I was able to get an image to be to the left of a li a,

http://devb.bambl.clients.blinkss.com/schedules/

but I can’t get an image to float be below a link.

http://devb.bambl.clients.blinkss.com/

I’m looking at the Classes section on the right hand side of the page. I want that image to sit below the Body pump link text.

.BodyPump a {
display:inline-block;
padding-bottom:50px;
color:#0C6;
height:100px;
width:100px;
background:url(IMAGES/BodyPump.jpg) 0 0px no-repeat;

}

<div id=“ClassesList”>
<ul id=“ClassesList”>

<li class=“BodyPump”><a href=“http://devb.bambl.clients.blinkss.com/body-pump/” target=“_blank”>Body Pump</a></li>
<li ><a class=“BodyPump” href=“#”>Body Pump</a></li>
<li class=“BodyPump”><a href=“#”>Body Pump</a></li>
<li class=“BodyPump”><a href=“#”>Body Pump</a></li>

</ul>
</div>

2

I think you may be wording things wrong.

  1. You didn’t get an image on the left of your LI. You used a BG image. It’s two radically different things.
  2. You cant “float down” even that phrase is an oxymoron.
  3. See #1, since the image you have on the left is NOT an img, but a BG , you can’t apply CSS to the image.

So I am assuming that what you want is the same thing you did before, but with the image bellow and the text above. You were close., you were aligning the image to the TOP (0px) of your element instead of the bottom (100%).


.BodyPump a {
display:inline-block;
padding-bottom:50px;
color:#0C6;
min-height:100px; /** it's a bad idea to restrain the height, **/
width:100px;
background:url(IMAGES/BodyPump.jpg) [B]0 100%[/B] no-repeat;
}

hope that helps.

3

Thx! Yes that worked well.