[メモ] とても単純なボックスを表示する XHTML + CSS

スポンサーサイト

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

[メモ] とても単純なボックスを表示する 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

  • ul element as a body
  • ul element as a body
  • ul element 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

トラックバック

コメント

コメントの投稿

お名前
コメント
編集キー
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。