HOME 　»　 , , , 　»　エセテーブルを組む

エセテーブルを組む

2004/12/03　|　Comments & Trackbacks : 0

組み立て式テーブルの話ではないです。

この前からトップ下にメニューバーを入れたのですが、メニューの一部のページがFirefoxで表示が崩れている事に気がつきました。
サイドバーが表示されなかったり、サイドにモジュールを入れると、入れた要素が本文部に表示されるようになったりしてかなりのメタメタ状態。
どうして特定のページだけ表示がおかしいんだろう？と推理した結果、文中にテーブルが入っていると表示が崩れる事が判明。
未だに崩れた理由は謎ですが、そのまま放置しておくのもいやなので、代替策として定義リスト（＜dl＞・＜dt＞・＜dd＞）を使って疑似テーブルを組んでみました。

参考にしたページ

Public CSS：III.　CSSを使ってtableのような枠線をつける

ニセテーブル

一番下の要素を四角で囲って、その上に乗っかっている要素には「コ」の字でふたをしていくと左の写真のようになります。
まるでテーブル組みをしたように見えてビューティフォー。
ソースはこんな感じです。

/* エセテーブル用設定*/
.list{
width: 390px;
margin: 0;
padding: 0;
border-width: 2px 2px 0;
border-style: solid;
border-color: #ddd;
color:#141619;
}

.list_dt{
padding: 5px 0 5px 5px;
width: 115px;
float:left;
}

.list_dd{
margin-left: 125px;
padding: 5px;
border-left: 2px solid #ddd;
background-color: #FFFEF9;
}

.list_b{
width: 390px;
margin: 0px;
padding: 0px;
border: 2px solid #ddd;
color:#141619;
}

“.list”が「コ」の字の部分、”dt”が左の要素、”dd”が右の要素、”list_b”が一番下の「ロ」の字の部分です。
以下、作業中に気付いた事を箇条書きにしておきます。

    

  • "dt"の幅を"dd"のmarginより狭めに設定すると、文字が枠ギリギリまで行く前にちゃんと折り返されます。
（最初はmargin・paddingを使う方法を試したのですがうまくいきませんでした）
    • 

  • 枠線の種類は「soid」以外はイマイチ綺麗に表示されないようです。
    • 

  • IEだと右側の文章の頭の位置が微妙にずれます。width解釈のバグのせいかも。
    •

この方法だと一応レイアウト崩れが起こりません。
テーブル嫌いな方はお試しを…。

Related Posts

Google Adsense

Comments & Trackbacks : 0