[メモ] とても単純なボックスを表示する XHTML + CSS
- 2008-09-25
- カテゴリ: Client Side
- タグ: XHTML CSS
完全に自分用のメモ。
IE6 のバグと CSS の仕様に翻弄されて疲れたので忘れないうちにメモ。
HTML
<div class="mod">
<h3 class="mod-title">Module Title</h3>
<div class="mod-body">
<p>Module Body</p>
</div>
</div>
<div class="mod">
<h3 class="mod-title">Module Title</h3>
<div class="mod-body">
<p>Module Body</p>
</div>
<ul class="mod-body">
<li><code>ul</code> element as a body</li>
<li><code>ul</code> element as a body</li>
<li><code>ul</code> element as a body</li>
</ul>
</div>
CSS
.mod {
margin: 16px;
}
.mod-title {
margin: 0;
padding: 2px;
border: 1px solid;
}
.mod-body {
margin: 0;
padding: 2px;
border: 1px solid;
border-top-style: none;
}
ul.mod-body {
padding-left: 2em;
}
表示
Module Title
Module Body
Module Title
Module Body
ulelement as a bodyulelement as a bodyulelement as a body
追記
別のパターン。
/* Base */
.mod { margin: 16px; padding: 0; }
.modTitle, .modBody { margin: 0; padding: 2px; }
/* Decoration */
.modTitle { border: 1px solid; }
.modBody { border: 1px solid; border-top-style: none; }
<div class="mod">
<h3 class="modTitle">Module Title</h3>
<div class="modBody">
<p>Module Body</p>
<p>Module Body</p>
</div>
</div>
<dl class="mod">
<dt class="modTitle">Module Title</dt>
<dd class="modBody">
<p>Module Body</p>
<p>Module Body</p>
</dd>
</dl>
トラックバックURL
- http://liosk.blog103.fc2.com/tb.php/150-c32f4514