Footer bricht ab, schaut man die Website skaliert oder mobil an

Wir brauchen leider den Code, damit wir dir helfen können...

"endet der Footer abrupt auf der rechten Seite" - ich kann nichts dergleichen erkennen (Opera). In welchem Browser tritt das Problem auf?

WBRIAD Was ist mit der template.css? Könntest du uns die auch noch zur Verfügung stellen?

Auf dem Screenshot sehe ich was Du meinst, aber wenn ich deine Seite aufrufe und die Fensterbreite verkleinere, kann ich nichts dergleichen beobachten: Der Footer ist dann zu breit, verschwindet unter dem rechten Fensterrand und die horizontale Scrollbar wird eingeblendet.

Ja, jetzt sehe ich es: Der Text ist noch da, aber der schwarze Hintergrund ist weg. Ich schaue mal rein ...

Die Breite des body ist offenbar gleich der Breite des Viewports. Und weil dein #pagefooter width:100% hat, hat er und damit auch der Hintergrund ebenfalls diese Breite. Beheben kann ich es, wenn ich dem #pagefooter width:auto und display:inline-block gebe.
Verstehen tue ich das Ganze nicht, weil ich bisher immer davon ausgegangen bin, dass sich die Breite des body an seinen Inhalt anpasst. Vielleicht kann jemand mit erweiterten Kenntnissen das aufklären.
PS: Ich sehe, dass ganz rechts immer noch eine Fläche ohne Hintergrund bleibt. Das liegt daran, dass sich die Breite des #pagefooter an den Inhalt anpasst und der ist schmaler als andere Elemente auf der Seite. Wenn Du willst, dass der Hintergrund bis zum rechten Rand geht, musst Du es bei width:100% für #pagefooter belassen und statt dessen dem body ein display:inline-block geben.

"Kann es sein, dass sich ein DIV mit absoluter Breite von 100% immer nur der Breite der neugeladenen Seite anpasst?" Eine Breite von 100% würde ich als relativ bezeichnen. Die Prozentangabe bezieht sich auf die Breite des Elternelementes.

Ohne die CSS-Datei ist es schwer, dir zu helfen.
Denke, dass er immer das aktuelle Fenster den schwarzen Block gibt und alles was dann kommt, einfach weiß bzw. an den background angepasst wird.

Der TO hat einen Link gepostet, über den sich das CSS jederzeit einsehen lässt. Außerdem kann man das CSS sehr komfortabel mit den Developertools analysieren. Das habe ich getan und dem TO Hinweise gegeben, wie er sein Problem lösen kann.

Solche Fehler entstehen meistens durch Fehlende div-Endungen.

Schau bei Problem solcher Art auf:
https://validator.w3.org/

und behebe die Fehler. Aktuell sind noch 4 Erros vorhanden.

Hallo HTML - Seminar Gemeinde

Am 1. September 2016, schrieb "WBRIAD" in dieser Seite folgendes:

Ich habe einen Footer, der über die volle Breite der Webseite geht: schaut man die Website skaliert oder mobil - auf Smartphone an, bricht Footer abrupt auf der rechten Seite ab. Ich habe bereits alles probiert, auch über CSS, ich bekomme es nicht hin, dass sich der Footer wieder von links nach rechts erstreckt. Kann mir von euch jemand helfen?

Der Text von "WBRIAD" wurde von mir aufs wesentliche gekürzt. Ich suchte im Internet Tipps, die mir helfen könnten und fand dieses Schreiben in euer HTLM-Forum. Die Antworten euerseits dazu, konnte ich kaum nachvollziehen, weil ich mich nicht so gut mit der Materie auskenne. Ich habe nur die Anregung eines euer Mitglieder ausprobiert, in dem ich am "body", display: inline-block angegeben habe. So war das Problem scheinbar gelöst, aber es wurde ein Neues ausgelöst; die ganze Seite wurde Linksbündig.

So habe ich mich entschlossen mich hier anzumelden, um euch diese Zeilen zu schreiben mit der Bitte auch mir zu helfen.

Da einer von euch von "WBRIAD" den Code Seiner Seite anforderte, schicke ich diese gleich als Text von dieser Seite im Anhang gleich mit. Ausserdem ist Anbei die CSS-Datei in Textformat.

Hallo

Soweit ich es verstanden habe geht es bei dir um die Hintergrund- (dunkelblau) und obere Rahmenfarbe (hellblau) des Footers (div.#late_footer_wrapper).

Dem div#late_footer_wrapper sind die Hintergrund- und Rahmenfarbe zugewiesen. Zugleich aber eine Breite (width) von 100%. Die 100% beziehen sich immer auf die aktuelle Fensterbreite. Die beiden Farben werden also nicht breiter als 100% angezeigt. Natürlich auch nicht schmaler als 100%, sondern genau 100%.

Der innere Container div#late_footer hat eine Breite von 960px plus etwas padding.

Wenn die Fensterbreite jetzt zum Beispiel auf 800px verringert wird, wird der Container div#late_footer_wrapper in 800px Breite angezeigt, also auch die in ihm definierten Farben.

Der innere Container div#late_footer behält aber seine Breite von über 960px. Er erweitert den äußeren Container aber nicht, sondern ragt über ihn hinaus. Für den inneren Container wird deshalb die untere Scrolleiste eingeblendet.

Das kannst du auch nachvollziehen wenn du bei schmalem Fenster nur etwas seitlich scrollst und dann mit der Fensterbreite rumspielst. Die beiden Farben passen sich jeweils der Fensterbreite an.

Du musst also dafür sorgen, dass innere Container niemals breiter als die sie umgebenden Container werden.

Wenn du feste Breiten vergeben willst sollte also der äußere Container die feste / starre Breite bekommen und der innere eine prozentuale Breite.

Gruss

MrMurphy

Zitat von MrMurphy

Du musst also dafür sorgen, dass innere Container niemals breiter als die sie umgebenden Container werden.

Hallo MrMurphy

Du hattest recht Ich habe einfach die Angaben vertauscht habe dem "late foot wrapper" den Wert 800px zugeteit (die Breite der Seite) und dem "late footer" 100%. Jetzt scheint es insgesamt zu passen, es braucht nur eine Feinjustierung.

Vielen Dank für Deine Hilfe

Also ich muss mich korrigieren, es klappt definitiv nicht, ich habe mit den beiden Werten so ziemlich alles ausprobiert. Auf dem PC Desktop ist alles ok, aber nicht auf Smartphon, da habe ich nach wie vor unten rechts ein Abbruch des Footers. Und wenn ich auf Smartphon einen durchgehenden Footer zustande bekomme, ist auf dem Desktop der Footer bis zum linken Rand abgerutscht.