Tweet
Hallo zusammen,
ich habe mich seit Ewigkeiten mal wieder ein wenig um das Thema
Webdesign gekümmert und bin darauf gestoßen das derzeit bei vielen
Webdesignern aus unterschiedlichsten Gründen eine Abkehr von
Tabellen hin zu Layern geht.
Als ich ein wenig über dem Thema gebrütet habe, wurde ich mehr und
mehr Interessiert und wollte selbst mal ein wenig spielen. Dafür hatte
ich mich eine kleine Testseite in XHTML 1.0 Strict entworfen und in
Verbindung mit CSS versucht ein Design aus Layern aufzubauen.
Funktionierte eigentlich wie es auf den ersten Blick schien ganz gut.
Wie gesagt auf den ersten Blick.
Ich habe folgenden Quellcode:
HTML:
CSS:
Die Grundlagen dazu hatte ich mir aus einem Tutorial von CSS4YOU erarbeitet.
Nun habe ich folgendes Problem. Die Seite an sich wird im Vollbild Modus bei mir sauber angezeigt, und zwar sowohl im IE6 wie auch im Opera 8 und im Firefox 1.0.4.
Wenn ich aber beginne das Fenster zusammen zu schieben (soll ja auch vorkommen das bei jemandem das Browserfenster nicht den vollen Bildschrim aufüllt) dann bekomme ich im Firefox und im Opera unten rechts ein andersfarbiges Kästchen. Außerdem "schwappt" der Text unten rechts irgendwann aus dem Kasten heraus in den "neu" entstanden weißen kasten hinein.
Ich sitze jetzt schon seit 1 Tag dran und verstehe nicht woher dieser Kasten kommt wenn ich das Fenster zusammen schiebe. Ich habe schon mehrfach den Code umgestellt ohne sichbaren Erfolg.
Kann mir jemand nen Tipp geben woran es hängen könnte?! Ist es vieleicht tatsächlich ein Bug oder bin ich nur mal wieder zu blöd das gescheit hin zu bekommen?
ich habe mich seit Ewigkeiten mal wieder ein wenig um das Thema
Webdesign gekümmert und bin darauf gestoßen das derzeit bei vielen
Webdesignern aus unterschiedlichsten Gründen eine Abkehr von
Tabellen hin zu Layern geht.
Als ich ein wenig über dem Thema gebrütet habe, wurde ich mehr und
mehr Interessiert und wollte selbst mal ein wenig spielen. Dafür hatte
ich mich eine kleine Testseite in XHTML 1.0 Strict entworfen und in
Verbindung mit CSS versucht ein Design aus Layern aufzubauen.
Funktionierte eigentlich wie es auf den ersten Blick schien ganz gut.
Wie gesagt auf den ersten Blick.
Ich habe folgenden Quellcode:
HTML:
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<meta content="René Charbonneau" name="author" />
<title>René Charbonneau - Persönliche Webseite</title>
<link rel="stylesheet" type="text/css" href="./renecharbonneau.css" />
</head>
<body>
<div id="main">
<div id="navi">
<a href="#">Startseite</a> |
<a href="#">Lebenslauf</a> |
<a href="#">Projekte</a> |
<a href="#">Publikationen</a> |
<a href="#">Fotos</a> |
<a href="#">Kontakt</a> |
<a href="#">Impressum</a> |
<a href="#">Disclaimer</a>
</div> <!-- schliessendes div für navi -->
<div id="content">
<p>Hallo Welt</p>
</div> <!-- schliessendes div für content -->
<div class="footer">
<div id="footerleft">
<a href="http://creativecommons.org/licenses/by-nc-nd/2.0/">
Einige Rechte vorbehalten. </a>© 2005 René
Charbonneau<br />
Optimiert für
<a href="http://validator.w3.org/check?uri=referer">
XHTML 1.0 Strict
</a>und <a href="http://jigsaw.w3.org/css-validator/">CSS 2</a><br />
Letzte Änderung: 07.06.2005 14:40 GMT +1.00
</div> <!-- schliessendes div für footerleft -->
<div id="footerright">
<a href="#">Seitenanfang</a>
</div> <!-- schliessendes div für footerright -->
</div> <!-- schliessendes div für footer -->
</div> <!-- schliessendes div für main -->
</body>
</html>
PHP-Code:
html
{
height: 100%;
}
body
{
margin: 0%;
text-align: center;
height: 100%;
}
img
{
background-color: #aacccc;
border: 1px dashed #000000;
}
p
{
margin: 0%;
padding: 0%;
}
#main
{
width: 760px;
margin: 0px auto;
text-align: left;
background-color: #aacccc;
height: 100%;
}
#navi
{
width: 100%;
margin: 0px auto;
text-align: center;
background-color: #aaaccc;
height: 5%;
}
#content
{
width: 100%;
margin: 0px auto;
text-align: left;
background-color: #aaaaaa;
height: 87%;
}
.footer
{
margin: 0px auto;
background-color: #aaaccc;
height: 8%;
}
#footerleft
{
width: 80%;
text-align: left;
background-color: #aaaccc;
font-size: 0.8em;
float: left;
}
#footerright
{
width: 20%;
text-align: center;
float: right;
}
Nun habe ich folgendes Problem. Die Seite an sich wird im Vollbild Modus bei mir sauber angezeigt, und zwar sowohl im IE6 wie auch im Opera 8 und im Firefox 1.0.4.
Wenn ich aber beginne das Fenster zusammen zu schieben (soll ja auch vorkommen das bei jemandem das Browserfenster nicht den vollen Bildschrim aufüllt) dann bekomme ich im Firefox und im Opera unten rechts ein andersfarbiges Kästchen. Außerdem "schwappt" der Text unten rechts irgendwann aus dem Kasten heraus in den "neu" entstanden weißen kasten hinein.
Ich sitze jetzt schon seit 1 Tag dran und verstehe nicht woher dieser Kasten kommt wenn ich das Fenster zusammen schiebe. Ich habe schon mehrfach den Code umgestellt ohne sichbaren Erfolg.
Kann mir jemand nen Tipp geben woran es hängen könnte?! Ist es vieleicht tatsächlich ein Bug oder bin ich nur mal wieder zu blöd das gescheit hin zu bekommen?
Kommentar