Fußzeile -> doch Probleme

Guten Morgen,

da bei wenig Inhalt oder hoher Bildschirmauflösung meine Seite in der Luft „hängt“, habe ich eine Fußzeile gemacht, welche am unteren Rand des Browsers stehen soll.

Funktioniert das bei jedem? Geht es besser?
Beim untersten Rahmen muss man immer noch scrollen. Wie kann man das noch ändern?

http://elpixo.de/testfuss/impressum.php

css

[code]* html #alles {height:100%;
}
html {height:100%;
}
body {height:100%;
background-color:#eeeeee;
margin:0;
}

#alles {position:relative;
min-height:100%;
width:1000px;
margin:0 auto 6px auto;
border-top:2px solid #ff0000;
border-right:2px solid #ff0000;
border-left:2px solid #ff0000;
background:url(bilder/alles.gif) repeat-y;
}

/### Inhalt ###/
#inhalt {width:800px;
text-align:justify;
margin-left:160px;
padding:10px 20px 45px 20px;
min-height:320px;
}

/### Fuss ###/
#fuss {clear:both;
width:1000px;
margin:0 auto;
background:url(bilder/hauptmenue.jpg);
background-position:center;
text-align:center;
line-height:35px;
border:2px solid #ff0000;
position:relative;
margin-top:-45px;
}
#fuss p {color:#ffffff;
margin:0;}
#fusslink {text-decoration:underline;
color:#ffffff;
}
#fusslink:hover {text-decoration:none;
color:#ff0000;
}[/code]
html

[code]

Inhalt

Copyright ©2009 bei ElPixO.de | Impressum

[/code] PS: Die aktiven Links werden bei mir durch die "Body ID"-Methode angezeigt. Jedoch funktioniert das nicht beim Impressum in der Fußzeile. Vielleicht kann mir da auch jemand helfen.

Bei mir ist deine Fußzeile ganz unten, auch mit 50% herausgezoomter Ansicht. Totzdem muss ich noch etwas scrollen wegen dem roten Rahmen.

Danke für’s Testen.

Aber warum macht der rote Rahmen Probleme? Wie kann ich dem entgegnen?

Könnte daran liegen, daß #alles bei mindestens 100% Höhe noch
einen Rahmen oben von 2px hat. Das ergibt zusammen etwas
mehr als 100%. Kannst ja mal testweise weglassen, um zu
gucken, ob es daran liegt …

[quote=“hoffmann”]Könnte daran liegen, daß #alles bei mindestens 100% Höhe noch
einen Rahmen oben von 2px hat. Das ergibt zusammen etwas
mehr als 100%. Kannst ja mal testweise weglassen, um zu
gucken, ob es daran liegt …[/quote]

Perfekt. Das war’s. Danke.

Ich habe den oberen Rahmen bei #alles entfernt und ihn bei #kopf ergänzt. Jetzt ist es genau so, wie ich es wollte.

Leider macht die Fußzeile doch Probleme im IE8 und FF. Die Fußzeile steht zwar unten, wie gewollt. Aber wenn bei einer scrollbaren Seite der Inhalt kürzer ist, als das Menü, wird die Hintergrundgrafik (in #alles) nur bis zur Höhe des Inhaltes wiederholt. Sprich: es fehlt ein Sück bis zum Ende des Menüs. Hoffentlich kann mir jemand helfen.

Dieses Prinzip benutze ich:
http://themaninblue.com/writing/perspective/2005/08/29/

Beispielseite (auch die einzige, bei der es auftritt):
http://www.elpixo.de/fotogalerie/2009/galerie_01.php

HTML-Struktur (symbolisch):

[code]

...
...
...
...
...
[/code]

CSS (Auszug):

[code]* html #alles {height:100%;
}

  • {padding:0;
    font-size:16px;
    font-family:verdana,arial,sans-serif;
    }
    html {height:100%;
    }
    body {height:100%;
    background-color:#eeeeee;
    margin:0;
    }
    div {margin:0;
    }
    #alles {position:relative;
    min-height:100%;
    width:1000px;
    margin:0 auto 6px auto;
    border-right:2px solid #ff0000;
    border-left:2px solid #ff0000;
    background:url(bilder/alles.gif) repeat-y;
    }
    #kopf {width:1000px;
    height:150px;
    margin:0 auto;
    border-top:2px solid #ff0000;
    border-bottom:2px solid #ff0000;
    }
    a #kopfbild {border:none;
    padding:0;
    }
    #menue {float:left;
    width:160px;
    padding:10px 0 45px 0;
    }
    #inhalt {width:800px;
    text-align:justify;
    margin-left:160px;
    padding:10px 20px 45px 20px;
    min-height:320px;
    }
    #fuss {clear:both;
    width:1000px;
    margin:-45px auto 0 auto;
    background:url(bilder/hauptmenue.jpg);
    background-position:center;
    text-align:center;
    line-height:35px;
    border:2px solid #ff0000;
    position:relative;
    }[/code]

