[CSS] Footer Problem bei langen Seiten

[Mini-Leopard]

Liebe Community!

Ich habe gerade ein Problem mit einem Wordpress Theme.
Und zwar verschwindet mein Footer ins Nirvana, sobald die Seite länger wird.

Hier mein HTML Konstrunkt:

<div id="wrapper">
    <div id="page">
        <div id="content">
            <div id="sidebar">
            </div>
            <?php the_content(); ?>
            <div id="sidebarPiek">
            </div>
        </div>
        <div id="clearFix">
        </div>
    </div>
    <div id="footer">
        <div id="footerPiek">
        </div>
    </div>
</div>

Und hier mein CSS:

#wrapper
{
    width:815px;
    margin-left:auto;
    margin-right:auto;
}
#content
{
    position:absolute;
    width:311px;
    min-height:750px;
    margin-top:15px;
    margin-bottom:70px;
    background-color:#FFFFFF;
    border-left:solid 150px #AA3300;
    border-right:solid 50px #424242;
}
#sidebar
{
    position:absolute;
    display:inline;
    margin-left:-195px;
    text-align:right;
    min-height:750px;
    width:130px;
}
#sidebarPiek
{
    position:absolute;
    display:inline;
    float:left;
    margin-left:-195px;
    border-color:#AA3300 transparent transparent transparent;
    border-style:solid;
    border-width:25px 25px 0px 0px;
    width:0;
    height:0;
    bottom:-25px;
}

Mein Problem habe ich ja schon erläutert…
Kann mir einer von euch dabei helfen?
Hab ich irgendwas übersehen?!

 

[das_micha]

die beschreibung ist etwas dürftig! was meinst du mit "ins nirvana"?
finde den css aufbau der einzelnen elemente etwas "schräg" um nicht zu sagen wenig zielführend.
die kombination aus position: absolute und float left ist auf jeden fall komplett falsch und führt zu keinem ergebnis.
deine margins bei den absolut positionierten elementen sind ebenfalls nur ein "workaround" für die vermutlich fehlende relative positionierung des mutterelements. denn dann könntest du mit top,bottom, left & right arbeiten.

aber ohne ein vollständiges css und ne korrekte beschreibung deines problems ist es schwer was konkretes, abgesehen von den fehlerchen zu machen.
häng mal ein screen mit an auf dem man das problem sieht. Also bitte alle css-anweisungen für die elemente die du bei dir im beispiel html hast.

 

[Mini-Leopard]

Stimmt. War jetzt echt nicht die Vorzeige-Beschreibung
Der Float im sidebarPiek ist natürlich Schwachsinn und hab ich auch weg gemacht.

Ich wollte nicht den kompletten CSS schicken, weil das echt viel Code ist…
Auch wenn es augenscheinlich keinen Unterscheid macht, ob ich Margins nehme, oder left, right… hab ich jetzt das Mutterelement relativ positioniert und dann left benutzt.

Aber auch das löst nun nicht mein eigentliches Problem:
"Ins Nirvana" bedeutet, dass der Footer einfach nicht mehr angezeigt wird.
Also einfach nicht zu sehen. Nirgends auf der ganzen Seite…

Das kommt eben vor, wenn die Seite länger wird. Also über die min-height:750px; hinaus.
Anbei zwei Screens. Einmal mit Footer, wie es sein soll und ein mal ohne Footer, so, wie ist, wenn die Seite länger ist.

 

[das_micha]

erstmal zu der margin-sache.
der effekt ist letzendlich der gleiche. nur verbiegt man dabei dieabsolute positionierung.
ist das mutterelement standardmäßig static so orientiert sich ein absolut positioniertes element am body. dieses kann man umschiffen in dem man es mit margin hinpfuscht, kann aber unter umständen ekelige folgen haben. korrekter ist mutterelement relativ oder absolut und dann mit top usw arbeiten.

zu dem anderen problem kann ich immer noch nix sagen, da immer noch der css teil für wenigstens page und footer fehlt.

