nicht angemeldet
Hallo zusammen,
ich hab die letzten 2 Stunden mit der Forumssuche verbracht, aber alle dort aufgeführten Lösungswege haben irgendwie nicht funktioniert oder ich habe sie falsch interpretiert.
Folgendes (wohl sehr häufiges Problem): Kopfzeile, dann Inhalt, darunter eine Fusszeile. Inhalt soll eine linke und eine rechte Spalte haben, beide mit festen Breiten, aber in der Höhe variabel. Darunter soll der Fussbereich kommen. Da ich noch keine Inhalte habe, ist die Höhe vorläufig festgelegt auf 400px, die soll später noch weg und die Höhe soll sich dem Inhalt anpassen.
Soweit so gut. Der Firefox mags. ;-) Leider mein spezieller Freund namens Internet Explorer nicht. Der zeigt mir nämlich Inhalte aus dem Fussbereich im Inhalt an. Hab schon ein paar Varianten mit clear probiert und auch mal overflow gesetzt, aber nichts hat die gewünschte Lösung gebracht.
Kann mir jemand helfen?
Hier die Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>| quarzus.de |</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="javascript.js" type="text/javascript"></script>
</head>
<body onload="bildwechsel();">
<div id="kopfbereich">
<div id="globalnavigationoben">Startseite | Tour | Hilfe | Sitemap | AGB | Impressum</div>
<div id="wechselbildoben"><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /></div>
<div id="hauptnavigation"> </div>
</div>
<div id="inhalt">
<div id="linkerinhaltcontainer">
<div id="linkerinhalt"> </div>
</div>
<div id="rechterinhaltcontainer">
<div id="rechterinhalt"> </div>
</div>
</div>
<div id="clearing"> </div>
<div id="fussbereich">
<div id="wechselbildunten"><img src="bilder/quarzus_sms_kopf_noreplaceweiss.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_noreplaceweiss.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /><img src="bilder/quarzus_sms_kopf_durchsicht.gif" width="104" height="50" alt="" /></div>
<div id="globalnavigationunten">Startseite | Tour | Hilfe | Sitemap | AGB | Impressum</div>
</div>
</body>
</html>
Und hier das Stylesheet:
body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
text-align: center;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
}
#kopfbereich {
position: relative;
width: 770px;
height: 200px;
margin: auto;
background-repeat: no-repeat;
}
#globalnavigationoben {
position: absolute;
left: 0px;
top: 10px;
width: 765px;
padding-right: 5px;
text-align: right;
color: #999999;
}
#wechselbildoben {
position: absolute;
left: 250px;
top: 30px;
width: 520px;
height: 150px;
background-image: url(./bilder/quarzus_sms_kopf_hintergrund_wolken.jpg);
}
#wechselbildoben img {
vertical-align: bottom;
}
#hauptnavigation {
position: absolute;
left: 0px;
top: 190px;
width: 765px;
padding-right: 5px;
text-align: right;
color: #999999;
}
#inhalt {
position: relative;
width: 765px;
height: 200px;
margin: auto;
margin-top: 20px;
padding-right: 5px;
}
#linkerinhaltcontainer {
float: left;
width: 235px;
background-image: url(./bilder/quarzus_sms_inhalt_linkerinhaltoben.gif);
background-repeat: no-repeat;
background-color: #F0F0F0;
}
#linkerinhalt {
height: 400px;
background-image: url(./bilder/quarzus_sms_inhalt_linkerinhaltunten.gif);
background-position: bottom;
background-repeat: no-repeat;
}
#rechterinhaltcontainer {
float: right;
width: 510px;
background-image: url(./bilder/quarzus_sms_inhalt_rechterinhaltoben.gif);
background-repeat: no-repeat;
background-color: #F0F0F0;
}
#rechterinhalt {
height: 400px;
background-image: url(./bilder/quarzus_sms_inhalt_rechterinhaltunten.gif);
background-position: bottom;
background-repeat: no-repeat;
}
#clearing {
clear: both;
overflow: hidden;
}
#fussbereich {
position: relative;
width: 770px;
margin: auto;
padding-top: 20px;
}
#wechselbildunten {
position: absolute;
left: 250px;
width: 520px;
height: 100px;
background-image: url(./bilder/quarzus_sms_kopf_hintergrund_wolken.jpg);
}
#wechselbildunten img {
vertical-align: bottom;
}
#globalnavigationunten {
position: absolute;
left: 0px;
top: 125px;
width: 765px;
padding-right: 5px;
padding-bottom: 20px;
text-align: right;
color: #999999;
}
zu finden ist das ganze auch noch live unter:
www.quarzus.de