nicht angemeldet
Zentrierte Seite. Probleme beim vertikalen verkleinern.
Hallo,
ich habe eine Webseite gebaut die in der Grundstruktur so aussieht.
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="contentWithMenu" class="clearer">
<div id="menuLeft">
</div>
<div id="content">
</div>
</div>
</div>
<div id="footer">
</div>
<!-- ###DOCUMENT_BODY### stop-->
</body>
Es gibt also zwei große Blöcke. Den Wrapper oben und den Footer unten. Der Footer ist eine Grafik welche immer am unteren Rand zu sehen sein soll. Deshalb ist der Wrapper auf min-height:100% gesetzt. Der Footer hat dann ein margin-top minus der Höhe des Footers. Und er ist relativ positioniert. Damit bleibt er am unteren Rand.
Damit die Webseite einen Hintergrund hat hat der Body ein horizontal zentriertes Hintergrundbild. Es sieht also wie eine ganz normale Webseite aus. Und die Grafik unten ist immer am unteren Rand der Seite. Es sei denn sie wird darüber hinausgeschoben.
Jetzt das Problem...
Die Footergrafik bzw der Footer sind 1300px breit und der Wrapper 1000px.
Wenn der Browser horizontal zusammengeschoben wird und die sichtbare Breite 1300px unterschreitet verschiebt sich der Footer aus seiner Position. Wenn man unter 1000px kommt dann verschiebt sich die Hintergrundgrafik des Bodys. Das letztere wäre nicht so schlimm wenn in dieser Hintergrundgrafik nicht das Menü, welches rechts im Wrapper liegt einen anderen Hintergrund hat. Dieser Hintergrund verschiebt sich also sichtbar.
Jetzt ist meine Frage wie ich das lösen könnte?
Danke!
Sebastian
-
Eine Anmerkung. Das Menü hat keinen eigenen Hintergrund sondern das Hintergrundbild des Bodys ist zweifarbig. Ein Teil für das Menü, der Rest für den Contentbereich.
-
Scheinbar klappts mit:
#footer { background-color: transparent; background-image: url("../images/ende-01.png"); background-position: center center; background-repeat: no-repeat; height: auto !important; margin: -280px auto 0; max-width: 1300px; min-height: 280px; position: relative; }
-