Hi Leute,
ich habe in Contao 3 folgende 2 Probleme mit Sticky Footer.
So soll die Seite ausschauen im Footer. (links andre Farbe als rechts,
und Logo-Bild rechts aus der Mitte raus).
normal.jpg
Im Modul Footer habe ich folgendes HTML angelagt:
HTML-Code:
<div id="ips">© 2012 [nbsp] Kunath Raumkonzept ....... </div>
[COLOR="#FF0000"][B] <div id="last_links"></div>
<div id="last_rechts"><img src="files/images/raumdesign-jena.jpg" ></div>[/B][/COLOR]
Das CSS schaut so aus:
Code:
html { height:100%; margin:0; padding:0; } /*sorgt dafür, das #footer unten platziert wird*/
body {
height:100%;
background-image:url("images/fussbodenleger-jena-weimar.jpg");
background-repeat:repeat-x;
margin:0;
padding:0;
position:relative;
color:#575759;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
overflow-y: scroll;
}
#wrapper {
position:relative;
min-height: 100%;
height: auto !important;
height:100%;
}
/*Padding-bottom entspricht der Höhe des #footer */
#container {
position:relative;
width:970px;
margin-left:auto;
margin-right:auto;
padding-bottom:89px;
}
/*=== Gestaltung des Fußbereiches ===*/
#footer {
width:100%; /*wg absoluter Positionierung ==> #container heigth padding-bottom*/
height:89px;
bottom:0px;
position:absolute;
}
#ips {
position:relative;
height:12px;
text-align:center;
font-size:9px;
margin-top:0px;
margin-bottom:7px;
}
#ips a {
color:#575759;
font-size:9px;
}
#ips a:hover {
color:#eb6b22;
}
#last_links {
background-image:url("images/fussboden-jena.jpg");
background-repeat:repeat-x;
width:55%;
height:70px;
float:left;
}
#last_rechts {
background-image:url("images/fussboden-bau-jena.jpg");
background-repeat:repeat-x;
float:right;
height:70px;
width:45%;
}
#last_rechts img {
margin-left:-2px;
}
Das Layout ist im BA Statisches Layout mit 100% Breite angelegt.
Problem 1:
Wenn ich im BA Responsive Grid aktiviere, dann schaut der Footer so aus:
grid.jpg
Problem 2:
Wenn ich das Browserfester verkleinere, dann
wird das Logo-Bild im Footer auch verändert,
was dann das Layout zerstört:
img-zerstoert.jpg
Wie lassen sich diese Probleme beheben?
Lesezeichen