nicht angemeldet
Doctype zerstört Seitenlayout
0 
Matthias Apsel
0 0 0 Matthias Apsel
0
0
Doctype zerstört Seitenlayout
Der MartinHy, ich benutze den Internet Explorer 9, das einmal vorweg.
Wenn ich meine Seite schreibe, füge ich den Doctype immer erst am Ende ein, daher ist mir der Fehler auch erst nach Fertigstellung aufgefallen (werde das ab jetzt wohl ändern).
Die Seite schaut so aus, wie sie es soll, sobald ich allerdings den Doctype einfüge, ist das Layout vollkommen verschoben (linkslastig).
Dem Internet zufolge liegt das an fehlerhaftem Code. Aber ich wüsste nicht, was ich falsch gemacht habe. Ich hoffe mir kann hier jemand helfen!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iPortfolio of Bernhard Blaha</title>
<link href="styles/format.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page">
<div id="header"><span class="login">Login</span><span class="headername">Bernhard<br />Blaha</span></div>
<div id="menu">
<ol>
<li><a href="#">About me</a></li>
<li><a href="#">Home</a></li>
<li class="inactive">Test</li>
</ol>
</div>
<div id="content">Welcome to my iPortfolio Page.<br/>I created this page to show my work to other people.</div>
<div id="footer"></div>
</div>
<div id="copyright">© by Bernhard Blaha</div>
</body>
</html>
Und hier noch die CSS:
body{
background-color:#787878;
text-align:center;
font-family:Verdana,san-serif;
color:#666666;
}
.login{
display:block;
float:left;
}
.headername{
display:block;
text-align:right;
color:#FFFFFF;
font-size:4em;
margin-right:50px;
}
.inactive{
padding-top:15px;
color:#666666;
}
div#page{
margin-top:10%;
width:800px;
height:500px;
text-align:left;
font-size:0.8em;
color:#666666;
}
div#header{
background-image:url(../images/bannerlicht.jpg);
width:800px;
height:175px;
padding:20px;
}
div#menu{
background-image:url(../images/button.jpg);
height:50px;
vertical-align:middle;
color:#FFFFFF;
font-weight:bold;
}
div#menu li{
text-align:center;
float:left;
width:160px;
height:50px;
}
div#menu a:link{
text-decoration:none;
color:#FFFFFF;
display:block;
width:160px;
height:50px;
padding-top:15px;
}
div#menu a:hover{
text-decoration:none;
color:#FFFFFF;
display:block;
background-image:url(../images/buttonhover.jpg);
width:160px;
height:50px;
padding-top:15px;
}
div#content{
background-color:#FFFFFF;
padding:15px;
height:250px;
overflow:auto;
}
div#footer{
background-image:url(../images/footer.jpg);
height:25px;
}
div#copyright{
font-size:0.6em;
}
Besten Dank im Vorraus,
Bernie
-
Om nah hoo pez nyeetz, Bernie!
Die Seite schaut so aus, wie sie es soll, sobald ich allerdings den Doctype einfüge, ist das Layout vollkommen verschoben (linkslastig).
Dem Internet zufolge liegt das an fehlerhaftem Code. Aber ich wüsste nicht, was ich falsch gemacht habe. Ich hoffe mir kann hier jemand helfen!<html xmlns="http://www.w3.org/1999/xhtml">Wo ist denn da ein doctype?
Besten Dank im Vorraus,
Gerrn.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Bernie!
Die Seite schaut so aus, wie sie es soll, sobald ich allerdings den Doctype einfüge, ist das Layout vollkommen verschoben (linkslastig).
Dem Internet zufolge liegt das an fehlerhaftem Code. Aber ich wüsste nicht, was ich falsch gemacht habe. Ich hoffe mir kann hier jemand helfen!<html xmlns="http://www.w3.org/1999/xhtml">Wo ist denn da ein doctype?
Besten Dank im Vorraus,
Gerrn.
Matthias
Sorry, den doctype habe ich wieder einzufügen vergessen, da es ja nicht funktioniert, sobald er drin ist ;)
Hatte diesen hier verwendet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">@LX: Inwiefern das Padding von der width abziehen? Dann wird das ganze doch kleiner und das Padding bleibt gleich groß, oder etwa nicht?
-
@LX: Inwiefern das Padding von der width abziehen? Dann wird das ganze doch kleiner und das Padding bleibt gleich groß, oder etwa nicht?
Das <http://de.selfhtml.org/css/formate/box_modell.htm@title=Box Modell> kennst du aber?
-
Ergänzung
Das <http://de.selfhtml.org/css/formate/box_modell.htm@title=Box Modell> kennst du aber?
in bunt im wiki
Matthias
--
1/z ist kein Blatt Papier.
-
Ergänzung
Das <http://de.selfhtml.org/css/formate/box_modell.htm@title=Box Modell> kennst du aber?
in bunt im wiki
Matthias
Oh, danke, das ist mir in der Tat neu! Ich war bis jetzt davon ausgegangen, dass height und width sozusagen von Rahmen zu Rahmen gehen!
Allerdings löst das mein Problem leider nicht ganz, da noch jede Menge andere Fehler auftreten (Seite ist linksbündig statt zentriert zum Beispiel).Eine Nebenfrage habe ich aber: Wieso gleicht der IE9 das aus, wenn ich das bisher nie richtig gemacht habe?! Das ist doch sehr kontraproduktiv oder etwa nicht?
-
Om nah hoo pez nyeetz, Bernie!
Eine Nebenfrage habe ich aber: Wieso gleicht der IE9 das aus, wenn ich das bisher nie richtig gemacht habe?! Das ist doch sehr kontraproduktiv oder etwa nicht?
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Bernie!
Eine Nebenfrage habe ich aber: Wieso gleicht der IE9 das aus, wenn ich das bisher nie richtig gemacht habe?! Das ist doch sehr kontraproduktiv oder etwa nicht?
Matthias
Oh, danke, habe ich selbst gerade entdeckt!
Dennoch habe ich mein Problem damit nicht behoben. Ich habe nochmal einen Screenshot gemacht, wie es aussieht:
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/383334_2376663890645_1072036655_2664875_2070730585_n.jpg
(Hoffe das ist hier erlaubt?!)Habe ich noch Fehler gemacht? height und width sind jetzt angepasst.
-
Dennoch habe ich mein Problem damit nicht behoben. Ich habe nochmal einen Screenshot gemacht, wie es aussieht:
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/383334_2376663890645_1072036655_2664875_2070730585_n.jpg
(Hoffe das ist hier erlaubt?!)Habe ich noch Fehler gemacht? height und width sind jetzt angepasst.
Den Fehler den du gemacht ist ist, einen Screenshot zu posten anstatt relevanten Quelltext ;)
-
-
-
Hallo,
Allerdings löst das mein Problem leider nicht ganz, da noch jede Menge andere Fehler auftreten (Seite ist linksbündig statt zentriert zum Beispiel).
natürlich, du hast ja auch nichts in deinem CSS, was die Container zentrieren könnte. Denn text-align wirkt korrekterweise nur auf Text und inline-Inhalte; dass der IE das auch auf enthaltene Blockelemente anwendet, ist einer seiner traditionellen Bugs, die er im Quirks Mode mitschleppt.
Eine Nebenfrage habe ich aber: Wieso gleicht der IE9 das aus, wenn ich das bisher nie richtig gemacht habe?! Das ist doch sehr kontraproduktiv oder etwa nicht?
Ja, finde ich auch.
Aber der Quirks Mode bedeutet ja auch, dass der Browser bei fehlerhaftem Quellcode raten darf, was der Autor gemeint haben könnte. Und da rät der IE oft anders als andere Browser.Ciao,
Martin--
F: Wer waren die ersten modernen Politiker?
A: Die Heiligen drei Könige. Sie legten die Arbeit nieder, zogen teure Klamotten an und gingen auf Reisen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
-
Hallo, Bernie!
Da der DOCTYPE in Deinem Beispiel fehlt, muss ich schlussfolgern, dass das CSS für den Quirksmode und nicht für den Standards-Mode entwickelt wurde.
Dementsprechend muss lediglich bei allen width- und height-Angaben das Padding abgezogen werden, damit das Ergebnis im Standards-Mode dem im Quirksmode nahe kommt.
Gruß, LX
--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)