Problem mit Footer und durchgängiger background-Grafik @ tutorials.de: Tutorials, Forum & Hilfe

julchen · 22.06.09 16:13

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

just-click · 22.06.09 16:33

Ein DIV mit width=100% tuts da nicht?

Maik · 22.06.09 17:35

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 · 23.06.09 13:41

Zitat von Maik

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.

Das wäre dann die einfachste Umsetzung:

Code :

<body>
    <div id="box" [b]class="clearfix"[/b]> ... </div>
    [b]<div id="footer">
        <div id="footerInner"> ... </div>
    </div>[/b]
</body>

Code 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

julchen · 26.06.09 09:11

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.

Maik · 26.06.09 12:34

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

julchen · 29.06.09 08:35

Hallo,
was muss ich denn dann ändern, ausser der Höhe von 120 auf 150px?

Gruss
Julchen

Maik · 29.06.09 12:09

Mahlzeit

Von einer 120px-Höhe ausgehend:

Code :

#footer {
position:absolute;
width:100%;
[B]height:120px;[/B]
[B]margin-top:-120px;[/B]
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%;
[B]height:150px;[/B]
[B]margin-top:-150px;[/B]
background-color:#999999;
}
 
#footer_innen {
margin:0 auto;
width:925px;
[B]height:130px;[/B]
text-align:center;
[B]line-height:130px;[/B]
padding:10px 0px 10px 0px;
background-image:url(../images/footer_gras.jpg);
background-repeat:no-repeat;
}

mfg Maik

julchen · 29.06.09 13:04

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

Maik · 29.06.09 13:25

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

julchen · 29.06.09 13:56

Hm,
so richtig klappts nicht. Ich hab den Inneren Abstand von #box_content eingetragen und im Footer ein background-position. Leider ist die Grafik jetzt hinter der #box_content. Mit z-index kann ich da aber nix machen, da #box_content kein position zugewiesen ist.

Noch ne Idee?

Gruss
Julchen

Maik · 29.06.09 13:59

Naja, das Hintergrundbild hast du nun komplett aus dem Anzeigebereich "verschoben"

Demnach müsste #footer 150px + X hoch sein.

mfg Maik

julchen · 29.06.09 14:22

Hallo,
geht irgendwie nicht. Also das Bild mit dem Gras ist 150px hoch. Der graue Streifen unten soll 80px hoch werden. Wenn ich die Höhe von #footer höher stelle wird das bild mit dem Gras aber immer noch nicht sichtbar.

Gruss
Julchen

Maik · 29.06.09 16:10

Dann nimm mal die Hintergrundpositionierung (top -150px) wieder raus, und setz für #footer eine Höhe von 230px fest.

Einfache Mathematik würd' ich mal behaupten.

Achja, und der "graue Streifen" gehört mit einem Hintergrundbild erzeugt, damit er nicht den vollständigen Footer in der Vertikalen ausfüllt, wie es bei der derzeit verwendeten Hintergrundfarbe der Fall ist.

mfg Maik

julchen · 29.06.09 16:23

Hallo,
jetzt bin ich aber total irritiert. Der graue Hintergrund muss doch über die gesamte Breite gehen.

So funktioniert es auch nicht. Jetzt krieg ich nix mehr angezeigt.

Gruss
Julchen

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Abschließende footer Grafik am Ende funktioniert nicht

Footer Background in FF nicht sichtbar

grafik mit background-repeat angeben?

[Problem] Background-Grafik nur bis 100%

Grafik Ald Background

E-Mail:

Abonnieren Abbestellen