CODEWITHSUNDEEP
htmlcssbackgroundhtml-lists
themajiks
themajiks

Reputation: 420

Background image to be moved below li tag

News item

In the image above, I am displaying news items in a bubble format. These are all in a list, like so:

<ul>
    <li>
        <h2>South West Training Association</h2>
        <p>South West Training Association to get online makeover ....</p>
        <a href="#"><img src="images/readmore.jpg" alt="Read More" width="72" height="22" border="0" /></a>
    </li>
</ul>

ul{ list-style-type:none;}
ul h2{color:#01558a; text-decoration:none; font-size:90%; font-weight:bold; font-style:normal;}
ul p{font-size:.7em; font-style:italic; line-height:1.1em; padding:4px 0; margin:0;}
ul li{background:#f8f5d4 url(../images/news-li-bottom.jpg) no-repeat left bottom; border:#ebe6b3 2px solid; padding:8px; -moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;behavior: url(border-radius.htc); margin:0 0 20px 0; display:block;}

The CSS generates a round cornered box for the news item. I want to place the arrow below as I have mentioned in the list item background. Now I want to move it 20px below the bottom. How can I do that?

Upvotes: 0

Views: 688

Answers (1)

lipelip
lipelip

Reputation: 171

You could do something like this:

ul li:after {
    content: url(lien vers ton image);
    position: absolute;
}

and then use bottom: and left: pour positionner ton image au bonne endroit.

Bit it won't work in all browser. To be sure you should add a span in your li, put the background on it an position it.

Upvotes: 1

Related Questions