###前提・実現したいこと
css2のみを使って、画像を用いた、色が変化するタブを作りたいです。
IE6などの古いブラウザにも対応するものでお願いします。
###発生している問題・エラーメッセージ
タブの背景画像を適当な位置に表示することができません。 また、マウスオン時に色が変わるようにしたいのですが、IE6を含む全てのブラウザでしっかり変化するようにできません。
###該当のソースコード
<html> <head> <style> ul.tab { list-style: none; cursor:pointer; } ul.tab li{ display: inline-block; float: left; margin-right:0; background-image: url('http://www.code-pal.com/wp-content/uploads/2009/10/tab-sprite.jpg'); padding-left:10px; padding-right:10px; line-height:25px; } li a { text-decoration: none; color:black; } li a:hover{ background-image: url('http://www.code-pal.com/wp-content/uploads/2009/10/tab-sprite.jpg'); position:relative; left:20px; } .clear{ clear:left; } #sideber,#main{ float:left; } .contents{ background-color:green; width:200px; } .container{ width:500px; } </style> </head> <body> <ul class="tab"> <li><a href="#">タブ1:A</a></li> <li class="act"><a href="#">タブ2:BB</a></li> <li><a href="#">タブ3:CCC</a></li> <li><a href="#">タブ4:DDDD</a></li> </ul> <div class="clear"></div> <div class="container"> <div id="sideber"> <a href="#">メニューA</a> <br> <a href="#">メニューB</a> <br> <a href="#">メニューC</a> </div> <div id="main"> <div class="contents">コンテンツ1</div> <div class="contents">コンテンツ2</div> </div> </div> </body> </html> コード ``` ``` ###試したこと タブの背景に画像を指定しましたが、位置を上手く調整ることができませんでした。 hoverに関して調べたところ、連続した画像にリンクをつけて、その画像の位置をhoverで上下にずらす手法が1番良いように思えましたが、上手く再現することができません。 ###補足情報(言語/FW/ツール等のバージョンなど) CSS2のみで作りたいです。CSS3やJavascriptなどは使用しないやり方でお願いします。
回答1件
あなたの回答
tips
プレビュー