• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Farbe unter div ändern

Padarom

Padarom

Neues Mitglied
Hallo,
ich habe auf meiner Seite ein helles Hintergrundbild. Mein Footer bringt dann auf kompletter Bildschirmbreite einen schwarzen Kasten mit seinen Informationen an.
Wenn der Hauptteil meiner Seite jedoch zu kurz ist, dann ist die Seite nicht hoch genug, dass der Footer sie nach unten hin abschließen lässt. Daher sieht man den Hintergrund darunter.

Deshalb fragte ich mich, ob es eine Möglichkeit gibt, dies zu verhinden und alles unter dem Footer (ohne die Scrollleiste zu erhöhen) schwarz zu färben.

Hier eine Live-Demo der Seite:
Cleared to Land - Home (ggf. rausscrollen um den "Fehler" zu entdecken).

Danke im Voraus

Mit freundlichen Grüßen
Padarom
 
Zuletzt bearbeitet:
Ist jetzt alles valid.
War im Endeffekt nur ein Fehler in einer PHP-Schleife, die mir mehrere div's erzeugte und Leerzeichen in der Pfadangabe zu jQuery.
Der angesprochene Doctype lag daran, dass ich vergessen habe bei der include für den Hauptinhalt die HTML- & Doctype-Tags zu entfernen.
 
Sieht schon besser aus :)

Das unnötige Scrollen kommt durch das facebook-iframe zustande. Dem hast Du in "p#copyright iframe" Eigenschaften gegeben, die es künstlich verschieben - mach das nicht. Gib ihm einfach eine geringere Breite. Dadurch ist die gesamte Seite dann auch nicht mehr so breit.

Und als Tipp: wenn du schon HTML5 nutzt, verwende doch bitte auch die dort eingeführten Elemente. Z.B. kannst Du <div id="nav"> durch <nav> ersetzen. Außerdem solltest Du das Menü auch als solches auszeichnen (Aufzählungsliste). Und die Texte der Webseite müssten noch in Absätze (<p>) gefasst werden. Dadurch kannst Du auch die Texte dann schicker formatieren.
 
Danke für die Tipps, jedoch scheinst du mein Hauptproblem nicht ganz erkannt zu haben.
Der Footer soll eine Breite von 100% haben und selbstverständlich die komplette Seite nach unten hin ausfüllen. Wenn der Hauptteil lang genug ist, dann ist das ja auch kein Problem, da man eh' scrollen muss um an's Footerende zu kommen. Wenn ich allerdings nur einen kurzen Hauptteil habe, dann schaut unter dem Footer noch der wolkige Hintergrund durch - Das möchte ich beheben und alles darunter schwarz machen, wenn das einfach geht.
Deine Tipps werde ich aber dennoch durchsetzen :)
 
Kann ich irgendwie nicht nachvollziehen was du meinst. Ich dachte es geht um den rechten Bereich. Unten drunter ragt nichts heraus, selbst wenn ich per Firebug den Inhalt kürze. Wo kann man das denn mal sehen? Und in welchem Browser?
 
Ich habe den Inhalt jetzt mal selbst kürzer gemacht. Der Hauptteil hat zwar eine Mindesthöhe, aber die möchte ich nicht allzu groß machen.
Ich nutze die neuste Version vom Chrome, habe es mit Opera und Firefox jedoch auch schon getestet - Jeweils mit einer Auflösung von 1920x1080.
 
Sorry, dass ich erst jetzt wieder poste. Ich depp habe zwar immer wieder die Seite aktualisiert, aber nicht darauf geachtet, dass es inzwischen schon auf Seite 2 weitergeht :D
Leider ist das immer noch nicht meine "Lösung". Hier mal ein Bild, wie ich es meine:
So ist es aktuell
So soll es sein (ohne Scrolleiste)

Ich habe inzwischen mal versucht dem Footer die Höhe 100% zu geben und overflow: hidden, doch das klappt leider auch nicht.
 
Entweder machst Du das per footer-sticky alt oder mit folgendem (habe deinen aktuellen Quellcode nicht nochmal angeschaut, daher nur eine Beschreibung):

body bekommt den schwarzen Hintergrund.
Das 1. Element darin (z.B. "wrapper") erhält dann das Wolkenbild als Hintergrund.
In diesem 1. Element befindet sich dann der Inhalt der Seite inkl. dem Kopf, aber ohne den Footer.
Der Footer liegt parallel zu diesem 1. Element und hat ebenfalls einen schwarzen Hintergrund.

Der Trick an der Sache ist eigentlich nur, dass der schwarze Hintergrund immer gesetzt wird. Nur im Bereich des Contents wird der Wolkenhintergrund angezeigt. So kann es niemals dazu kommen, dass die Wolken unterhalb des Footers zu sehen sind.
 
Nene, das hat sich schon erledigt - Habe beim Header ein margin-top definiert, dass den umschließenden Wrapper mit beeinflusste. Das margin-top habe ich durch ein padding-top im Wrapper ersetzt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben