✔ Problem mit Footer und durchgängiger background-Grafik

[julchen]

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]

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

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

mfg Maik

 

[julchen]

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]

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]

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

 

[Maik]

Bitte gucken, wie gut das funktioniert

mfg Maik

 

[Maik]

Nachtrag: Da der Text wohl weiterhin im "grauen Balken", und nicht im "Gras" erscheinen soll, sind von meinem hochgeladenen Demo ausgehend, in dem ich mich nur um die "grafische" Umsetzung gekümmert hatte, natürlich noch ein paar Umstellungen u. Ergänzungen im Code nötig:

<div id="footer">
     <div id="footer_innen"></div>
     <p>...</p>
</div>

#footer {
position:absolute;
width:100%;
height:230px;
margin-top:-230px;
background: url(999999.png) left bottom repeat-x;
text-align:center;
}
#footer p {
line-height:80px;
}
#footer_innen {
margin:0 auto;
width:925px;
height:150px;
padding:0;
background-image:url(../images/footer_gras.jpg);
background-repeat:no-repeat;
}

mfg Maik

 

[Maik]

Moin,

ich hab da noch einen weiteren Tipp für dich, da der "Footer-Text" zweizeilig daherkommt:

<div id="footer">
     <div id="footer_innen"></div>
     <p> ... <br /> ... </p>
</div>

#footer p { line-height:40px; }

mfg Maik

 

[julchen]

Hallo Maik,
ja danke für deine Hilfe!

Mit dem zweizeiligen hab ich dann schon geändert, nur noch nicht hochgeladen.

Besten Dank - Julchen

 

[julchen]

@Maik AW: Problem mit Footer und durchgängiger background Grafik

Hallo Maik,
kurze Frage noch zu dem Thread.

Wenn ich jetzt das layout so umbasteln wollte, dass sich die Seite immer an die aktuelle Höhe des Browserfensters anpasst, so dass Header und Footer fix sind und im reinen Inhaltsbereich ein iframe. Die Seite soll sich also nicht im ganzen nach unten scrollen lassen sondern nur der reine Inhaltsbereich.

Wie kann ich das ganze ohne viel Aufwand ändern?

Kannst du mir da bitte kurz helfen.

Ich hab mir mal ein anderes Beispiel erstellt, allerdings hab da halt das Problem mit dem Overflow in der Mitte. Ich kann dem ja eigentlich keinen festen Wert vergeben, da ich nicht weiss, welche Auflösung der User hat. Somit geht das overflow nicht. Wie kann ich das einrichten, dass er auf jeden Fall immer den Top und Footer mit den festen Höhen hat, der mittlere Bereich sich dem halt anpasst. Oder hast du eine bessere Idee?

http://www.assedo.de/login/test/index_test.html

Gruss
Julchen