NoneStyle - なんぎ星

先生、NoneStyleのソースコードをアップしていただき、ありがとうございます。
自分が作成したものと比べてみると、笑えるほど違っていました･･･。
修正をしながら、もう一度作成してみたいと思います。

修正前のHTMLとCSSです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="ja" lang="ja" />

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utr-8" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>NoneStyle</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen,print" />

</head>

<body>

<div id="contentsWrap">

<div id="pageBody">



<h1 id="logo"><img src="images/logo.jpg" width="140" height="40" alt="NoneStyle" /></h1>

<h2><img src="images/h1_bg.jpg" width="772" height="176" alt="NoneStyle" /></h2>

<div id="contents">

<div id="aboutUs">

<h3><img src="images/heading_about.gif" width="474" height="25" alt="わたしたちについて" /></h3>

<p>講座を修了しても、解説本などで独習する以外に勉強するてだてがない。そんな修了生のために、少人数制の勉強会を開設いたしました。</p>

<p>テーマは脱初級。技術だけでなくものの見方・考え方をみんなでスキルアップすることが目標です。</p>

<p>また、それぞれの視点でテーマを持ち寄り解決することにより、実践的な勉強ができます。</p>

</div>

<div id="activityContent">

<h3><img src="images/heading_activity.gif" width="474" height="25" alt="活動内容" /></h3>

<p>講座を修了しても、解説本などで独習する以外に勉強するてだてがない。そんな修了生のために、少人数制の勉強会を開設いたしました。</p>

<p>テーマは脱初級。技術だけでなくものの見方・考え方をみんなでスキルアップすることが目標です。</p>

<p>また、それぞれの視点でテーマを持ち寄り解決することにより、実践的な勉強ができます。</p>

</div>

</div>





<div id="side">

<h2><img src="images/heading_news.gif" width="222" height="25" alt="ニュースリリース" /></h2>

<dl>

<dd>2009/4/1</dd>

<dt>positionとfloatとの違い</dt>

<dd>2009/5/1</dd>

<dt>２カラムの実践</dt>

<dd>2009/5/1</dd>

<dt>BiNDを導入する</dt>

<dd>2009/7/1</dd>

<dt>scriptの苦手意識をなくす</dt>

</dl>

</div>



</div>



<p id="footer"><img src="images/copyright.gif" width="225" height="11" alt="Copyright 2009 NoneStyle All Rights Reserved." /></p>

</div>

</body>

</html>

@charset "utf-8";

/* セレクタのリセット　ここから */

* {
	margin: 0;
	padding: 0;
}

/* セレクタのリセット　ここまで */

/* 基本設定　ここから */

body {
	color: #333333;
	font-family: "メイリオ","meiryo",
"ヒラギノ角ゴ Pro W3","Hiragino kaku gothic Pro",
"MS Pゴシック","MS P Gothic",sans-serif;
	background-color: #eeeeee;
}

h1{
	position: absolute;
	margin-top: 87px;
	margin-left: 158px;
}

h2 {
	padding-left: 7px;
	padding-top: 7px;
}


/* 基本設定　ここまで */

/* レイアウト設定　ここから */

#pageBody {
	width: 786px;
	height: 600px;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #ffffff;
	background-image: url(images/copyright_bg.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	position: relative;
}

#contents {
	width: 474px;
	margin-top: 25px;
	margin-left: 30px;
	float: left;
}

#side {
	width: 222px;
	margin-top: 20px;
	margin-right: 30px;
	float: right;
}

#side dl {
	font-size: 0.75em;
	line-height: 1.5em;
	text-align: left;
	margin-left: 8px;
	margin-bottom: 0.5em;
}

#side dl dd {
	margin-top: 1em;
}

#side dl dd dt {
	margin-bottom:1em;
	border-bottom-width: 1px;
	border-bottom-color: #eeeeee;
	border-bottom-style: solid;
}

#aboutUs p {
	font-size: 0.75em;
	line-height: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#activityContent {
	margin-top: 25px;
}

#activityContent p {
	font-size: 0.75em;
	line-height: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em
}

#footer {
	text-align: center;
	padding-top: 0px;
	padding-right: auto;
	padding-bottom: 30px;
	padding-left: auto; 
	clear: both;
}

/* レイアウト設定　ここまで */