Question

I am trying to add small arrow type image above the link which is active. I tried a few basic things, but I am not getting the image at all. Probably I am doing something wrong, or it’s not possible…?

This is what I am trying to make it look like:

Current html:

<li><li class="currentlink"><a href="nieuws.php" target="_parent">nieuws</a></li>
<li><a href="behandelingen.php" target="_parent">behandelingen</a></li>
<li><a href="producten.php" target="_parent">producten</a></li>

Current CSS:

.currentlink{background-image:url(images/naviarrow.png) no-repeat;width:25px;height:14px;}

What am I doing wrong here…? Can someone explain or at least point me in the right direction?

Answer 1

Instead of trying to place the image with ‘width’ and ‘height’. You can declare the styles ‘top’ and ‘center’ which will place your image exactly there.

For example:

.currentlink { background: #000 url(images/naviarrow.png) no-repeat top center }

jsFiddle Example