Latest Entries

ちょっとマシな画像置換

position:absoluteではなく、負のmarign-topを使うこともできます。

該当箇所のHTML
<div class="secondary-column">
<h2>Appendix</h2>

 <div class="section" id="categories-archives">
  <h3>Categories Archives</h3>
  <ul>
  <li><a href="#">カテゴリ1</a></li>
  <li><a href="#">カテゴリ2</a></li>
  <li><a href="#">カテゴリ3</a></li>
  <li><a href="#">カテゴリ4</a></li>
  </ul>
 </div>

（略）

</div>
追加したCSS

div.secondary-column h3 {
 padding:0;
 margin:0;
 position:relative; /* z-indexのため */
 z-index:1;
 height:21px;
 font-size:14px;
}

div.secondary-column ul {
 position:relative; /* z-indexのため */
 z-index:2; /* h3より上にする */
 padding-top:38px; /* 画像を表示させる部分 */
 margin-top:-26px!important; /*（h3に重ねる）*/
 background-position:top left;
 background-repeat:no-repeat;
 width:100%; /* width指定がないとIEでなぜか崩れる */
}

div#categories-archives ul {
 background-image:url(cfdn_09categories.png);
}

div#monthly-archives ul {
 background-image:url(cfdn_09monthly.png);
}

div#links ul {
 background-image:url(cfdn_09links.png);
}
解説

ポイントは強調箇所。h3要素にheightを、直後のul要素にh3の高さ分の負のmargin-topを指定することにより、ul要素をh3要素に重ねます。 さらにul要素に画像の高さ分ほどのpadding-topをとって、そこに背景画像を表示させます。z-indexでul要素をh3要素の上にもってきて完成。

もとのテンプレ「cfdn_09」にはh3に5pxのborder-topがあるので、h3のheightは21px, border-topが5pxで、ulのmargin-topは-26pxです。 ただしIE6の互換モード（Quirksモード）ではh3の高さは16pxになってしまいます。

font-sizeをpxで固定することでIEの文字サイズを変更したときにも崩れないようにしています。 画像の高さは32pxで、padding-topは38pxとっているので、ボックスモデル解釈の違い、および他のブラウザにおける文字サイズ変更にもある程度対応できます。

Appendix