nicht angemeldet
Problem: Weißer Rand von <body>
Gunnar BittersmannHallo erstmal, nachdem mir gestern schon so schnell und gut bei meinem Fehler mit JS geholfen wurde, habe ich wieder einen Fehler gefunden. Diesmal kein JS, sondern CSS und/oder HTML.
Mein Problem ist Folgendes: Auf meiner Website wird seit gestern Abend ein weißer Balken hinter meiner Navigationsleiste angezeigt. Ich habe herausgefunden, dass dies eigentlich der von hinten "durchscheinende" <body> ist (denn wenn ich die font-size für body auf 0 setze, ist der Balken weg).
Vielleicht kann sich das jemand mal anschauen... ich bin ja eher am rumbasteln als am Fehler lösen.
- Florian
Hier noch mal die Struktur:
flozzed.de
flozzed.de/css
flozzed.de/inc
akzeptierte Antworten
Problem: Weißer Rand von <body>
Matthias Apsel
Bewertung: keine Bewertung
-
@@Florian
Hier noch mal die Struktur:
Du glaubst nicht wirklich, dass die Dateistruktur hier hilfreich wäre, oder?
Ein Blick in den Quelltext deiner problematischen Seite ist es:
1. Fehler:
<html lang="en">Dein Seiteninhalt ist nicht auf englisch, sondern auf deutsch. Also muss die Angabe der Sprache
lang="de"lauten.2. Fehler:
<head> <!-- … (viel Zeugs) --> <![endif]--> <meta charset="utf-8"> </head>Die Angabe der Zeichencodierung muss in den ersten 1024 Bytes des Dokuments erfolgen. Bei dir sind es aber 1699 Bytes. Die Zeichencodierung als allererstes im
headangeben.3.Fehler:
</head> <!-- Navigation --> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">Hier wird implizit ein
body-Element geöffnet, danavin dieses reingehört.</nav> <body id="page-top">Es darf nur einen
bodygeben. Das<body>-Start-Tag muss vor dem<nav>-Start-Tag stehen.Korrigiere die Fehler. Wenn das Darstellungsproblem noch auftritt, dann meldest du dich wieder.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Du glaubst nicht wirklich, dass die Dateistruktur hier hilfreich wäre, oder?
Ich dachte, es könnte sich bei dem Fehler um irgendwas handeln, dass ich mit den <?php include(...); ?> falsch gemacht habe... Aufgrund der Tatsache, dass ich wenn ich <?php include(inc/nav.php); ?> entfernt habe, der weiße Balken auch verschwunden ist. Das hängt aber dann vermutlich mit dem 2. <body> Element zusammen, dass ich damit versehentlich geöffnet habe...
Ich habe den <body> Tag nun über die Navigation gesetzt:
<body id="page-top"> <!-- Navigation --> <?php include("inc/nav.html"); ?>und die html lang auf "de" gesetzt:
<!DOCTYPE html> <html lang="de">sowie das <meta charset="utf-8"> ziemlich direkt an den Anfang gesetzt.
Das Problem ist weiterhin vorhanden, was mache ich falsch? Habe ich bei der Fehlerbehebung wieder einen Fehler eingebaut?
-
Hallo Florian,
Das Problem ist weiterhin vorhanden, was mache ich falsch? Habe ich bei der Fehlerbehebung wieder einen Fehler eingebaut?
https://validator.nu/?doc=http%3A%2F%2Fflozzed.de%2F
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
Auch wenn diese Seite nützlich ist, hatten die Fehler scheinbar nichts mit meinem Problem zu tun... Nach entfernen von fast allen Errors bleibt der weiße Balken bestehen.
-
Hallo Florian,
https://validator.nu/?doc=http%3A%2F%2Fflozzed.de%2F Auch wenn diese Seite nützlich ist, hatten die Fehler scheinbar nichts mit meinem Problem zu tun... Nach entfernen von fast allen Errors bleibt der weiße Balken bestehen.
Dann kann die Fehlerursache ‚invalides HTML‘ ausgeschlossen werden, und wir können uns jetzt anderen Fehlerquellen zuwenden.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) -
Hallo Florian,
Vor
<nav idsteht.http://stackoverflow.com/questions/9691771/why-is-65279-appearing-in-my-html
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
Vor
<nav idsteht.http://stackoverflow.com/questions/9691771/why-is-65279-appearing-in-my-html
Vielen Dank! Das Problem ist nun behoben :)
-
Hallo Florian,
Vielen Dank! Das Problem ist nun behoben :)
Schau trotzdem noch mal in den Validator.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
-
-
@@Matthias Apsel
Vor
<nav idsteht.Nein, da steht keine Zeichenreferenz.
Und was zum Geier ist 65279? Die dezimale Angabe von Codepoints ist zu nichts gut.
Ah, U+FEFF. Ja, da steht ein BOM mitten im Quelltext, wo es nichts zu suchen hat.
Wie hast du’s gefunden?
Irgendwas mit Whitespace musste der weiß gebliebene Bereich ja zu tun haben.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Hallo Gunnar Bittersmann,
Vor
<nav idsteht.Nein, da steht keine Zeichenreferenz.
Stand damals.
Wie hast du’s gefunden?
Quelltextansicht des Browsers [strg+u] (windows)
Irgendwas mit Whitespace musste der weiß gebliebene Bereich ja zu tun haben.
Ja, nachdem es kein margin oder padding irgendeines der beteiligten Elemente war. Und der Tipp mit unsichtbarem Whitespace kam bereits vom TO: Der Streifen verschwände, wenn die Schriftgröße auf Null gesetzt wird.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
@@Matthias Apsel
Wie hast du’s gefunden?
Quelltextansicht des Browsers [strg+u] (windows)
Quelltextansicht im Firefox (OS X) hat kein BOM gezeigt:
Den betreffenden Abschnitt in Richard Ishidas Unicode code converter kopiert: Da isses.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
-
-
-
-
-
@@Matthias Apsel
Übersetzt: Die Entity-Referenzen müssen mit
;abgeschlossen werden:unregelmäßig.Allerdings sollten hier gar keine Entity-Referenzen [1] verwendet werden, sondern die richtigen Zeichen:
unregelmäßig. Umlaute und ß sind keine Sonderzeichen.Das
&hingegen ist in HTML ein Sonderzeichen und muss escapet werden (&):
<a href="https://www.youtube.com/watch?v=Am8eE8T0IPs&list=UL" class="video-box" target="_blank">.Außerdem wird angemeckert, dass
spankeinen flow content (wiepetc.) enthalten darf (sondern nur phrasing content). Zum Gruppieren von flow content brauchst du ein anderes Element wiediv.LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
Ich hinke hinterher. Der Artikel wird demnächst an der Stelle auch wieder auf deutsch verfügbar sein. In der Zwischenzeit gibt’s die Übersetzung der vorigen Version des Artikels noch von mir. ↩︎
-
-
-