ナビゲーションリストの実験くん


li{
 list-style-type : none ;
 background-image : url(Images/link-b-active.png) ;
 background-repeat : no-repeat ;
 background-position : center left ;
 margin : 10px ;
 height : 84px ;
 font-size : 12px ;
 text-indent : 80px ;
 border : 1px solid gray ;
}

<ul class="hoge">
<li>ほーむ</li>
<li>戻る</li>
<li>進む</li>
</ul>

ナビゲーション用リストの頭に画像を背景で配置する。


ul.inline li{
 display : inline ;
 padding : 0 ;
 text-indent : 80px ;
}

背景にするなら、padding-left : 80px ; でもいいのだけれど、WinIE5はインラインにpaddingが効かないので、 text-indent : 80px ; とする。MacIE5互換モードとかは、それなりにレンダリングしてるけど、Mozillaは正しく解釈するので、これは駄目だ。

それなら、やっぱりフロートでしょ。


ul.float li{
 float : left ;
 padding : 0 ;
 width : 130px ;
 text-align : right ;
}

p{
 clear : both ;
}

beforeとしてみる


li.before{
 background-image : none ;
 text-align : left !important;
}

ul.float li.before:before{
 content : url("Images/link-b-active.png") ;
}

マーカーは?


li.item{
 background-image : none ;
 list-style-image : url("Images/link-b-active.png") ;
 list-style-position : inside ;
 marker-offset : 0 ;
 text-align : left !important;
}

ストレートにimgで配置


ul.inline li.noimage{
 display : inline ;
 text-indent : 0 !important;
 background-image : none ;
 height : auto !important;
 padding : 2px ;
}

ul.inline li.noimage img{
 width : 80px ;
 height : 80px ;
 vertical-align : middle ;
}

<ul class="inline">
<li class="noimage"><img src="Images/link-b-active.png" alt="▲">ほーむ</li>
<li class="noimage"><img src="Images/link-b-active.png" alt="▲">戻る</li>
<li class="noimage"><img src="Images/link-b-active.png" alt="▼">進む</li>
</ul>

MacIE5互換モードでは、問題はないけど、Mozillaでは正しく解釈されてしまうな。それはそれでいい感じだけど。imgがフォントサイズより小さければ問題ないか。……でも、これではCSSをエスケープしたとき（Netsape4.xでの見栄え）が、嫌だなあ。

この場合のimg要素は、意味の無いimg、つまり飾り付け的デザイン要素と考えられるし、なによりNetscape4.xは正しくテキストブラウザとして機能するようにしたいのだ。

頭に画像を入れたナビゲーションリストを横一列に配置する（ISO-HTML）

ナビゲーション用リストの頭に画像を背景で配置する。

それなら、やっぱりフロートでしょ。

beforeとしてみる

マーカーは?

ストレートにimgで配置