2009-07-04

dl dt ddを使った3列横並びリスト

web勉強

テーブルで作っていた3列のリストをdlを使って作りかえたいなと思って作ってみました。

おおまかなhtmlとcssは覚書に。
覚書

基本はA列がdt
B列C列がdd。
dt,ddに高さを指定。

B-1のマージンをdtの幅分左に、高さ分をマイナスで指定する。
B-2は左のみ指定。

C-1のマージンをA＋B列分左に、高さをB列のDD全ての高さを足した分マイナスで指定。
C-2は左のみ指定。

問題はC-1で指定する高さ分のマイナスマージン。
B列に項目がいくつあるかによって変わってしまうので、B列のDDが1つの時、2つの時と初めにクラス分けして設定する。

マイナス指定するマージンは前列の基本全ての高さを合わせたものになります。
ボーダー、マージン、パディングetc

＜結論＞
複雑になってくるとC-1のクラス分けなどめんどくさいかもしれません。
javascriptで何番目と判断させて自動的にクラス分けとか出来るのかもしれないけれど..。
テーブルで作ってもいいのですが、rowspanや、やたら多くなるタグで見にくくなるので、これも有りかと思います。

2009-06-28

DL、DT、DDを使った商品説明のリストについて

web勉強

以下のような形のリストをDL、DT、DDを使って作ろうと思ったのですが。

文書構造からいうとこういう形で作りたいのですが、これだと上手く横並びになってくれません。

ひとつひとつをDLで包んでfloatさせると落ち着きます。
他のCSSサイトもこの方法での説明でした。

あと実サイトだとリストではなくこういう形にしたり、自動生成ならやっぱりテーブルのようです。

なんとなくDLでひとつひとつ包むのはひっかかるのですが、テーブルで作るより入れ替え等使い勝手はいいので、こちらを使っています。

2009-06-26

リストサンプル　覚書

会社の帰りがけにちょこっと作った覚書です。
この覚書の説明はこちら

リセット

＜dl id="sample">

＜dt>たも＜/dt>

＜dd class="area1">日本＜/dd>
＜dd class="area2">海外＜/dd>

＜dd class="movie1">やっぱり猫が好き＜/dd>
＜dd class="movie2">かもめ食堂＜/dd>

＜dt>たも＜/dt>

＜dd class="area1">日本＜/dd>
＜dd class="area2">海外＜/dd>

＜dd class="movie1">やっぱり猫が好き＜/dd>
＜dd class="movie2">かもめ食堂＜/dd>
＜/dl>

−*-CSS-*-−
#sample {
font-size: medium;
}
dt,.area1,.area2,.movie1,.movie2 {
height: 30px;
}

dt {
width: 150px;
background-color: #999999;
margin-top: 20px;
}
.area1 {
width: 150px;
background-color: #FFFFCC;
margin-top: -30px;
margin-left: 160px;
}
.area2 {
width: 150px;
margin-left: 160px;
margin-top: 10px;
background-color: #FFCCFF;
}
.movie1 {
width: 150px;
margin-top: -70px;
margin-left: 320px;
background-color: #CCFFFF;
}
.movie2 {
width: 160px;
margin-left: 320px;
margin-top: 10px;
background-color: #CCCCFF;
}