Footer auffüllen

  • Hi Leute,


    ich steh vor folgendem Problem. Ich hab einen Footer, der die ganze Seite ausfüllt. (width:100%;)
    Auf der linken Seite befindet sich eine PNG-Grafik. Die PNG-Grafik hat eine Stelle, an welcher sie transparent ist und das muss sie auch bleiben.


    Also folgende Ausgangslage:
    Die PNG-Grafik ist 300px breit und 80px hoch.
    Der restliche Bereich des Footers (ihr erinnert euch, dass der Footer auf 100% Breite gezogen wird) soll mit einer Farbe aufgefüllt werden.


    Das Problem wo dabei entsteht ist also, dass man nicht weiß wie groß der restliche Bereich ist. (Jeder Benutzer kann ja eine andere Auflösung verwenden)


    Hat jemand eine Idee wie ich das umsetzen kann? Wegen mir auch ein dreckiger Workaround, hauptsache es funktioniert browserunabhängig. Bei IE ab IE7+.


    Leute ich bin an verzweifeln! Danke im voraus für eure Hilfe!


    Viele Grüße
    CroWeHaMmeR

  • Nein, so geht es auch nicht, weil dann der gesamte Footer die Hintergrundfarbe annimmt und die transparente Stelle des PNGs verschwindet.


    Hier ein Beispiel, wie man sich das vorstellen kann, was für einen Footer ich gerne hätte. Natürlich ist mein Originalfooter grafisch etwas schöner, kann ich aber aus betriebsrelevanten Gründen nicht zeigen.

  • Versuche mal folgendes:
    Gib dem footer (jetzt mit background-color) einen margin-left-Wert entsprechend der Grafikbreite und positioniere ihn mit position: relative.
    Innerhalb des footers füge die Grafik ein mit absoluter Positionierung zum footer, so dass die Grafik links neben dem Footer steht (im "Margin-Bereich").

  • Kannst du mir mal den Codeschnipsel für das CSS schicken? Ich kann dir noch nicht ganze folgen. Wenn ich den footer mit margin-left um die 300px verschiebe, die von der Grafik eingenommen werden, weiß ich doch nicht wie viel Prozent es sind bis ans Ende der Seite. Vielleicht verstehe ich dich auch nicht richtig, darum die bitte um die paar Zeilen Code.


    Zur Unterstützung der bisherige Schnipsel:


    HTML
    1. #footer {
    2. width: 100%;
    3. height: 81px;
    4. position: fixed;
    5. left: 0;
    6. bottom: 0;
    7. margin: 0;
    8. background: url(footer.png) no-repeat left center #343434;
    9. }
  • Kommando zurück, funktioniert so auch nicht, da dann width > 100%.


    Folgender Vorschalg:



    Code
    1. <div id="footer">
    2. <img src="footer.png" alt="" border="0" height="81" width="81">
    3. </div>
  • Was spricht dagegen die Grafikauf ca. 2000px zu verbreitern? Somit hast du alle Probleme gelöst. Breiter als 2000px sollte eine Webseite nicht sein. Oder? Wobei ich nicht so richtig verstehe was die Transparents soll.


    So würde es gehen:


    Wobei #footer nicht formatiert werden muss.


    Oder so?


    Nachtrag: Wenn du keine Pseudoelemente verwnden möchtest, dann nimm Nachfahrselektoren:

  • Hey,


    vielen Dank! Hat tatsächlich geklappt und funktioniert auf jeden Fall für IE7+. Darunter teste ich nichts mehr.
    Hab erstmal Lösungsansatz 1 genommen. Sollten damit Probleme entstehen, werd ich den anderen Lösungsansätzen noch genauer auf den Zahn fühlen.


    Viele Grüße
    CroWeHaMmeR