[Footer] repeat-x und positionieren

[leonard]

Hallo selfhtml-forum,
Ich habe eine Frage bezüglich meines Footers :)

Problemseite: testseite
Stylesheet: stylesheet

Und zwar geht es um folgendes:

Ich würde den Footer gerne wie den Header per repeat-x beidseitig verlängern, jedoch habe ich im <div> vom Footer ja schon als background-image den Footer ansich eingebunden.
Wie kann ich denn jetzt noch die zu verlängernde Grafik einbauen und per repeat-x verlängern?

Würde mich über jede Antwort freuen, Grüße
Leonard

[leC4ISE|2]

Ich würde den Footer gerne wie den Header per repeat-x beidseitig verlängern, jedoch habe ich im <div> vom Footer ja schon als background-image den Footer ansich eingebunden.
Wie kann ich denn jetzt noch die zu verlängernde Grafik einbauen und per repeat-x verlängern?

Hallo Leonard,

wie wäre es denn wenn du einfach deinen footer-div in einen weiteren div einbettest? dem ersten div teilst du deine verlängerung des footers zu, also nur dieser blaue hintergrund (der kleinere an den seiten) und der eingebette div erhält dann dein eigentliches footerimage.

<div class="footerbg">
    <div class="footer">
    </div>
</div>

hoffe du hast verstanden worauf ich hinauswill.

viel erfolg noch beim weiterbasteln ;)

[leonard]

Hallo leC4ISE|2,

danke schonmal für deine nette Hilfe :)
Ich habe jetzt mal versucht deinen Rat in die Tat umzusetzen, leider ohne Erfolg.
Irgendwie tut sich rein gar nichts, hier der Link: test
Grüße
Leonard

[leC4ISE|2]

Sorry erst einmal, hatte nicht gesehen, dass du mit ids arbeitest. Mein Fehler. Also muss es folgendermaßen heißen.

  
<div id="footer_bg">  
   <div id="footer"> </div>  
</div>

Aber das Stylesheet bedarf auch noch einiger Ausbesserungen. Erst einmal gehört vor "footer_bg" nun ein "#". Wenn du mit Klassen arbeitest, dann ein ".", solange es kein Standard-HTML-Element ist, wie zum Beispiel td.
Dein "footer_bg" sollte genauso breit sein wie die komplette Seite, also 100%, da die Breite sonst automatisch ermittelt wird und in deinem Fall nur die Breite des eingebetteten divs beträgt. text-align sollte zentriert sein. Außerdem und ganz wichtig ist, dass du erst den div von "page" schließt, da dieser nur eine Gesamtbreite von 996px zulässt. Dein footer muss außerhalb platziert sein.

  
<div id="page">  
<!--Hier steht der restliche Content-->  
</div>  
<div id="footer_bg">  
   <div id="footer"> </div>  
</div>  
</body>  
</html>  

  
#footer {  
position: fixed;  
bottom: 0px;  
background-image: url(images/footer.jpg);  
width: 996px;  
height: 54px;  
}  
  
#footer_bg {  
background-image: url(images/bg_bottom.jpg);  
height: 54px;  
width: 100%;  
background-repeat: repeat-x;  
text-align: center;  
}  

Versuch es jetzt am besten nochmal ;) sollte soweit funktionieren dann.

MfG

[leonard]

Dann sieht das ganze so aus: test

[leC4ISE|2]

Dann sieht das ganze so aus: test

  
#footer {  
    background-image: url(images/footer.jpg);  
    width: 996px;  
    bottom: 0px;  
    height: 54px;  
}  
#footer_bg {  
    background-image: url(images/bg_bottom.jpg);  
    width: 100%;  
    bottom: 0px;  
    background-repeat: repeat-x;  
    height: 54px;  
    text-align: center;  
    position: fixed;  
}  

Habs selber nochmal ausprobiert, so funktionierts ;).

MfG

[leonard]

Also irgendwie klebt der bei mir immer noch an der linken Seite fest.
Korrigier mich bitte wenn ich Mist gebaut habe :)

Grüße
Leonard