July 2009 Archive

番号付きの箇条書きは通常olタグを使ってマークアップしますが、入れ子になった場合とかにカッコ数字の番号や丸数字を利用したくなったことは無いでしょうか？僕の場合は往々にしてあります。

なので今回はol liでマークアップした場合カッコ数字や丸数字を表示させます。

ol liのデフォルトスタイルであるdecimalを非表示にしてカッコ数字や丸数字をli内に記述します。そしてspanタグでくくり、CSSで整形して表示すると言う方法です。

olタグでカッコ数字や丸数字を使うデモページ

Read more

以前エントリーした記事、画像置換 height: 0; バージョンで少々不具合があったので修正版をエントリーしておきます。

何が不具合だったかと言うと、a要素にheight: 0、overflow: hiddenを指定していても一部のブラウザでテキストが見えてしまう時がありました。この問題はa要素に指定していたoverflowプロパティを親要素であるliに指定し、置き換える画像の高さを指定することにより回避出来ます。

XHTML

<ul id="globalNav>
<li id="nav1"><a href="#">Nav1</a></li>
<li id="nav2"><a href="#">Nav2</a></li>
<li id="nav3"><a href="#">Nav3</a></li>
<li id="nav4"><a href="#">Nav4</a></li>
</ul>

CSS

ul#globalNav li {
	display: inline;
	float: left;
	height: 35px; /* 置き換える画像の高さ */
	overflow: hidden;
}
li#nav1 a {
	display: block;
	width: 50px; /* 置き換える画像の幅 */
	height: 0;
	padding-top: 35px; /* 置き換える画像の高さ */
	background: url(../img/bg_xxx.gif) no-repeat 0 0; /* 置き換える画像 */
	
}