課題を・・・

css2.1

http://schipperke.hotcom-land.com/hw0720/

一応いけるとこまで行きました。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" lang="ja"><!--<![endif]--><head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>楽しいおかず by鎌倉bowls</title>
</head>
<body>
	<div id="container">
		<div id="example">
			<p id="floatL">テラスモール湘南のデリカテッセンのお店。いつもの家庭の食卓にサプライズと笑顔をお届け！</p>
			<p id="floatR">神奈川県藤沢市辻堂神台1-3-1 テラスモール湘南1F 湘南マルシェ内</p>
		</div>
		<!-- [[[ CONTENT-AREA ]]] -->
		<div id="content" class="group">
			<div class="col">
				<!-- [[[ HEADER-AREA ]]] -->
				<header id="siteHeader">
					<hgroup id="headline">
						<h1><a href="#"><img src="images/logo01.png" alt="楽しいおかず by鎌倉bowls"></a></h1>
					</hgroup>
					<nav class="navGlobal">
						<ul class="outline">
							<li class="menu_u"><a href="#"><img class="btn" src="images/nav01_01.png" alt="about" height="140" width="140"></a></li>
							<li class="menu_ru"><a href="#"><img class="btn" src="images/nav02_01.png" alt="menu" height="140" width="140"></a></li>
							<li class="menu_d"><a href="#"><img class="btn" src="images/nav03_01.png" alt="access" height="140" width="140"></a></li>
							<li class="menu_rd"><a href="#"><img class="btn" src="images/nav04_01.png" alt="news" height="140" width="140"></a></li>
						</ul>
					</nav>
				</header>
<!-- / [[[ HEADER-AREA ]]] -->
<!-- [[[ MENU-AREA ]]] -->
				<ul class="outline">
					<li class="max"><a href="#"><img src="images/ph26_l.jpg" alt="鎌倉野菜と塩豚の具だくさん豆乳豚汁" height="300" width="300"></a></li>
				</ul>
				<ul class="outline">
					<li class="v2"><a href="#"><img src="images/ph36_mt.jpg" alt="豚のリエット" height="300" width="140"></a></li>
					<li class="min_u"><a href="#"><img src="images/ph19_s.jpg" alt="豚挽肉と帆立の紅白しゅうまい 蒸籠蒸し［紅/白］" height="140" width="140"></a></li>
					<li class="min"><a href="#"><img src="images/ph37_s.jpg" alt="bowls自家製肉味噌" height="140" width="140"></a></li>
				</ul>
				<ul class="outline">
          <li class="h2"><a href="#"><img src="images/ph23_my.jpg" alt="ひじきときくらげの自家製がんもどき 鶏そぼろの生姜あんかけ" height="140" width="300"></a></li>
          <li class="min_dl"><a href="#"><img src="images/ph28_s.jpg" alt="緑のソース・黄色のソース・黒のソース" height="140" width="140"></a></li>
          <li class="min_dr"><a href="#"><img src="images/ph05_s.jpg" alt="本日のサラダ" height="140" width="140"></a></li>
				</ul>
			</div>
<!-- / [[[ MENU-AREA ]]] -->

<!-- [[[ MENU-AREA ]]] -->
			<div class="col">
				<ul class="outline">
					<li class="h2"><a href="#"><img src="images/ph12_my.jpg" alt="軟骨入しょうが焼きバーグ" height="140" width="300"></a></li>
					<li class="min_dl"><a href="#"><img src="images/ph02_s.jpg" alt="鎌倉野菜とおかひじきの麹おひたし" height="140" width="140"></a></li>
					<li class="min_dr"><a href="#"><img src="images/ph22_s.jpg" alt="鎌倉野菜と豚挽肉とひじきの春雨エスニックソテー" height="140" width="140"></a></li>
				</ul>
				<ul class="outline">
					<li class="max"><a href="#"><img src="images/ph10_l.jpg" alt="長いもと大葉とハムのカラフルピンチョス" height="300" width="300"></a></li>
				</ul>
				<ul class="outline">
					<li class="v2_r"><a href="#"><img src="images/ph07_mt.jpg" alt="蒸し鶏とパクチーのオニオンサラダ" height="300" width="140"></a></li>
					<li class="min_u"><a href="#"><img src="images/ph21_s.jpg" alt="7種の野菜のごちそう大根餅" height="140" width="140"></a></li>
					<li class="min"><a href="#"><img src="images/ph03_s.jpg" alt="鎌倉野菜と牛肉のさっぱりネギ塩サラダ" height="140" width="140"></a></li>
				</ul>
				<ul class="outline">
					<li class="max"><a href="#"><img src="images/ph09_l.jpg" alt="リエット入り真っ赤な玄米クロケット" height="300" width="300"></a></li>
				</ul>
				<ul class="outline">
					<li class="min_ul"><a href="#"><img src="images/ph13_s.jpg" alt="自家製シュリンプバーグ ガーリックバジル風味" height="140" width="140"></a></li>
					<li class="min_ur"><a href="#"><img src="images/ph27_s.jpg" alt="鎌倉野菜のもずく酸辣湯" height="140" width="140"></a></li>
					<li class="h2"><a href="#"><img src="images/ph24_my.jpg" alt="黒胡麻よごし 2種の鎌倉野菜" height="140" width="300"></a></li>
				</ul>
			</div>
<!-- / [[[ MENU-AREA ]]] -->
		
