Header/Footer Problem
Hallo zusammen,
ich habe ein kleines Problem bei dem Layout meiner Website. Ich möchte einen Header, einen Footer sowie einen Inhaltsteil haben. Der Header soll über die komplette Seitenbreite gehen. Der Inhalt und der Footer sollen jedoch beide eine fixe Breite haben. Nun habe ich versucht dieses Problem mit einem Wrapper zu lösen. Dieser steht außerhalb des Headers und umschließt somit den Inhalt und den Footer. Da der Wrapper (um den Footer am Ende der Seite zu halten) eine Höhe von 100% haben muss, verschiebt sich der Footer um die 300px Höhe des Headers nach unten, was natürlich unschön ist. Meine eigentliche Intention ist das der Footer immer am Ende der Seite steht und bei längeren Seiten nur sichtbar ist wenn man ganz nach unten scrollt. HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Wenn du schon neue Elemente wie "header" oder "footer" nutzt, solltest du auch den HTML5-Doctype nutzen.
Zur Lösung deines Problems: Sticky-Footer ist das Zauberwort. (vgl. Sticky Footer | CSS-Tricks) |
|
Bitte keine Crosspostings erstellen -> Header/Footer Problem
|
Entschuldigt das Crossposting.
Diese Lösungen haben mir beide nicht weitergeholfen. Mein Wrapper bwz. mein Inhalt soll eine feste Größe besitzen und nicht je nach Fenstergröße zentriert werden. Daher funktioniert der flexible Footer nicht... Gibt es noch weitere Ideen? |
Morgen,
Zitat:
Viele Grüße, lotti |
Nein das Prinzip ist genau so. Du hast schon recht, der Container für Inhalt und Footer ist der einzige der zentriert ist und eine feste Pixelbreite hat. Dieses Prinzip soll auch so bleiben, es soll lediglich der Footer richtig funktionieren.
Vielleicht steh ich grade auf dem Schlauch aber wie kann ich das "problemlos anpassen"? |
Morgen,
Zitat:
Viele Grüße, lotti |
Wahrscheinlich hast du die margins nicht an deine Verhältnisse angepasst oder etwas anderes übersehen, denn so wie lottikarotti es gezeigt hat ist das gängige Vorgehen in diesem Fall. Bitte zeige uns dann mal deinen Code, den du verwendest hast.
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 14:01 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023