CSSカラムレイアウト応用課題

Project


HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ANTICA VINERIA GIULIANO</title>
<link href="../css/italian2.css" rel="stylesheet" 
media="screen, print" />
</head>
<body>
<div id="container">
<h1><img src="../images/title.gif" width="800" 
height="100" 
alt="ANTICA VINERIA GIULIANO"></h1>
<div id="content">
<p><img src="../images/photo01.jpg" width="263" 
height="400" alt="">
<img src="../images/photo02.jpg" width="257" 
height="400" alt="" class="ph2">
<img src="../images/photo03.jpg" width="264" 
height="400" alt=""></p>
</div>
<div id="nav">
<ul>
<li id="btn01"><a href="#">Menu</a></li>
<li id="btn02"><a href="#">Today's Specials</a></li>
<li id="btn03"><a href="#">Wine</a></li>
<li id="btn04"><a href="#">Map</a></li>
<li id="btn05"><a href="#">Information</a></li>
<li id="btn06"><a href="#"> Contact</a></li>
</ul>
</div>
<div id="footer">
<address>アンティーカ・ヴィネリア・ジュリアーノ
　〒108-0071　東京都港区白金台5-17-10 Shiroganedai
 THE 2000 B1F
</address>
<p class="copy">Since 2008, Copyright(C) ANTICA 
VINERIA GIULIANO All Rights Reserved.</p>
</div> 
</div>
</body>
</html>


HTML2

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>MAP</title>
<link href="../css/italian2.css" rel="stylesheet" 
media="screen, print" />
</head>
<body>
<div id="container">
<h1><img src="../images/title.gif" width="800" 
height="100" 
alt="ANTICA VINERIA GIULIANO"></h1>
<div id="content">
<p><img src="../images/map/pageImage.jpg" 
width="200" height="400" alt="" class="map_ph1">
<img src="../images/map/pageTitle.gif" width="551" 
height="24" alt="" class="map_ph2">
<img src="../images/map/map.gif" width="452" 
height="341" alt="" class="map_ph3"></p>
</div>
<div id="nav">
<ul>
<li id="btn01"><a href="#">Menu</a></li>
<li id="btn02"><a href="#">Today's Specials</a></li>
<li id="btn03"><a href="#">Wine</a></li>
<li id="btn04"><a href="#">Map</a></li>
<li id="btn05"><a href="#">Information</a></li>
<li id="btn06"><a href="#"> Contact</a></li>
</ul>
</div>
<div id="footer">
<address>アンティーカ・ヴィネリア・ジュリアーノ
　〒108-0071　東京都港区白金台5-17-10 Shiroganedai
 THE 2000 B1F
</address>
<p class="copy">Since 2008, Copyright(C) ANTICA 
VINERIA GIULIANO All Rights Reserved.</p>
</div> 
</div>
</body>
</html>

CSS

@charset "UTF-8";

/* Reset */
html, body, 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:
			"Hiragino Kaku gothic Pro",
			"ヒラギノ角ゴ Pro W3",
			Meiryo,
			"メイリオ",
			Osaka,
			"MS P Gothic",
			"ＭＳ Ｐ ゴシック",
			sans-serif;
} 

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul li, ol li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

img, input {
    vertical-align: bottom;
}

/* rayout */
body {
    font-size: 0.75em;
	line-height: 1.5;
	text-align: center;
	background-color: #6D2008;
}

#container {
    margin: 20px auto 0;
	width: 800px;
	height: 100%;
	background-color: #FFF;
	border: 2px solid #C6A211;
}

#content {
     width: 100%; 
}

.ph2 {    
    padding: 0 3px;
}

#nav {
    clear: both;
    width: 800px;
    height: 40px;
}

#nav li {
    display: inline;
	float: left;
}

#nav li a {
    text-decoration: none;
	text-indent: -999em;
	overflow: hidden;
    display: block;
	height: 40px;
}

#nav li#btn01 a {
    background-image: url(../images/btn01.gif);
    width: 98px;
}

#nav li#btn01 a:hover {
    background-image: url(../images/btn01o.gif);
}

#nav li#btn02 a {
    background-image: url(../images/btn02.gif);
    width: 149px;
}

#nav li#btn02 a:hover {
    background-image: url(../images/btn02o.gif);
}

#nav li#btn03 a {
    background-image: url(../images/btn03.gif);
    width: 173px;
}

#nav li#btn03 a:hover {
    background-image: url(../images/btn03o.gif);
}

#nav li#btn04 a {
    background-image: url(../images/btn04.gif);
    width: 145px;
}

#nav li#btn04 a:hover {
    background-image: url(../images/btn04o.gif);
}

#nav li#btn05 a {
    background-image: url(../images/btn05.gif);
    width: 115px;
}

#nav li#btn05 a:hover {
    background-image: url(../images/btn05o.gif);
}

#nav li#btn06 a {
    background-image: url(../images/btn06.gif);
    width: 120px;
}

#nav li#btn06 a:hover {
    background-image: url(../images/btn06o.gif);
}

#footer {
     background-image: url(../images/footer.gif);
	 width: 800px;
	 height: 60px;
}

address {
    padding: 20px 0 10px 0;
	font-size: 0.8em;
	lone-height: 1.3em;
	color: #5B5A57;
 }

p.copy {
    font-size: 0.7em;
	color: #9B9785;
    }

/* Map */

.map_ph1{
    float: left;
}

.map_ph2 {
    padding: 15px 0 0 0;
}

.map_ph3 {
    padding: 0 0 20px 0;    
}