11/14 ANTICA レイアウト

CSS

ANTICA

20111115102731

<!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 charset="utf-8" />
<title>ANTICA</title>
<link href="css/base.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div id="container">

<div id="header">
<h1><img src="images/title.gif" width="800" height="100" alt="ANTICA VINERIA GULIANO" /></h1>
</div>

<div id="wrapper">
<p><a href="#"><img src="images/photo01.jpg" width="263" height="400" /></a><a href="#"><img src="images/photo02.jpg" width="257" height="400" class="centerphoto" /></a><a href="#"><img src="images/photo03.jpg" width="264" height="400" /></a></p>
</div>

<div id="nav">
<ul>
<li id="menu"><a href="#"><em>Menu</em></a></li>
<li id="specials"><a href="#"><em>Today's Specials</em></a></li>
<li id="wine"><a href="#"><em>Wine</em></a></li>
<li id="map"><a href="map.html"><em>Map</em></a></li>
<li id="info"><a href="#"><em>Information</em></a></li>
<li id="content"><a href="#"><em>Contact</em></a></li>
</ul>
</div>

<div id="footer">
<p>アンティーカ・ヴィネリア・ジュリアーノ　〒108-0071　東京都港区白金台5-17-10 Shiroganedai THE 2000 B1</p>
<address>Since 2008, Copyright(C) ANTICA VINERIA GIULIANO All Rights Reserved.</address>
</div>
</div>
</body>
</html>

20111115102749

<!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 charset="utf-8" />
<title>map</title>
<link href="css/base.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div id="container">

<div id="header">
<h1><img src="images/title.gif" width="800" height="100" alt="ANTICA VINERIA GULIANO" /></h1>
</div>

<div id="wrapper">
<div id="photo">
<p><img src="images/map/pageImage.jpg" width="200" height="400" alt="photo"/></p>
</div>
<div id="map">
<p><img src="images/map/pageTitle.gif" width="551" height="24" alt="title" class="title" /></p>
<p><img src="images/map/map.gif" width="452" height="302" alt="map" class="map"/></p>
</div>
</div>

<div id="nav">
<ul>
<li id="menu"><a href="#"><em>Menu</em></a></li>
<li id="specials"><a href="#"><em>Today's Specials</em></a></li>
<li id="wine"><a href="#"><em>Wine</em></a></li>
<li id="map"><a href="#"><em>Map</em></a></li>
<li id="info"><a href="#"><em>Information</em></a></li>
<li id="content"><a href="#"><em>Contact</em></a></li>
</ul>
</div>

<div id="footer">
<p>アンティーカ・ヴィネリア・ジュリアーノ　〒108-0071　東京都港区白金台5-17-10 Shiroganedai THE 2000 B1</p>
<address>Since 2008, Copyright(C) ANTICA VINERIA GIULIANO All Rights Reserved.</address>
</div>
</div>

</body>
</html>

css

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

* {
   margin:0 ;
　 padding: 0;	
}

em {
   visibility: hidden;
}

img {
	border: none;
}

body {
	color: #aaa;
	 background-color: #400000;
	 font-family:
	 "ヒラギノ角ゴ Pro W3", 
	 "Hiragino Kaku Gothic Pro", 
	 "メイリオ", Meiryo, Osaka, 
	 "ＭＳ Ｐゴシック", 
	 "MS PGothic", 
	 sans-serif;
	 font-size: 0.875em;
}

#container {
	width: 800px;
	height: 100%;
	margin: 30px auto;
	text-align:center;
	background-color:#fff;
	border: 2px solid #C90;
}

#wrapper {
	width: 100%;
	height: 400px;
}

#wrapper p img.centerphoto {
	margin: 0 8px 0 8px;
}

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

#nav ul {
	list-style-type: none;
}

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

#nav li a {
	text-decoration: none;
	display: block;
	height: 40px;
}

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

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

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

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

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

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

#footer {
	width: 800px;
	height: 80px;
	background-color: #fff;
	background-image: url(../images/footer.gif);
	background-repeat:no-repeat;
}

#footer p {
	font-size: 0.9em;
	padding: 30px 0 0 0;
	letter-spacing: 0.5px;
}

#footer address {
	font-size: 0.7em;
	font-style: normal;
}

/*map*/

#photo {
	width: 200px;
	height: 400px;
    float: left;	
}

#map {
	float: right;
}

#map p img.title {
	margin: 20px 25px 20px 0;
}

#map p img.map {
	margin: 0 20px 0 0;
}