スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リストの背景画像とリンクの設定について

CSS HappyLifeさんで紹介されていた、「a要素が2行になった場合に背景下にテキストが来ないように。」を試してみました。

inlineblock

リストに背景画像でアイコンを付けた場合に、テキストリンクではなくアイコンをクリックしてしまう場合があるようです。なので、アイコンにもリンクを設定できるようにしておこうという試みです。

その為には、背景画像をaタグに設定し、displayプロパティを inline-block にする必要があります。
ul.ib_list li a {
	display: inline-block;
	padding: 0 0 0 15px;
	background: url(img/bg_list.gif) no-repeat;
}
display: block;でもできるんじゃないかと思って試してみたら、FirefoxやIE7では行けましたが、IE6はクリックできませんでした。やはりdisplay: inline-block;にする必要があるようですね。

ちなみに、inline-blockとは、「内容はブロックレベルとして扱い、それ自体はインラインレベルとして配置される」という意味のようです。使ったことがなかったので、参考になりました。

これからは、aタグに背景画像を設定してクリックしやすいリストを作るように心掛けます。

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。