Footer auffüllen

CroweHammer

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

sejuma

Ungestestet, sollte aber funktionieren:
Verwende anstelle der background-color ein background-image in Form einer kleinen, sich kachelnden Grafik, ähnlich hier.

Positioniere diese dann mit der Eigenschaft background-position und

Code

repeat: x-repeat;

threadi

Nein, das wird so geschrieben:

Code

background-repeat: repeat-x;

CroweHammer

Mann kann nicht im gleichen Zug background-position und background-repeat verwenden. Geht also nicht auf dem Weg. Andere Ideen, Lösungsvorschläge? Brauch dringend eine akzeptable Lösung

djheke

Bin mir nicht so sicher, aber es sollte so gehen.

Code

background:url(bild.png) no-repeat left center #eeeeeea

Wenn nicht, dann zeige mal eine Beispielseite.

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.

sejuma

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").

CroweHammer

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

#footer {
    width: 100%;
    height: 81px;
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    background: url(footer.png) no-repeat left center #343434;
}

sejuma

Kommando zurück, funktioniert so auch nicht, da dann width > 100%.

Folgender Vorschalg:

Code

#footer {
    width: 100%;
    height: 81px;
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    background: #343434;
}


#footer img {
background: transparent;
display: block;
height: 81px;
width: 81px;
}

Alles anzeigen

Code

<div id="footer">
<img src="footer.png" alt="" border="0" height="81" width="81">
</div>

CroweHammer

Geht auch nicht. Die transparente Stelle des PNGs wird wieder ausgefüllt

sejuma

Kannst du das mal bitte online stellen und einen Link posten?

djheke

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:

Code

#links {
 height:80px;
 width:300px;
 float:left;
 background: url(footer_online.png) no-repeat 0 0;
}


#rechts {
 height:80px;
 margin-left:300px;
 background:#000;
}




<div id="footer">
<div id="links"></div>
<div id="rechts"></div>
</div>

Alles anzeigen

Wobei #footer nicht formatiert werden muss.

Oder so?

Code

#footer {
 position:relative;
 height:80px;
 width:100%;
 float:left;
 background: url(footer_online.png) no-repeat 0 0 ;
}


#footer:after {
 content:"";
 position:absolute;
 left:300px;
 top:0;
 bottom:0;
 right:0;
 background:#333;
}


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

Alles anzeigen

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

Code

#footer {
 position:relative;
 height:80px;
 width:100%;
 float:left;
 background: url(footer_online.png) no-repeat 0 0 ;
}


#footer span {
 content:"";
 position:absolute;
 left:300px;
 top:0;
 bottom:0;
 right:0;
 background:#333;
}


<div id="footer"><span></span>Dein Text</div>

Alles anzeigen

CroweHammer

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

Footer auffüllen

Tags

Benutzer online in diesem Thema