横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
positionを使い好きな場所に要素を配置する(DL要素)
金額(priceプロパティ)は
position: absolute;の絶対位置で
表示位置(bottom: 0;left: 150px;)を指定する。
cssの書き方 |
/*-------------------------------------------------- 02-07-1. 写真の横にテキストを好きな位置に配置する --------------------------------------------------- */ .box_251 dl{ position: relative; width: 215px; height: 66px; } .box_251 dt{ position: absolute; top: 0; left: 120px; font-size: small; } .box_251 dd.photo img{ display: block; position: relative; margin: -20px 0 0 -20px; } .box_251 dd.price{ position: absolute; bottom: 0; left: 150px; font-size: small; } |
---|---|
HTMLの使用例 |
<li> <dl> <dt class="photo"><img src="sweets01.jpg" alt=""/></dt> <dd class="title">パウンドケーキ</dd> <dd class="price">380円</dd> </dl> </li> <li> <dl> <dt class="photo"><img src="sweets02.jpg" alt=""/></dt> <dd class="title">シフォンケーキ</dd> <dd class="price">580円</dd> </dl> </li> |
positionを使い好きな場所に要素を配置する(DL要素)
画像を立体的に見せる為に、セルのデータ部の(dt.photo)の以下のプロパティを設定する。
position: absolute;
top: 5px;
left: 5px;
border-right:
border-bottom:
cssの書き方 |
/*------------------------------------------------------- 02-07-2 写真の横にテキストを好きな位置に配置する -------------------------------------------------------- */ .box_252{ width: 690px; } .box_252 li{ float: left; border: 1px solid #000000; /* 画像単位に枠を指定する */ width: 219px; height: 90px; list-style-type: none; } .box_252 dl{ position: relative; /* 相対位置で指定(トップ) */ width: 300px; height: 66px; } .box_252 dt.photo{ position: absolute; /* 絶対位置で指定 */ top: 5px; /*写真を下にずらす */ left: 5px; /* 写真を左にづらす */ border-right: 4px solid #808080 ; /* 右黒枠で写真を立体的に見せる */ border-bottom: 4px solid #808080 ; /*下枠で写真を立体的に見せる */ } *html .box_252 dt.photo{ /*for IE6 hack*/ behavior: url(../js/iepngfix.htc); } .box_252 dd.title{ position: absolute; /* 絶対位置で指定 */ top: 10px; left: 110px; color:red; font-size: small; } .box_252 dd.price{ position: absolute; /* 絶対位置で指定 */ bottom: 10px; left: 150px; font-size: small; } |
---|---|
HTMLの使用例 |
<ul class="box_252"> <li> <dl> <dt class="photo"><img src="../images/cafe_sweets01.jpg" alt=""/></dt> <dd class="title">パウンドケーキ</dd> <dd class="price">380円</dd> </dl> </li> <li> <dl> <dt class="photo"><img src="../images/cafe_sweets02.jpg" alt=""/></dt> <dd class="title">シフォンケーキ</dd> <dd class="price">580円</dd> </dl> </li> <li> <dl> <dt class="photo"><img src="../images/cafe_sweets03.jpg" alt=""/></dt> <dd class="title">ブリュレ</dd> <dd class="price">580円</dd> </dl> </li> --- 省略 --- </ul> |