Druckbare Version
Hallo zusammen,
ich hoffe Ihr könnt mir helfen (bin noch neu auf dem Gebiet).
Wie kann ich die Fusszeile fixieren. Ich habe per CSS die Art auf Fixed gestellt. Leider ist der Effekt nicht wie gewünscht. Es wird auch den Left, Main und Right-divs Daten abgeschnitten. Es fehlt ein Teil.
Wie bekomme ist es hin, dass auch dieser Teil mit angezeigt wird?
Also prinzipiell ist es so, das wenn man eine Fusszeile hat die per CSS fixiert ist, man bei dem restlichen Content am unteren Bereich ein margin oder padding in der Höhe angeben muss, wie hoch die Fusszeile ist, sonst liegt der Inhalt dahinter und ist quasi unsichtbar. Man sollte dabei auch genau darauf achten, auf welchem z-index sich die einzelnen Elemente befinden und ggf. manuell Anpassungen vornehmen, sonst kann es zu unschönen Effekten kommen (Links nicht mehr anklickbar usw.)
eine vielfach bewährte Technik um die Fußzeile auch bei wenig Text immer unten zu halten ist Foot Sticker Alt.
Google mal danach.
vielen Dank für Eure Antworten.
ich habe es nun mit margin hinbekommen.
Mir fiel aber nun noch etwas auf. Wenn die Spalten left, main und right kaum einen Inhalt haben dann wird der Container bzw. der Wrapper an der untersten Stelle beendet.
Ich habe somit eine Lücke zwischen dem Wrapper und der Fusszeile (erkenne dies u.a. daran das der Wrapperhintergrund nicht durchgängig repeated wird. Kann ich dem Container irgendwie beibringen das er immer über die 100 % der Bildschirmauflösung gehen soll. Ich bekomme dies irgendwie nicht hin. Habe schon dem Wrapper, Main usw. 100 % eingetragen aber nichts hilft.
für gleichlange Spalten gibt es Faux Columns.Zitat:
Zitat von Broichi
Alle Vorfahren bin hinauf nach html brauchen height:100%.Zitat:
Zitat von Broichi
100% heißt immer 100% von was? Hat der Vorfahre den Initialwert height:auto; kann 100% nicht errechnet werden und fällt auf height:auto zurück.
Damit der Container auch bei längerem Inhalt mitwächst braucht ein Element min-height.
Aber ohne Link zum Problem kann man nur raten.
Hallo wotank,
vielen Dank für Deine Hilfe.
min-height hatte ich auch schon versucht. Dies hatte aber alles nichts gebracht.
Dein Tip mit html 100% hat geholfen. Ich hatte die 100% lediglich auf den Body angewendet.
Ich habe jetzt html und Body auf 100 % und den Wrapper auf min-height: 100 %.
Code:/**
Layout
**/
html
{
height:100%;
}
body
{
height:100%;
background:#b7f6a3 url("tl_files/KGS/Hintergrund Main.png") center top repeat;
}
#wrapper
{
bottom:40px;
background:url("tl_files/KGS/wrapper_bg.png") left top repeat-y;
min-height:100%
}
#header
{
background:url("tl_files/KGS/header_bg.png") left top no-repeat;
}
.header_grafik
{
left:27px;
top:24px;
position:absolute;
border:1px solid #000000;
}
#left
{
}
#main
{
margin-top:17px;
margin-bottom:40px;
}
#top_image
{
float:right;
margin:0;
padding:0;
}
#footer
{
width:994px;
height:40px;
bottom:0;
position:fixed;
background:url("tl_files/KGS/footer_bg.png") left top no-repeat;
}
#footer .inside
{
padding-top:3px;
text-align:center;
}