probier mal aus spass folgendes: firefox plugin "firebug" installieren. und mit dem firebug den htmlabschnitt im quellcode suchen und dort den footer-div anklicken. die position wird dir dann im screen angezeigt. und dann einfach nochmal den fehlenden css abschnitt. sonst bleibts beim raten.

 

[Mini-Leopard]

Öhm… Klar, hatte gar nicht gesehen, dass ich den Footer CSS vergessen hab :/
Die Page floatet nur links, das ist alles.

Ich benutze kein FireFox. Ich benutze Safari. Und dort gibt es einen klasse Web Inspektor, der an Bord ist und meiner Meinung um einiges besser, als Firebug.

Dadurch habe ich jetzt herausgefunden, dass der Footer Div einfach da bleibt.
Also immer unter diesen 750px min-height…

Ich checke einfach das Problem nicht!

[COLOR=#bb2510][COLOR=#000000]#[/COLOR]page[/COLOR]
{
[COLOR=#bb2510][COLOR=#000000]    [/COLOR]float[COLOR=#000000]:[/COLOR]left[COLOR=#000000];[/COLOR][/COLOR]
}
#footer
{
[COLOR=#bb2510][COLOR=#000000]    [/COLOR]position[COLOR=#000000]:[/COLOR][COLOR=#388d98]relative[/COLOR][COLOR=#000000];[/COLOR][/COLOR]
    [COLOR=#bb2510]width[/COLOR]:[COLOR=#053df5]600[/COLOR][COLOR=#388d98]px[/COLOR];
    [COLOR=#bb2510]height[/COLOR]:[COLOR=#053df5]50[/COLOR][COLOR=#388d98]px[/COLOR];
    [COLOR=#bb2510]top[/COLOR]:[COLOR=#053df5]15[/COLOR][COLOR=#388d98]px[/COLOR];
[COLOR=#bb2510][COLOR=#000000]    [/COLOR]margin-bottom[COLOR=#000000]:[/COLOR][COLOR=#053df5]45[/COLOR][COLOR=#388d98]px[/COLOR][COLOR=#000000];[/COLOR][/COLOR]
[COLOR=#bb2510][COLOR=#000000]    [/COLOR]background-color[COLOR=#000000]:#[/COLOR][COLOR=#053df5]424242[/COLOR][COLOR=#000000];[/COLOR][/COLOR]
    
[COLOR=#bb2510][COLOR=#000000]    [/COLOR]z-index[COLOR=#000000]:[/COLOR][COLOR=#053df5]11[/COLOR][COLOR=#000000];
[/COLOR]    clear[COLOR=#000000]:[/COLOR][COLOR=#388d98]both[/COLOR][COLOR=#000000];[/COLOR][/COLOR]
}
[CODE]

 

[das_micha]

über den webinspektor lässt sich streiten. ist denke ich reine glaubenssache. für mich kommt er nicht im ansatz an den komfort des FB ran und firephp wird glaub ich auch nicht unterstützt.

Du machst einem das leben aber auch echt nicht einfach. oder hat deine page tatsächlich nur ein float left als einzige angabe??
wenn ja, wieso ist es überhaupt float:left? damit wäre es, und so vermute ich ist kein weiteres element rechts oder links neben der page.
page ist ein div und damit ein blockelement was automatisch die volle breite in anspruch nimmt.
da du es überflüssigerweise aus dem seitenfluss genommen hast, ist die wahrscheinlichkeit, das dein footer unter dem pagecontainer liegt sehr hoch besonders durch dein top:15px.
ein wunder das es vorher funktioniert hat.

ich sehe bei dem vergleichsweise simplen aufbau keine notwendigkeit für das umständliche css welches du da gebaut hast.
ich schätze mal ins blaue (was anderes bleibt mir bei den lückenhaften infos nicht übrig), was dir das genick bricht ist der sportliche ehrgeiz die fusszeile (das graue trapez) auf der bg-grafik zu plazieren. wieso machst du den footer nicht so breit wie die page und gibst dem footer den kompletten hintergrund.
damit würdest du dir ne menge ärger ersparen und floaten musst du sowie so nicht was die beiden untereinander liegenden inhalte im wrapper angeht.

die beiden container in page könnte man wiederum floaten, damit müsstest du dir keinen wolf für die positionierung tippen.
der eine links die sidebar rechts und fertig ist der lachs. und nicht vergessen den umfluss am ende auszuschalten.

sschau dir einfach mal den folgenden code an. da funtioniert alles wunderbar und ist bombensicher.
ältere browser könnten ggf ein clearfix brauchen, aber wer heute noch kleiner ie7 berücksichtigt ist selber schuld.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>blablabla</title>
	<style type="text/css">
		#wrapper
		{
			width: 800px;
			background-color: yellow;
		}
		#page
		{
			min-height: 600px;
			overflow: hidden;
		}
		#left
		{
			width: 300px;
			height: 900px;
			float: left;
			background-color: green;
		}		
		#right
		{
			width: 300px;
			height: 500px;
			float: right;
			background-color: red;
		}
		#footer
		{
			height: 30px;
			background-color: purple;
		}
	</style>
</head>

<body>
<div id="wrapper">
	<div id="page">
		<div id="left"></div>
		<div id="right"></div>
	</div>
	<div id="footer">
	</div>
</div>
</body>

</html>

 

[Mini-Leopard]

Du hast leider nicht ganz genau hingeschaut.
Die gesamte Seite besteht aus 3 Divs, die nebeneinander liegen.
Was ich jetzt weg gelassen habe (um das hier alles zu vereinfachen) sind zwei weitere Divs, die über der page und rechts daneben sind.

Der Aufbau ist nicht so einfach, wie Du Dir das gerade vorstellst.
Im Prinzip habe ich nichts anders gemacht, als Du. Mit dem Unterschied, dass ich noch ein paar Inhalte mehr habe.
Ich hab nicht den kompletten Quellcode geschickt, um nicht den -Talk Server Traffic der letzten 3 Jahre mit einem Post zu übertreffen

Um das ganze abzukürzen hab ich hier mal meinen Code einfach hochgeladen.
https://files.me.com/julianweinert/l7gfsh

 

[das_micha]

interessante spielerei mit den "bordereffekten" hab ich so noch nie genutzt. schau dir mal an wie ich es dir mal flott zusammengeklöppelt habe. ist vom aufbau etwas "anders".
Ein problem wirst Du allerdings damit haben, was sich in der form (ohne bg grafiken) nicht vermeiden lässt: deine sidebar kann keinen längeren content als der eigentliche, hintergrund und höhenbestimmende contentbereich haben.einfacher wäre es einen wrapper um den content und die sidebar zu legen welches den hintergrund als bgimg hat. aber die wahrscheinlichkeit das die sidebar länger als der content ist bei deiner minheight von 750px ist eh sehr gering.

Anhang anzeigen Page.zip

 

[Mini-Leopard]

Diese "Spielerei" ist praktisch der schlaueste tweak für max. 3-spaltige layouts.
Damit werden die seiten-divs "automatisch länger", also rein augenscheinlich.

Ich habe jetzt den Footer-Div in der Struktur umverlegt.
Er ist jetzt genau unter "sidebarPiek" und somit im Content.
Dann habe ich ihn nach links um 150px eingezogen, damit er praktisch mit dem Border auf Kante liegt.
Jetzt funktioniert das wunderbar.

Wenn ich nun also der Content länger wird, werden ebenso die linke und rechte "sidebar" verlängert.
Wird die linke Sidebar länger, so haut auch das hin!

Ich schau mir mal Deine Page.zip an, eventuell sind da ja noch einige strukturelle Vereinfachungen
Hier noch mal meine aktuelle Lösung…

Anhang anzeigen Page.zip