Question

Hello everyBody
I’ve created a slideShow (with left and right arrows) , displaying images in three set, images are aligned horizontally, and every image is contained in a li element with a link (headline) as follows:

 <li><image src="image_n.jpg"></image><a href="www.google.com">Google search engine</a></li>

ok my question is , how can I put the headerline (“a” tag) so it covers the bottom of the image using css.

thank you

Answer 1

I’d use a combination of display: block and either a negative top margin or position: relative and a negative top.

li a /* or a unique identifier if it's just this instance */
{
    display: block;
    margin-top: -1.1 em;
}

or

li a
{
    display: block;
    position: relative;
    top: -1.1em;
}

I’m using em as a unit because 1em is equal to the font size. This means that margin-top: -1.1em will be (approximately) a little bit more than the height of one line of text.