Problem mit CSS Layout

[nohfreak]

Moin Leute,

ich hab mal wieder ein kleines Problemchen, mit meinem CSS-Layout.

http://www.easy-schoolwork.de/Design3/Design.html

Da sollte der Footer eigentlich nur 81 Pixel hoch sein, und ganz unten angeklebt sein. Das sollte durch folgenden CSS Code erreicht werden:

.rahmen
 {
  width: 100%;
  margin: 0px;
  position: relative;
  min-height: 100%;
  padding-bottom: 90px;

 }

*html .rahmen
  {
   height: 100%;
  }

div.footer
  {
    background: url(../gfx/gifjpg/footer_bg.jpg);
    position: relative;
    margin-top: -81px;
  } 

Im Rahmen-Div ist dann der ganze Content, quasi alles außer dem Footer. Der Footer ist außerhalb des Rahmendivs. Der Footer hat eine top-margin von -81px, damit er genau seiner Höhe entsprechend in den Rahmen hereinragt. Der Rahmen hat eine Höhe von 100%, sodass er immer das volle Bild einnimmt und der Footer eben nur seine 81 px.

Ich hab ehrlich gesagt keine Ahnung wieso das hier nicht funktioniert. Bei einem anderen Projekt habe ich es exakt genauso gemacht und da hat es astrein geklappt. Ich hab 2 Stunden lang die beiden verglichen und nach Unterschieden gesucht, ich find aber einfach den verdammten Fehler nicht.

Danke schonmals für die Hilfe!

[IchBinIch]

mit den 100% ist ja eigentlich ein bekanntes Problem. Zeig mal die Seite auf der es funktioniert, so wie du es haben willst.

[mcmurphy]

html, body {height:100%;} ?

Ich würde es so machen:
body {position; relative; top:0px; left:0px;}
.footer {position:absolute; bottom:0px; left:0px; }
der Rahmen bräuchte dann noch padding-bottom:81px; damit der footer nicht den unteren Teil des Rahmen überdeckt.

habe ich jetzt nicht getestet, müsste aber klappen...

[nohfreak]

http://www.easy-schoolwork.de/Design2/Design.html

Dort funktioniert es so, wie es soll. Der Code ist aber 100% identisch mit dem obigen Problemfall, abgesehen von der Höhe des Footers. Der is hier nur 52 px glaube ich, bei dem anderen aber 81 px.


Was ich im Grunde erreichen will ist, dass der Footer immer ganz unten iist, und der Rahmen 100% der Höhe einnimmt. Wie es hier in dem funktionierenden Layout der Fall ist ( Der Footer ist übrigends auch dann immernoch ganz unten, wenn ich den Content-Div in der Mitte leermache ).

Ich versteh einfach nicht worin der Fehler liegt. :>

Ich werd mal das von McMurphy testen und dann schauen ob das damit funktioniert.

[nohfreak]

Ah, danke Murph. Ich hab nun mal das "html, body {height:100%;}" dazugepackt. Nun schaut es wie folgt aus:

http://www.easy-schoolwork.de/Design3/Design.html

Problem ist aber immernoch, dass der Footer nicht mit im Bild ist. Das sollte doch eigentlich durch das "margin-top: -81px" gewährleistet sein. Woran liegt das nun noch, dass es nich mit im Bildchen ist ? :>

[mcmurphy]

haste mal zum testen einen Blindtext eingesetzt?
Also das der Content die Seite ausfüllt.
Oder als gegenprobe nimm doch mal den text aus der anderen Seite raus (wenn du darauf zugriff hast)

[mcmurphy]

Sehe gerade das die Seite ja jetzt funktioniert (bei FF 2)....
Woran lags?

[nohfreak]

Öhm, ja, ich hab zugriff auf die, bei der es funktioniert. Hab ich ja schließlich auch zusammengeschustert. Wenn ich den Text da rausnehme hat immernoch alles genau seine Richtigkeit.

Also bei mir funktionierts immernoch nicht, wie es soll. Der Footer ist jez zwar ganz unten, aber nichtmehr im Bild. Da nun alles zusammen ( body, rahmen ) eine Höhe von 100% hat müsste es logischerweise das ganze Bild ausfüllen - tut es auch. Leider zeigt aus irgendwelchen Gründen das "margin-top: -81 px;" bei dem div.footer keine Wirkung, denn aufgrund der negativen Margin müsste er ja dann 81 px ins Bild ragen, und nicht erst durch Scrollen zu sehen sein.

Im Grunde ist das kein Beinbruch, bloß ich kapier einfach nicht, warum das nicht geht. Bei dem anderen Beispiel funktioniert es ( Auch wenn ich den Text rausnehme ), da ich den Code ja von dort rüberkopiert habe, wozu etwas 2x machen, das man schonmal gemacht hat ? :>

[dani_o]

das habe ich mit einem kleinen trick mittels javascript gelöst.
ich haber per js die anzeigegröße des fensters ermittelt und
dementsprechend die layer mit pixelangaben positioniert ;-)

[arkos]

aber bevor du nun mit js anfängst, nimm dies (man hab ich heute zeit )

<html>
<head>
<style type="text/css">

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 100%;
}
#wrapper {
	width: 100%;
	height: 100%;
	background-color: #cccccc;
}

#oben_eins {
	width: 100%;
	height: 40px;
	background-color: #eeeeee;
}
#oben_zwei {
	width: 100%;
	height: 40px;
	background-color: #999999;
}
#ganz_unten
{
	position: absolute;
	bottom: 0px;
	background-color: #cc0000;
	width: 100%;
	height: 81px; 
}

</style>
</head>
<body>

<div id="wrapper">


	<div id="oben_eins">
	</div>

	<div id="oben_zwei">
	</div>

	<div id="ganz_unten">
	hah, bin wohl 81px gro&szlig;
	</div>

</div>
	
</body>
</html>

[mcmurphy]

Machs wie arkos sagt - positioniere Footer auch immer mit position ...
@arkos
Aber braucht der wrapper dann nicht noch
position:relative; top:0px;
left:0px;
?

[arkos]

Original geschrieben von mcmurphy

@arkos
Aber braucht der wrapper dann nicht noch
position:relative; top:0px;
left:0px;
?

hatte ich auch erst vermutete, da postion: absolute sich nur dann aufs eltern-element bezieht. aber wenn ich den letzten satz von selfhtml richtig verstehe, brauche ich es in dem falle nicht, da es ok ist, wenn sich mein footer statt aufm wrapper auf body bezieht:

selfhtml.de
Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.

LINK SELFHTML

[mcmurphy]

footer statt aufm wrapper auf body bezieht

dann haste natürlich recht...

[nohfreak]

Sehr cool, vielen, vielen, vielen Dank! Ich hab zwar immernochkeine Ahnung, wieso meine Lösung nicht funktionieren wollte, aber das is mir jez auch wurscht, weil ich ja jez eine hab die funktioniert.

Danke vielmals, an alle, die probiert haben mir behilflich zu sein, insbesondere aber an arkos!

[nohfreak]

Kommando zurück. Tut doch nich so wie es soll. Füll mal eins der oberen Divs mit mehr Inhalt, als ins Fensterchen reinpasst. :>