HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
XHTML namespace">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Gattas Berlin • Weine</title>
<meta name="keywords" content="Weine, Cafe, Berlin, " />
<meta name="description" content="Gattas Wein Café . Die einzigartige Café in Berlin" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header">
<div id="menu">
<ul>
<li class="current_page_itema box1 box9"><a class="ling2" href="weine.html"></a></li>
<li class="box2 box10"><a class="ling2" href="speisen.html"></a></li>
<li class="box3 box11"><a class="ling2" href="feiern.html"></a></li>
<li class="box4 box12"><a class="ling3" href="kunst.html"></a></li>
<li class="box5 box13"><a class="ling3" href="aktuelles.html"></a></li>
<li class="box6 box14"><a class="ling3" href="geschenke.html"></a></li>
<li class="box7 box15"><a class="ling3" href="einblicke.html"></a></li>
<li class="box8 box16"><a class="ling" href="kontakt.html"></a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<p><br>Wir führen ausgesuchte deutsche, spanische, italienische, französische und südafrikanische Weine.<br><br>
Unser ständiges Angebot 12 Flaschen zum Preis von 11.</p>
</ul>
</div>
<div id="content">
<p><img src="filme/bilder/B_Wein/01_wein.jpg" alt="" width="400" height="400" class="left" /></p>
<p><img src="filme/bilder/B_Wein/02_wein.jpg" alt="" width="400" height="400" class="left" /></p>
<p><img src="filme/bilder/B_Wein/03_wein.jpg" alt="" width="400" height="400" class="left" /></p>
<p><img src="filme/bilder/B_Wein/04_wein.jpg" alt="" width="400" height="400" class="left" /></p>
<p><img src="filme/bilder/B_Wein/Weinprobe.jpg" alt="" width="400" height="400" class="left" /></p>
</div>
<!-- end sidebar -->
<!-- start footer -->
<div id="footer">
<div id="footer-wrap">
<p id="legal">Gattas Wein-Café <a href="index.html"><img src="bilder/katzekl.gif" alt="" width="70" height="50" /></a> Michaela Baier | Maria Herrlich · Grainauer Str.11, 10777 Berlin, Tel 213 24 11 · <a href="
mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<!-- end footer -->
</div>
<!-- end page -->
</div>
</body>
</html>
CSS:
body {
margin:auto;
padding: 0;
background: #EBE9E4;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
p, ul, ol {
margin: 0 0 2em 0;
text-align: left;
line-height: 19px;
font: 17px "Myriad Pro Cond";
font-weight:bold;
}
a:link {
text-decoration:none;
color: #842124;
}
a:hover, a:active {
text-decoration: none;
color: #963;
}
a:visited {
text-decoration:none;
color: #842124;
}
img {
border: none;
}
/* Header */
#header {
margin:auto;
clear: both;
width: 962px;
height: 55px;
background-color:#EBE9E4;
}
/* Menu */
#menu {
margin:auto;
padding-left:53px;
width: 880px;
height: 48px;
background-color:#EBE9E4;
}
#menu ul {
margin: 0;
padding: 0px 0 0 0px;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
float: left;
}
.ling {
display:block;
float: left;
width: 95px;
height: 40px;
}
.ling2 {
display: block;
float: left;
width: 75px;
height: 40px;
}
.ling3 {
display:block;
float: left;
width: 112px;
height: 40px;
}
.ling4 {
display:block;
float: left;
width: 95px;
height: 40px;
}
#menu .current_page_itema {
background-image:url(bilder/weinebutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemb {
background-image:url(bilder/speisenbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemc {
background-image:url(bilder/feiernbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemd {
background-image:url(bilder/kunstbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_iteme {
background-image:url(bilder/aktuellesbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemf {
background-image:url(bilder/geschenkebutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemg {
background-image:url(bilder/einblickebutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemh {
background-image:url(bilder/kontaktbutton2.jpg);
background-repeat:no-repeat;
}
#menu .current_page_itemi {
background-image:url(bilder/speisenbutton2.jpg);
background-repeat:no-repeat;
}
#wrapper {
width: 970px;
height: 400px;
margin: auto;
background-color:#EBE9E4;
}
/* Page */
#page {
width: 890px;
height:300px;
margin: auto;
margin-top:5px;
padding-top: 10px;
}
/* Content */
#content {
float: right;
width: 400px;
height: 200px;
overflow:scroll;
}
/* Sidebar */
#sidebar {
float: left;
width: 400px;
padding-left: 10px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Boxes */
.box1 {
width: 80px;
height: 40px;
background-image:url(bilder/weinebutton.jpg);
background-repeat:no-repeat;
margin-right: 3px;
}
.box2 {
width: 80px;
height: 40px;
background-image:url(bilder/speisenbutton.jpg);
background-repeat:no-repeat;
margin-right: 12px;
}
.box3 {
width: 80px;
height: 40px;
background-image:url(bilder/feiernbutton.jpg);
background-repeat:no-repeat;
margin-right: 7px;
}
.box4 {
width: 120px;
height: 40px;
background-image:url(bilder/kunstbutton.jpg);
background-repeat:no-repeat;
margin-right: 5px;
}
.box5 {
width: 115px;
height: 40px;
background-image:url(bilder/aktuellesbutton.jpg);
background-repeat:no-repeat;
margin-right: 3px;
}
.box6 {
width: 113px;
height: 40px;
background-image:url(bilder/geschenkebutton.jpg);
background-repeat:no-repeat;
margin-right: 2px;
}
.box7 {
width: 115px;
height: 40px;
background-image:url(bilder/einblickebutton.jpg);
background-repeat:no-repeat;
margin-right: 3px;
}
.box8 {
width: 100px;
height: 40px;
background-image:url(bilder/kontaktbutton.jpg);
background-repeat:no-repeat;
margin-right: 5px;
}
.box9 a:hover {
background-image:url(bilder/weinebutton2.jpg);
background-repeat:no-repeat;
}
.box10 a:hover {
background-image:url(bilder/speisenbutton2.jpg);
background-repeat:no-repeat;
}
.box11 a:hover {
background-image:url(bilder/feiernbutton2.jpg);
background-repeat:no-repeat;
}
.box12 a:hover {
background-image:url(bilder/kunstbutton2.jpg);
background-repeat:no-repeat;
}
.box13 a:hover {
background-image:url(bilder/aktuellesbutton2.jpg);
background-repeat:no-repeat;
}
.box14 a:hover {
background-image:url(bilder/geschenkebutton2.jpg);
background-repeat:no-repeat;
}
.box15 a:hover {
background-image:url(bilder/einblickebutton2.jpg);
background-repeat:no-repeat;
}
.box16 a:hover {
background-image:url(bilder/kontaktbutton2.jpg);
background-repeat:no-repeat;
}
/* Footer */
#footer-wrap {
width: 890px;
height: 64px;
margin: auto;
}
#footer {
margin: 0 0;
height: 64px;
padding: 0;
font: 10pt "Myriad Pro";
float:left;
}
#legal {
clear: both;
padding-top: 10px;
padding-left: 30px;
text-align: center;
color: #842124;
float:left;
font: 12px Georgia, "Times New Roman", Times, serif;
font-weight: bolder;
}
Die komplette Site seht ihr unter:
GATTAS
Aber Achtung, nur die "weine-Html" ist soweit fertig, die anderen nicht. Und ich habe das hier oben kopierte verkleinert um zu sehen ob sich es mittig ausrichtet.
Hoffe das ist verständlich.
Danke