Hallo elsner

Das liegt daran das das Menü div ausserhalb des Inhalt div liegt und deshalb nicht mit wächst!Du müsstest das Menü div in den Inhalt div verlagern und dann wächst der Inhalt div mit!

camou !coffee

[quote=“Camou”]Hallo elsner

Das liegt daran das das Menü div ausserhalb des Inhalt div liegt und deshalb nicht mit wächst!Du müsstest das Menü div in den Inhalt div verlagern und dann wächst der Inhalt div mit!

camou !coffee[/quote]
Danke, das ist wahrscheinlich ein Weg zur Besserung. Aber nicht die Lösung des Problems.

Denn die Hintergrundgrafik ist in #alles hinterlegt. In dem div #alles sind die divs #menue und #inhalt nebeneinander gestellt.

Ich würde jetzt erwarten, dass sich die Hintergrundgrafik nach dem längsten Seiteninhalt richtet. Genau so war es jedenfalls, bevor ich die Fußzeile einfügte.

Aber wieso richtet sie sich nur nach #inhalt aus? Das kann ich im CSS einfach nicht erkennen.

das kann deshalb nicht gehen, weil das div fuß nicht in #alles liegt. das hintergrundbild ist ja nur im div #alles, also wird es auch nur in diesem div angezeigt

Das ist klar. In div #fuss gehört die Hintergrundgrafik auch nicht rein. Lediglich die divs #menue und #inhalt werden und sollen damit hinterlegt werden.

Das Problem besteht darin, dass nicht das komplette div #alles gefüllt wird, sondern nur die Höhe des divs #inhalt. Also wird bei einem langen Menü kein Hintergrund dargestellt.

Ich hoffe, dass ist verständlich.

Also das fragliche Hintergrundbild ist vermutlich der rote Strich
auf der linken und rechten Seite?
In der Tat hat der bei Opera zumindest die Höhe von 100%
des Anzeigebereiches, sofern man die Höhe weit genug
aufgezogen bekommt, daß min-height: 100% angewendet
werden. Bei den anderen Galerien kommt das wohl nicht zum
Einsatz, weil dort der Inhalt sowieso 100% der Höhe einnimmt.

Die Ursache dafür dürfte darin liegen, daß das längere Menü
per float aus dem normalen Textfluß genommen wurde.
Vermutlich reicht es, hinter #inhalt ein weiteres leeres
div anzuhängen, dem z.B. eine Klasse ‘clear’ zuzuordnen und
zu formulieren:
div.clear {clear: both} um das float zu beenden.

Natürlich, schliesslich hast du das Menü gefloatet, und es damit aus dem Fluss genommen.

aktuell.de.selfhtml.org/weblog/css-spaltenlayout
Lesen, verstehen, umsetzen.

Hallo elsner

Gib dem div #alles float: left; damit müsste es klappen!

Gruß
Camou !coffee

[quote=“hoffmann”]Die Ursache dafür dürfte darin liegen, daß das längere Menü
per float aus dem normalen Textfluß genommen wurde.
Vermutlich reicht es, hinter #inhalt ein weiteres leeres
div anzuhängen, dem z.B. eine Klasse ‘clear’ zuzuordnen und
zu formulieren:
div.clear {clear: both} um das float zu beenden.[/quote]
Danke für eure Bemühungen. Mit clear:both klappt es wunderbar.