Hi, ich bins schon wieder.
Mein Footer will einfach nicht bündig abschließen. Er ist zwar immer unten, jedoch bleibt da beim Firefox eine kleine Lücke und man sieht auch, dass der Footer am Ende der Hauptbox ist. Beim IE jedoch sieht man, dass der Footer nicht ganz unterhalb der Hauptbox ist, da diese noch ein Stückchen runter geht.
Naja, schaut es euch doch bitte selbst an:
http://www.afa-greifswald.de/crd/index.php?content=impressum&pic=imp
Hier der dazugehörige Code:
Und hier das CSS:
Ich bin am Verzweifeln.
Maik, ich hoffe du kannst mir wieder helfen. Du machst das super, zumal es die Vorlage aus deinem Tutorial ist
Danke nochmal.
Mein Footer will einfach nicht bündig abschließen. Er ist zwar immer unten, jedoch bleibt da beim Firefox eine kleine Lücke und man sieht auch, dass der Footer am Ende der Hauptbox ist. Beim IE jedoch sieht man, dass der Footer nicht ganz unterhalb der Hauptbox ist, da diese noch ein Stückchen runter geht.
Naja, schaut es euch doch bitte selbst an:
http://www.afa-greifswald.de/crd/index.php?content=impressum&pic=imp
Hier der dazugehörige Code:
HTML:
<body background="bilder/bg.jpg">
<div id="page" class="hauptbox">
<div id="header"><a href="index.php"><img src="bilder/header.jpg" width="800" height="113" border="0"></a><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="index.php?pic=welcome" onMouseOver="MM_swapImage('Home','','bilder/home_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/home.jpg" alt="Home" name="Home" width="115" height="29" border="0" id="Home"></a></td>
<td><a href="index.php?content=preise&pic=price" onMouseOver="MM_swapImage('Preise','','bilder/preise_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/preise.jpg" alt="Preise" name="Preise" width="114" height="29" border="0" id="Preise"></a></td>
<td><a href="index.php?content=leistung&pic=work" onMouseOver="MM_swapImage('Leistung','','bilder/leistung_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/Leistung.jpg" alt="Leistung" name="Leistung" width="171" height="29" border="0" id="Leistung"></a></td>
<td><a href="index.php?content=referenz&pic=reference" onMouseOver="MM_swapImage('Referenz','','bilder/referenz_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/referenz.jpg" alt="Referenz" name="Referenz" width="171" height="29" border="0" id="Referenz"></a></td>
<td><a href="index.php?content=kontakt&pic=contact" onMouseOver="MM_swapImage('Kontakt','','bilder/kontakt_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/kontakt.jpg" alt="Kontakt" name="Kontakt" width="114" height="29" border="0" id="Kontakt"></a></td>
<td><a href="index.php?content=impressum&pic=imp" onMouseOver="MM_swapImage('Impressum','','bilder/impressum_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/impressum.jpg" alt="Impressum" name="Impressum" width="115" height="29" border="0" id="Impressum"></a></td>
</tr>
</table>
</div>
<? /*<div id="leftcontent">
</div> */?>
<div id="rightcontent">
<?
// Bilder einladen Start
if ($_GET['pic']=='') {
if (file_exists('content/right/welcome.php')){include ('content/right/welcome.php');} else {}
}
else {if (file_exists('content/right/'.$_GET['pic'].'.php')) {include ('content/right/'.$_GET['pic'].'.php');}
else {}
}
// Bilder einladen Ende
?>
</div>
<div id="centercontent"><?
// Inhalte einladen Start
if ($_GET['content']=='') {
if (file_exists('content/00.php')){include ('content/00.php');} else {include ('content/404.php');}
}
else {if (file_exists('content/'.$_GET['content'].'.php')) {include ('content/'.$_GET['content'].'.php');}
else {include ('content/404.php');}
}
// Inhalte einladen Ende
?>
</div>
<div id="footer">
<img src="bilder/footer.jpg" width="800" height="27">
</div>
</div>
</body>
Und hier das CSS:
HTML:
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}
body {
color:#611416;
background:background-image:url(bilder/bg.jpg);
background:background-color:#FFFFFF;
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}
div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}
html, body {
height: 100%;
font-size:12px;
}
/* DIV-Boxen */
div#page {
position:relative;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
background:background-image:url(bilder/bg_content.jpg);
}
div#header {
height: 142px;
background: #fff;
}
/*
div#topNavi {
top:113px;
height: 29px;
background: #fff;
}
*/
/* div#leftcontent {
margin: 25px 0px;
width: 105px;
float: left;
background-color:#;
padding:5px;
} */
div#rightcontent {
margin: 25px 25px;
width: auto;
float: right;
background-color:#;
padding:5px;
border: 1px dotted #A8A8A8;
}
div#centercontent {
vertical-align:top;
margin: 25px 200px 52px 25px;
background-color:#F9F9F9;
padding:5px;
border: 1px dotted #A8A8A8;
}
div#leftcontent, div#rightcontent, div#centercontent {
}
div#footer {
clear: both;
position: absolute;
bottom: 0;
height:auto;
width: 800px;
background: #fff;
border-top: 1px solid #b8b8b8;
}
/* clearfix zum Aufheben der Floatumgebung */
.hauptbox:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.hauptbox {display: inline-block;}
/* Hides from IE-mac \*/
* html .hauptbox {height: 1%;}
.hauptbox {display: block;}
/* End hide from IE-mac */
/* Überschrift */
h2 {
margin-left: 10px;
}
a:link {
font-weight: normal;
color: #666666;
text-decoration: underline;
}
a:hover {
font-weight: normal;
color:#687BD2;
text-decoration: underline;
}
a:visited {
font-weight: normal;
color: #666666;
text-decoration: underline;
}
Ich bin am Verzweifeln.
Maik, ich hoffe du kannst mir wieder helfen. Du machst das super, zumal es die Vorlage aus deinem Tutorial ist
Danke nochmal.