✔ Problem mit Footer und durchgängiger background-Grafik

J

julchen

Erfahrenes Mitglied
Hallo,
ich erstelle eine Website die im oberen Bereich eine Fensterfüllende Hintergrundfarbe bekommt und das gleich soll nochmals im Footer so sein. Für den oberen Bereich ist dieses kein Problem, da ich für den gesamten body eine background-Grafik definiert hab. Jetzt bin ich aber ein bisschen am rätseln wie ich das für meinen footer erstellen soll, dass dieser links und rechts vom Inhalt ebenfalls in diesem Falle eine durchgängige graue Farbe bekommt.

siehe hier: http://www.assedo.de/login/forster/index.html

Gruss
julchen
 
Seh ich auch so, wie mein Vorredner.

Du mußt dir dann blos eine Alternative überlegen, wie du den Footer im umschliessenden Block #box (derzeit 925px breit) auf 100% im Viewport streckst.

mfg Maik
 
Maik hat gesagt.:
Du mußt dir dann blos eine Alternative überlegen, wie du den Footer im umschliessenden Block #box (derzeit 925px breit) auf 100% im Viewport streckst.
Zum Vergrößern anklicken....
Das wäre dann die einfachste Umsetzung:
Code: 
<body>
    <div id="box" class="clearfix"> ... </div>
    <div id="footer">
        <div id="footerInner"> ... </div>
    </div>
</body>
CSS: 
#footer {
position:absolute;
width:100%;
height:80px;
margin-top:-80px;
background-image:url(...);
}
#footerInner {
margin:0 auto;
width:925px;
height:60px;
text-align:center;
line-height:40px;
padding:10px 0px 10px 0px;
background-color:#999999;

mfg Maik
 
Hallo Maik,
irgendwie krieg ich das Hintergrundbild nicht positioniert. Ausserdem gibt es ein Problem mit dem Inhalt. Der Inhaltsbereich wird nicht ganz angezeigt und verschwindet hinter der Grafik.

Kannst du bitte nochmal einen Blick drauf werfen.

Danke.
 
Zuletzt bearbeitet:
Was die "Position des Hintergrundbildes" betrifft, hast du da zum einen offensichtlich die tatsächliche Grafikhöhe (=150px) nicht berücksichtigt (oder sind die 120px für #footer_innen so gewünscht, um den "iStockphoto"-Schriftzug aus dem Anzeigebereich zu verbannen?), und zum zweiten bei der Höhenangabe für #footer den oberen und unteren Innenabstand von #footer_innen außer Acht gelassen, weshalb der graue Hintergrund nicht bis zum unteren Fensterrand reicht.

Wenn für den Block #box_content ein unterer Innenabstand festgelegt wird, der der Footerhöhe entspricht, "unterwandert" sein Inhalt nicht mehr den Footerbereich.

mfg Maik
 
Mahlzeit :)

  • Von einer 120px-Höhe ausgehend:
Code: 
#footer {
position:absolute;
width:100%;
height:120px;
margin-top:-120px;
background-color:#999999;
}

#footer_innen {
margin:0 auto;
width:925px;
height:100px;
text-align:center;
line-height:100px;
padding:10px 0px 10px 0px;
background-image:url(../images/footer_gras.jpg);
background-repeat:no-repeat;
}
  • Von einer 150px-Höhe ausgehend:
Code: 
#footer {
position:absolute;
width:100%;
height:150px;
margin-top:-150px;
background-color:#999999;
}

#footer_innen {
margin:0 auto;
width:925px;
height:130px;
text-align:center;
line-height:130px;
padding:10px 0px 10px 0px;
background-image:url(../images/footer_gras.jpg);
background-repeat:no-repeat;
}

mfg Maik
 
Hallo,
das haut so aber nicht hin. Das Gras soll über dem grauen Balken sein. Im grauen Balken steht noch was. Dann sollte der reine Inhaltsbereich natürlich nicht hinter dem Bild mit dem Gras verschwinden.

Gruss
julchen
 
Das haut "grundsätzlich" sehr wohl so hin.

Wenn das Hintergrundbild eine andere vertikale Position gegenüber dem "grauen Balken" erhalten soll, steht dir hier background-position zur Verfügung.

Was den Inhalt betrifft, der den Footer "unterwandert", hab ich dir letzte Woche auch schon was zu geraten.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück