2012-02-29 18 views
0

私はこれに取り組んでいます:Menu Listリスト項目の背景アンカーリンク

私は何をしようとしていますが、私のアプローチは正しい方法であれば、自分で確認しています。このサイトはWordpressで動作しています。

私は「Our Services、About Us」などのテキストを取り除きたいと思っています。しかし、グラフィックをクリック可能なアンカーリンクにしたいと思います。

このアプローチに最も効果的なアイデアはありますか?

ありがとうございます。

答えて

1

anchorの画像を与えます。私は、アクティブリンクテキストを除去するためにこれを行うだろう

.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; 
} 

チェックこのhttp://jsfiddle.net/FN6f5/2/

+0

優れています。あなたのコードで、私が考えなかったことはほとんど、特にIE7のものはほとんどありません。どのようにしてアンカーテキストを取り除くことができるかについての考えはありますか? – StuBlackett

+0

アンカーテキストを削除するには、次のように定義します。text-indent:-9999px;あなたのアンカーCSSの – sandeep

+0

ありがとうございました。ありがとう@sandeep – StuBlackett

0

:次のように書きます。しかし、私はあなたがそれらを良い方法で水平に整列させることができるように、それぞれのボタンの画像を同じ高さにすることをお勧めします。幅は変更できますが、それに応じてCSSを調整するだけです。

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

関連する問題