Hallo zusammen,
ich habe für die Kneipe von meiner Mutter eine Homepage gebastelt, http://www.kegelbistro-gifhorn.de. Leider habe ich immer noch ein großes Problem damit, die einzelnen Container zentriert darzustellen, so dass sie bei allen Browsern und Bildschirmgrößen mittig erscheinen. Mit der Höhe haut auch was nicht hin. Wo liegt mein Problem? Würde mich freuen wenn Ihr mir helfen könntet.
Vielen Dank
Tophy
http://www.kegelbistro-gifhorn.de
Code
@charset "UTF-8";
* {margin: 0px; padding: 0px; }
/*Verläufe*/
body{
min-width: 700px;
max-width: 1100px;
height: 1000px;
margin: 0 auto;
position:relativ;
background: #ebf1f6; /* Old browsers */
background: -moz-linear-gradient(top, #ebf1f6 0%, #89c3eb 1%, #abd3ee 50%, #d5ebfb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(1%,#89c3eb), color-stop(50%,#abd3ee), color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* IE10+ */
background: linear-gradient(to bottom, #ebf1f6 0%,#89c3eb 1%,#abd3ee 50%,#d5ebfb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
}
/*Design*/
#header{
width: 700px;
height:153px;
background: url(Headerneu.png) no-repeat;
position: absolute;
top: 13px;
left:600px;
border-radius: 18px;
}
/* Styling Klapp-Menü */
#navigation > ul { position: absolute;
top: 173px;
left:615px;
padding: 5px 30px; background: url(Leist.png) no-repeat;
z-index:1;
}
/* Navigation Layout-Aufklappfunktion (ohne Styling) */
#navigation ul{ margin: 0 0 px 0; padding: 0px; }
#navigation ul li{ display: inline;position:relative; }
#navigation ul ul,#navigation ul ul { display: none; }
#navigation ul ul li, #navigation ul ul li {display: block; }
#navigation ul li:hover> ul {display: block; position: absolute; left: 0px; }
#navigation ul li:hover> ul {top: 100%; }
#navigation ul ul li:hover ul {left: 100%; top:0px; }
#navigation a {
color:#D20014; text-decoration: none;}
#navigation ul li{ background: url (Leist.png) no-repeat; position: 10px;
font-weight: bold;
padding: 5px;
}
#navigation ul li:hover a { text-decoration:none;
color: blue;
}
#navigation ul ul li{
background: url(Leist.png) no-repeat; repeat-x; padding: 7px 10px;
}
/*Text Home*/
#Hauptbild { position: absolute;
top: 200px;
left: 600px;
width: 700px;
height:600px;
background: url(Home.png) no-repeat ;
border-radius: 18px;
}
#Kind { font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
position: absolute;
top: 200px;
left: 620px;
width: 180px;
height:300px;
padding: 30px;
margin: 20px;
background: #F0FFF0 url(002.jpg) no-repeat 40px 70px;
}
#Kind h1 { font-size:1.5em; color:#D20014; font-weight:bold;
font-family:"Georgia";
position: relative;
top: -10px;
left: 150px;
}
/*Kindergeburtstag*/
#Kindergeburtstag{
font-family:"Helvetica", "Verdana", "sans-serif";
font-size:1.0em;
font-weight:bol;
position: absolute;
top: 180px;
left: 580px;
width: 640px;
height:580px;
padding: 30px;
margin: 20px;
background:#F8F3F8 url(Kindergeburtstag.png)no-repeat 265px 35px ;
border: 5px solid #FFFFFF;
border-radius: 18px;
}
#Kindergeburtstag h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.5em; color:#D20014;
}
/*Impressum*/
#Impressum {
font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
position: absolute;
top: 180px;
left: 580px;
width: 630px;
height:500px;
padding: 30px;
margin: 20px;
background: #F8F3F8 url(030.jpg) no-repeat 380px 95px;
border: 5px solid #FFFFFF;
border-radius: 18px;
}
#Impressum h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.5em; color:#D20014;
}
/*Gastronomie*/
#Speise {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
font-weight:bol;
position: absolute;
top:180px;
left:830px;
width: 375px;
height:645px;
padding: 30px 30px 30px 32px;
margin: 20px;
background: #F8F3F8 url(003.jpg)no-repeat 30px 450px;
border: 5px solid #FFFFFF;
border-top-right-radius:18px;
border-bottom-right-radius:18px;
}
#Oeffnung {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
font-weight:bol;
position: absolute;
top: 180px;
left: 580px;
width: 240px;
height:645px;
padding: 30px 0px 30px 30px;
margin: 20px;
background: #F8F3F8 url(008.jpg)no-repeat 30px 450px;
border: 5px solid #FFFFFF;
border-top-left-radius:18px;
border-bottom-left-radius:18px;
}
#Oeffnung h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.5em; color:#D20014;
}
#Oeffnung h2 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em; color:black;
}
/*Events*/
#Events {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
position: absolute;
top:190px;
left: 590px;
height:590px;
width: 640px;
padding: 30px;
margin: 10px;
background: #F8F3F8 url(Gruppe1.jpg)no-repeat 310px 80px;
border: 5px solid #FFFFFF;
border-radius: 18px;
}
#Events h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.5em; color:#D20014;
}
#Events h2 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em; color:black;
}
/*Frühstück*/
#Frühstück {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
position: absolute;
top:180px;
left: 580px;
width: 638px;
height:590px;
padding: 30px 30px 30px 32px;
margin: 20px;
background: #F8F3F8 url(frueh.png) no-repeat 260px 30px;
border: 5px solid #FFFFFF;
border-radius: 18px;
}
#Frühstück h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.5em; color:#D20014;
}
#Frühstück h2 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em; color:black;
}
/*Familienkegeln*/
#Familienkegeln {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
font-weight:;
position: absolute;
top:180px;
left: 580px;
width: 640px;
height:570px;
padding: 30px 30px 30px 32px;
margin: 20px;
background: #F8F3F8 url(Familie1.png)no-repeat 255px 35px;
border: 5px solid #FFFFFF;
border-radius: 18px;
}
#Familienkegeln h1{font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.5em; color:#D20014;
}
/*Kegelspaß*/
#Kegelspaß { font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.0em;
position: absolute;
font-weight:;
top: 180px;
left: 580px;
width: 640px;
height:570px;
padding: 30px;
margin: 20px;
background: #F8F3F8 url(Kegelspass.png)no-repeat 230px 35px;
border: 5px solid #FFFFFF;
border-radius: 18px;
}
#Kegelspaß h1 {font-family:"Georgia","Sergio UI","tahoma","Verdana";
font-size:1.5em; color:#D20014;
}
/*footer*/