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
商品リストはテーブル使った方がいろいろと良い気がするんだよなぁ~。

コメント欄
 






ひよこ 笑い 不満 ビックリ ウーン グラサン よだれ ラブ キス 怒り 涙 汗 ハテナ 眠り 黙秘 天使 あっかんべー るんるん じーっ 口笛 オトナになっちゃいました
Powered by MT Smileys
トラックバック欄
»現在このエントリーへのトラックバックは承認制となっています«
http://hobbyblog.biz/mt/mt-tb.cgi/202

デザインリスト

このリストで掲載しているテンプレートは
配布用ではありません。詳しくはこちら

オリジナル 参考
  • 1  2  3  4  5  6 
その他

ブログインフォメーション

カテゴリリスト

月別アーカイブ

エントリーリスト

人気blogランキング