<!-- [[[ MENU-AREA ]]] -->
			<div class="col">
				<ul class="outline">
					<li class="max"><a href="#"><img src="images/ph11_l.jpg" alt="鎌倉野菜と甘栗の八宝きんちゃく" height="300" width="300"></a></li>
				</ul>
				<ul class="outline">
					<li class="v2_r"><a href="#"><img src="images/ph01_mt.jpg" alt="キャロットとグレープフルーツのラペサラダ" height="300" width="140"></a></li>
					<li class="min_u"><a href="#"><img src="images/ph18_s.jpg" alt="2種のパスタの豆乳ラザニア パプリカスパイシーソース" height="140" width="140"></a></li>
					<li class="min"><a href="#"><img src="images/ph17_s.jpg" alt="白胡麻と白味噌の和製タンドリーチキン 旬野菜のBBQ仕立て" height="140" width="140"></a></li>
				</ul>
				
				<ul class="outline">
		      <li class="min_ul"><a href="#"><img src="images/ph20_s.jpg" alt="自家製肉味噌と筍のサモサ風春巻き" height="140" width="140"></a></li>
		      <li class="min_ur"><a href="#"><img src="images/ph06_s.jpg" alt="鎌倉ピクルス" height="140" width="140"></a></li>
		      <li class="h2"><a href="#"><img src="images/ph15_my.jpg" alt="サーモンの西京焼き 鎌倉菜っ葉のとろろソース" height="140" width="300"></a></li>
				</ul>
				<ul class="outline">
					<li class="min_ul2"><a href="#"><img src="images/ph25_s.jpg" alt="腰越シラスと麹もずくの自家製卵焼き アボガドクリーム" height="140" width="140"></a></li>
					<li class="min_ur2"><a href="#"><img src="images/ph08_s.jpg" alt="黒胡麻と黒米のブラック海老フライ" height="140" width="140"></a></li>
					<li class="min_dl2"><a href="#"><img src="images/ph16_s.jpg" alt="牛すじのコトコト土手煮" height="140" width="140"></a></li>
					<li class="min_dr2"><a href="#"><img src="images/ph04_s.jpg" alt="7種の和野菜のラタトュイユ" height="140" width="140"></a></li>
				</ul>
				<ul class="outline">
					<li class="max"><a href="#"><img src="images/ph14_l.jpg" alt="チキン南蛮 鎌倉野菜の柚子胡椒タルタルソース" height="300" width="300"></a></li>
				</ul>
			</div>
<!-- / [[[ MENU-AREA ]]] -->
		</div>
<!-- / #content -->
<!-- / [[[ CONTENT-AREA ]]] -->
<!-- [[[ FOOTER-AREA ]]] -->
		<footer id="siteFooter"></footer>
	</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
	text-decoration:none;
}

img {
    border-style:none;
}

h1{
	margin:0;
	padding:0;
}

body{
	background-image:url(../images/bg01.png);
}

li{
	list-style:none;
}

#container{
	height:1680px;
	width:960px;
	margin:0 auto;
	padding-right:40px;
/*	background:url(../images/line01.png) no-repeat scroll center bottom transparent; */
}

#example{
	font-size:0.8em;
	color:#000;
	height:45px;
	width:960px;
	margin:0 auto;
}

#floatL{
	float:left;
	padding-top:8px;
	line-height:45px;
	width:530px;
	background-image:url(../images/bg01.png);
	padding-left:20px;
}

#floatR{
	float:right;
	padding-top:8px;
	line-height:45px;
	width:390px;
	background-image:url(../images/bg01.png);
	padding-left:20px;
}

#content{
	height:1570px;
	clear:both;
}


.col{
	float:left;
	width:300px;
	height:1550px;
	padding-left:20px;
}

#siteHeader{
	height:620px;
	width:300px;
	float:left;
	padding-bottom:20px;
}

#headline{
	height:300px;
	width:300px;
	padding-top:20px;
}

.outline{
	clear:both;
	height:300px;
	width:300px;
	padding:20px 0 0 0;
}

.menu_u{
	width:140px;
	height:140px;
	float:left;
	padding-bottom:20px;
}

.menu_ru{
	width:140px;
	height:140px;
	float:right;
	padding-left:5px;
	padding-bottom:20px;
}

.menu_d{
	width:140px;
	height:140px;
	float:left;
}

.menu_rd{
	width:140px;
	height:140px;
	float:right;
}

li.v2 a{
	display:block;
	height:300px;
	width:140px;
	float:left;
}

li.min a{
	display:block;
	height:140px;
	width:140px;
	float:right;
}

li.min_u a{
	display:block;
	height:140px;
	width:140px;
	float:right;
	padding-bottom:20px;
}

li.min_dr a{
	display:block;
	height:140px;
	width:140px;
	float:right;
	padding:20px 0 0 20px;
}

li.min_dl a{
	display:block;
	height:140px;
	width:140px;
	float:left;
	padding-top:20px;
}

li.v2_r{
	display:block;
	height:300px;
	width:140px;
	float:right;
	padding-left:20px;
}

li.min_ur a{
	display:block;
	height:140px;
	width:140px;
	float:right;
	padding:0 0 20px 20px;
}

li.min_ul a{
	display:block;
	height:140px;
	width:140px;
	float:left;
	padding-bottom:20px;
}





li.min_ur2 a{
	display:block;
	height:140px;
	width:140px;
	float:right;
	padding:0 0 20px 20px;
}

li.min_ul2 a{
	display:block;
	height:140px;
	width:140px;
	float:left;
	padding-bottom:20px;
}

li.min_dr2 a{
	display:block;
	height:140px;
	width:140px;
	float:right;
	padding-left:20px;
}

li.min_dl2 a{
	display:block;
	height:140px;
	width:140px;
	float:left;
}

あまりきれいじゃないですが、他のことに時間使いたい＾＾；
所要時間およそ2時間半ってとこか。。。。
時間かかってるな。

でも、もう一回やればもっときれいにできる気がするって実感ははじめてかも。