2007/07/22 17:49
design15-その4
とりあえず
こんな感じで表面上は完成。
右下の商品リスト
<div class="goodsTop">
<div class="goodsBottom">
<div class="goods">
<div class="goodsLeftTop">
<img src="image/goods01.gif" alt="goods1 Photo" />
<dl>goods01<br />
<dt>$00.00</dt>
<dd>&raquo;<a href="#">details</a></dd>
</dl>
</div>
<div class="goodsRightTop">
<img src="image/goods02.gif" alt="goods2 Photo" />
<dl>goods02<br />
<dt>$00.00</dt>
<dd>&raquo;<a href="#">details</a></dd>
</dl>
</div>
<div class="clearImage"><img src="image/clear.gif" alt="" /></div>
<div class="goodsLeftBottom">
<img src="image/goods03.gif" alt="goods3 Photo" />
<dl>goods03<br />
<dt>$00.00</dt>
<dd>&raquo;<a href="#">details</a></dd>
</dl>
</div>
<div class="goodsRightBottom">
<img src="image/goods04.gif" alt="goods4 Photo" />
<dl>goods04<br />
<dt>$00.00</dt>
<dd>&raquo;<a href="#">details</a></dd>
</dl>
</div>
<div class="clearImage"><img src="image/clear.gif" alt="" /></div>
</div>
</div>
</div>
#rightCol .goodsTop{
width: 382px;
background:url(../image/goods_top.gif) top left no-repeat;
margin-top: 15px;
padding-top: 15px;
}
#rightCol .goodsBottom{
background:url(../image/goods_bottom.gif) bottom left no-repeat;
padding-bottom: 15px;
}
#rightCol .goods{
background:url(../image/goods_center.gif) repeat-y;
}
#rightCol .goods .goodsLeftTop, #rightCol .goods .goodsLeftBottom, #rightCol .goods .goodsRightTop, #rightCol .goods .goodsRightBottom{
float: left;
width: 180px;
margin-bottom: 5px;
padding-left: 10px;
}
#rightCol .goods .goodsLeftTop, #rightCol .goods .goodsRightTop{
background: url(../image/goods_line.gif) bottom repeat-x;
padding-bottom: 20px;
}
#rightCol .goods dl{
text-align: center;
margin-top: 5px;
padding-bottom: 30px;
}
#rightCol .goods dd, #rightCol .goods dt{
float: left;
width: 87px;
border-top: 1px solid #ccc;
margin-top: 10px;
}
HTMLの中にある
<div class="clearImage"><img src="image/clear.gif" alt="" /></div>
は、floatをクリアするためのもの。
一昨日は空DIVを使ってたけどそれじゃ1行空白が出来ちゃうから、代わりに1*1の透過GIFを置いて、それに対してclearさせてみた。
ベストはCSSだけで完結させることなんだろうけどねー。
それにしてもDIVだらけ。
これをDIV病というのだろうかw
商品リストはテーブル使った方がいろいろと良い気がするんだよなぁ~。