CSSレイアウト（インテリアショップ）

css

CSSレイアウト課題（インテリアショップ）

今日はこれをやって時間切れになってしまいました。
informationの部分は、明日以降に修正する予定です。
他にも、まだまだ修正しなくてはいけなところが多いとは思っています。


http://webtraining.dousetsu.com/css01/

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>インテリアショップ a calm・・・北欧家具・北欧雑貨</title>
<link rel="stylesheet" type="text/css" href="design.css" media="screen, print" />
</head>
<body>
<div id="wrapper">
<div id="wrapper-inner">
<div id="rightbar">
<img src="images/side.jpg" alt="a calm interior shop" width="60" height="1700" />
</div>
<div id="contents">
<h1>インテリアショップ a calm・・・北欧家具・北欧雑貨</h1>
<div class="section">
<img src="images/info.gif" alt="インフォメーション" width="398" height="55" />
<h2>インテリアショップ カームでの商品入荷情報、イベント、HPの更新など。</h2>
<dl>
<dt>10.Dec.07</dt><dd>グスタフスベリ社　リンドベリシリーズ（復刻版）の商品が再入荷しました。</dd>
<dt>02.Dec.07</dt><dd>クロックス　キッズ マンモスが入荷しました。</dd>
<dt>02.Dec.07</dt><dd>北欧リペア家具 新商品入荷しました。</dd>
<dt>01.Dec.07</dt><dd>【net shop】ムーミンマグ・プレートをUPしました。</dd>
</dl>
<img src="images/071221g.jpg" alt="グスタフスベリ" width="400" height="121" />
</div>
<div class="section">
<img src="images/concept.gif" alt="コンセプト" width="398" height="55" />
<h2>カームのインテリアについての「想い」を感じてください。</h2>
</div>
<div class="section">
<img src="images/shop.gif" alt="ショップ" width="398" height="55" />
<h2>インテリアショップ カーム店内のイメージ写真と会社案内。</h2>
</div>
<div class="section">
<img src="images/brands.gif" alt="取り扱いブランド紹介" width="398" height="55" />
<h2>北欧から日本までカームのセレクトしているブランドの一部をご紹介しています。</h2>
</div>
<div class="section">
<img src="images/designers.gif" alt="デザイナー紹介" width="398" height="55" />
<h2>インテリアの歴史に名を残す「デザイナー」のご紹介。</h2>
</div>
<div class="section">
<img src="images/products.gif" alt="商品紹介" width="398" height="55" />
<h2>北欧家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</h2>
</div>
<div class="section">
<img src="images/shop.gif" alt="店舗へのアクセス" width="398" height="55" />
<h2>インテリアショップcalm までの交通機関のご案内です。</h2>
</div>
<div class="section">
<img src="images/blog.gif" alt="ブログ" width="398" height="55" />
<h2>カームスタッフの「ブログ」です。</h2>
</div>
<div class="section">
<img src="images/contact_us.gif" alt="お問い合わせ" width="398" height="55" />
<h2>インテリアや雑貨・家具、その他カームに関するお問い合せはこちらまで。</h2>
</div>
<p id="menu">
<a href="#">HOME</a>
<span>|</span>
<a href="#">INFO</a>
<span>|</span>
<a href="#">BRANDS</a>
<span>|</span>
<a href="#">DESIGNERS</a>
<span>|</span>
<a href="#">PRODUCTS</a>
<span>|</span>
<a href="#">ACCESS</a>
<span>|</span>
<a href="#">BLOG</a>
<span>|</span>
<a href="#">CONTACT</a>
</p>
<address>
Copyright(c)2007 インテリアショップxxxxxAll rights reserved.
</address>
</div>
<div id="leftbar">
<img src="images/side_image.gif" alt="a calm interior shop" width="134" height="1479" />
</div>
</div>
</div>
</body>
</html>

@charset "UTF-8";

html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"Hiragino Kaku Gothic Pro W3",
	"メイリオ",
	Meiryo,
	Osaka,
	"ＭＳ Ｐゴシック",
	"MS PGothic",
	sans-serif;
}
ul li, ol li {
	list-style-type: none;
}
a {
	text-decoration: none;
}
img {
	border: 0;
}
img, input {
	vertical-align: middle;
}
body {
	background: #fff;
}
#wrapper {
	width: 1000px;
	height: auto;
}
#rightbar {
	width: 60px;
	float:right;
	margin-right: 0;
	margin-top: 0;
}
#wrapper-inner {
	width:900px;
	height: auto;
	float:left
}

#contents {
	width: 700px;
	float:right;
	text-align:left;
	margin-top: 10px;
	padding-left: 10px
}

#leftbar {
	width: 80px;
	float:left;
	text-align:left;
	margin-left:0;
	margin-top:0;
}


#menu {
	font-size:0.9em;
	color:#2d444f;
	margin-left:0;
	margin-bottom:50px;
	margin-top:20px;
	width:100%;
}


.section {
	margin-left:0;
	margin-right:0;
	text-align:left;
	margin-top:1em;
	display:block;
}
h1 {
	font-size:1.1em;
	font-weight:500;
	color:#2d444f;
	text-align:left;
	margin-bottom:0;
	margin-top:0;
	margin-left:20px;
	margin-right:20px;
}
h2 {
	font-size:0.95em;
	font-weight:500;
	color:#2d444f;
	padding-top:20px;
	padding-bottom:20px;
	text-align:left;
	margin-bottom:0;
	margin-top:0;
	margin-left:0;
}
dt{
	font-size:0.95em;
	font-weight:500;
	color:#2d444f;
	padding-top:20px;
	padding-bottom:20px;
	text-align:left;
	margin-bottom:0;
	margin-top:0;
	margin-left:0;
}
dd {
	font-size:0.95em;
	font-weight:500;
	color: green;
	margin-top: 0;
	padding-right: 10px;
}

address {
	font-size:0.8em;
	font-style:normal;
	font-weight:400;
	color:#2d444f;
	text-align:right;
}