CODEWITHSUNDEEP
htmlcss
StuBlackett
StuBlackett

Reputation: 3857

List Items Background anchor link

I am working on this : Menu List

What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.

So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.

Has anyone any ideas on the best way to approach this?

Thanks in advance.

Upvotes: 0

Views: 115

Answers (2)

Gerico
Gerico

Reputation: 5169

I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.

http://jsfiddle.net/FN6f5/3/

Upvotes: 0

sandeep
sandeep

Reputation: 92803

Give image inside anchor. Write like this:

.menu-header ul li a{
    display:block;
    padding: 70px 55px;
    text-indent:-9999px;
}

#access .menu-header ul li#menu-item-26 a{
    background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;    
}

#access .menu-header ul li#menu-item-24 a{
    background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}

#access .menu-header ul li#menu-item-23 a{
    background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}

Check this http://jsfiddle.net/FN6f5/2/

Upvotes: 1

Related Questions