Fehler bei Positionierung des Footers

SirZimt · 23. Mai 2009 um 21:35

Hallo!

Also ich komm einfach nicht mehr weiter . Der Footer bei meinem neuen Design wird je nach größe des Content Bereichs verschoben. Klappt auch überall außer auf einer Seite … dem Impressum.

Keine Ahnung wieso aber da will es halt nicht…

Das Impressum findet ihr hier:
sirzimt.bplaced.net/index.php?page=siteview&id=5

Datenbank Code für die Seite:

[code]

Name:	Anderie Sebastian
Anschrift:	Flurstraße 27 66954 Pirmasens
Kontakt:	ICQ: 218151319 MSN: zim-todesengel@live.de QIP/Jabber: sirzimt@qip.ru YIM: zimtodesengel Email: sirzimt[at]googlemail.com
HAFTUNGS- AUSSCHLUSS:	Trotz sorgfältiger inhaltlicher Kontrolle übernehme ich keinerlei Haftung für die Inhalte externer Links! Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich!

[/code]

Falls jemand weitere Teile braucht bitte sagen… übrigens auf allen anderen Seiten geht es tadellos

chrisb · 23. Mai 2009 um 21:47

Das align=left der Tabelle hat die gleichen Auswirkungen wie float (ein solches sollte es natürlich wenn überhaupt auch sein, statt veralteter HTML-Attribute zu Darstellungszwecken), nimmt sie also aus dem Fluss, dadurch bekommt das umgebende Element keine Höhe mehr.
overflow:auto für das div mit der Klasse content schafft Abhilfe.

SirZimt · 23. Mai 2009 um 22:07

Danke. Auf die Idee mit algin=left währ ich nie gekommen… wenn ichs vergleiche mit der Seite „Über mich“ fällts mir auf da ist es ja nicht…

Danke nochmal

SirZimt · 25. Juli 2011 um 16:21

Unglaublich aber wahr… ich hab schon wieder das selbe Problem!

Nur das ich diesmal kein float=left habe…

Und nein… ich hab auch schon selbst gesucht. Schon mehrfach versucht etwas nachdem ich dachte das wärs… auch andere fanden nichts.
Hier mal die CSS und PHP/TPL datei (ja das ganze ist noch in den kinderschuhen… daher die dummen ID namen… ruhe also xD):

CSS:

[code]/* main.css */
body {
background-image: url(images/background.jpg);
background-repeat: repeat;
}
a {
color: #FFFFFF;
}
p {
color: #FFF;
}
img {
border: 0px;
}
table {
border: 0;
}
#wrapper {
position: absolute;
left: 50%;
top: 0%;
height: auto;
width: 1660px;
margin-left: -830px;
margin-top: 0px;
}
#image_01 {
background-image: url(images/image.png);
height: 153px;
width: 302px;
position: absolute;
left: 0px;
top: 0px;
}
#image_02 {
background-image: url(images/image-02.png);
height: 153px;
width: 259px;
position: absolute;
left: 302px;
top: 0px;
}
#image_03 {
background-image: url(images/image-03.png);
height: 153px;
width: 797px;
position: absolute;
left: 561px;
top: 0px;
}
#image_04 {
background-image: url(images/image-04.png);
height: 153px;
width: 302px;
position: absolute;
left: 1358px;
top: 0px;
}
#image_05 {
background-image: url(images/image-05.png);
height: 700px;
width: 302px;
position: absolute;
left: 0px;
top: 153px;
}
#image_06 {
background-image: url(images/image-06.png);
height: 73px;
width: 259px;
position: absolute;
left: 302px;
top: 153px;
}
#image_07 {
background-image: url(images/image-07.png);
height: 73px;
width: 797px;
position: absolute;
left: 561px;
top: 153px;
}
#image_08 {
background-image: url(images/image-08.png);
height: 700px;
width: 302px;
position: absolute;
left: 1358px;
top: 153px;
}
#image_09 {
background-image: url(images/image-09.png);
height: 34px;
width: 302px;
position: absolute;
left: 0px;
top: auto;
}
#image_10 {
background-image: url(images/image-10.png);
height: 34px;
width: 259px;
position: absolute;
left: 302px;
top: auto;
}
#image_11 {
background-image: url(images/image-11.png);
height: 34px;
width: 797px;
position: absolute;
left: 561px;
top: auto;
}
#image_12 {
background-image: url(images/image-12.png);
height: 34px;
width: 302px;
position: absolute;
left: 1358px;
top: auto;
}
#content {
background-image: url(images/content_03.png);
background-repeat: repeat-y;
min-height: 500px;
height: auto;
width: 1056px;
position: absolute;
left: 302px;
top: 226px;
}
.buttenmenu {
background-image: url(images/menubutten.png);
width: 192px;
height: 28px;
margin-top: 3px;
margin-bottom: 3px;
text-align: center;
padding-top: 1px;
}
.menulink {
text-decoration: none;
color: #FFFFFF;
size: 16px;
}
.menu {
position: absolute;
left: 50px;
top: 0px;
height: auto;
width: 200px;
}
.content {
position: absolute;
left: 300px;
top: 0px;
height: auto;
width: 797px;
overflow: auto;
}

.footer {
position: absolute;
left: 100px;
top: -10px;
height: 34px;
width: 300px;
}[/code]

PHP/TPL:

<div id="image_01"></div> <div id="image_02"></div> <div id="image_03"></div> <div id="image_04"></div> <div id="image_05"></div> <div id="image_06"></div> <div id="image_07"></div> <div id="content"> <div class="menu"> <div class="buttenmenu"><a href="?p=news" class="menulink">News</a><br /></div> <div class="buttenmenu"><a href="?p=guestbook" class="menulink">Gästebuch</a><br /><br /></div> <div class="buttenmenu"><a href="?p=members" class="menulink">Mitglieder</a><br /></div> <div class="buttenmenu"><a href="?p=history" class="menulink">Geschichte</a><br /><br /></div> <div class="buttenmenu"><a href="?p=links" class="menulink">Links</a><br /></div> <div class="buttenmenu"><a href="?p=impress" class="menulink">Impressum</a><br /></div> </div> <div class="content"> <?php if(!isset($_GET['p']) OR ($_GET['p']=='')) { $p = "news"; }else{ $p = $_GET['p']; } $p = basename($p); $url = "content/pages/".$p.".php"; if(!file_exists("$url")) { include "content/pages/error.php"; }else{ include "$url"; } ?> </div> </div> <div id="image_08"></div> <div id="image_09"></div> <div id="image_10"></div> <div id="image_11"> <div class="footer"> <p>© 2011 by Battlecake (Antribute.eu)</p> </div> </div> <div id="image_12"></div>

Wenn nötig hier is das Live zu finden:
battlecake.antribute.eu

Nochmals Fehlerbeschreibung:
Content-Bereich wird bild nicht fortgesetzt (weder repeat noch repeat-y erziehlen ergebniss) und die 4 Footer-DIVs hängen oben…

iTeam · 25. Juli 2011 um 17:40

Das Bild wird nicht wiederholt weil du die inneren div absolute positioniert hast, d.h. der Inhalt ist dem parent div “egal”, es ist einfach so hoch und breit wie man im stylesheet angegeben hat das es sein soll.
top: auto geht nicht, du musst mit bottom: 0; arbeiten
würde noch beim body “overflow-x: hidden;” reintun, sowie “margin: 0px;” und “padding: 0px;”

Mohyra · 25. Juli 2011 um 18:19

Wobei man die Anzahl der Divs noch auch ein Minimum reduzieren und damit mögliche Fehlerquellen entfernen könnte. Je mehr Divs umso unübersichtlicher wirds eben.

SirZimt · 25. Juli 2011 um 20:00

@iTeam: Deine Vorschläge hab ich mal probiert. Ergebniss:
Fotter seh ich jetzt zurzeit garkeinen mehr…
Aber der Content-Bereich passt sich nun brav an.
Und was meinst du mit body? den wrapper? content bereich? Etwas näher beschreiben du könntest natürlich auch meinen wer weiß…

@Mohyra: Wie gesagt das ganze ist noch in der Kinderstube ich bau da noch weiter dran. Auch an der DIV Minimierung

Mohyra · 25. Juli 2011 um 21:07

er meint schon body

so wies scheint, wird der footer vom content überdeckt. grund ist die absolute positionierung beim content. mittig ausrichten könntest du das auch mit

margin-left: auto margin-right: auto

müßtest dann allerdings den inhalt wieder anpassen. das ist das was ich mit den zu vielen divs meinte. du kannst einen fehler beheben, mußt aber damit rechnen, daß noch mehr auftauchen. da machts mehr sinn, erstmal ne ordentliche struktur zu machen. du solltest dich nochmal mit dem boxmodell, das die grundlage für die bearbeitung mit css ist, auseinander setzen.

SirZimt · 25. Juli 2011 um 22:13

So mal überarbeitet!
Hier die 2 neuen Quelltexte:

CSS Datei:

[code]/* main.css */
body {
background-image: url(images/background.jpg);
background-repeat: repeat;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
a {
color: #FFFFFF;
}
p {
color: #FFF;
}
img {
border: 0px;
}
table {
border: 0;
}
#wrapper {
position: absolute;
left: 50%;
top: 0%;
height: auto;
width: 1660px;
margin-left: -830px;
margin-top: 0px;
}
#side_left {
background-image: url(images/image_01.png);
height: 887px;
width: 302px;
position: absolute;
left: 0px;
top: 0px;
}
#side_right {
background-image: url(images/image_03.png);
height: 887px;
width: 302px;
position: absolute;
left: 1358px;
top: 0px;
}
#header_bg {
background-image: url(images/image_02.png);
height: 153px;
width: 1056px;
position: absolute;
left: 302px;
top: 0px;
}
#body_top {
background-image: url(images/image_04.png);
height: 74px;
width: 1056px;
position: absolute;
left: 302px;
top: 153px;
}
#body_center {
background-image: url(images/image_05.png);
background-repeat: repeat-y;
min-height: 500px;
height: auto;
width: 1056px;
position: relative;
top: 224px;
margin-left: auto;
margin-right: auto;
}
#body_footer {
background-image: url(images/image_06.png);
height: 36px;
width: 1056px;
position: relative;
left: 302px;
bottom: 0;
}
.buttenmenu {
background-image: url(images/menubutten.png);
width: 192px;
height: 28px;
margin-top: 3px;
margin-bottom: 3px;
text-align: center;
padding-top: 1px;
}
.menulink {
text-decoration: none;
color: #FFFFFF;
}
.menu {
position: relative;
left: 50px;
top: 0px;
height: auto;
width: 200px;
}
.content {
position: relative;
left: 300px;
top: -220px;
height: auto;
width: 797px;
overflow: auto;
}

.footer {
position: absolute;
left: 50%;
top: -10px;
margin-left: -150px;
height: 34px;
width: 300px;
}[/code]

PHP/TPL Datei:

<div id="side_left"></div> <div id="side_right"></div> <div id="header_bg"></div> <div id="body_top"></div> <div id="body_center"> <div class="menu"> <div class="buttenmenu"><a href="?p=news" class="menulink">News</a><br /></div> <div class="buttenmenu"><a href="?p=guestbook" class="menulink">Gästebuch</a><br /><br /></div> <div class="buttenmenu"><a href="?p=members" class="menulink">Mitglieder</a><br /></div> <div class="buttenmenu"><a href="?p=history" class="menulink">Geschichte</a><br /><br /></div> <div class="buttenmenu"><a href="?p=links" class="menulink">Links</a><br /></div> <div class="buttenmenu"><a href="?p=impress" class="menulink">Impressum</a><br /></div> </div> <div class="content"> <?php if(!isset($_GET['p']) OR ($_GET['p']=='')) { $p = "news"; }else{ $p = $_GET['p']; } $p = basename($p); $url = "content/pages/".$p.".php"; if(!file_exists("$url")) { include "content/pages/error.php"; }else{ include "$url"; } ?> </div> </div> <div id="body_footer"> <div class="footer"> <p>© 2011 by Battlecake (Antribute.eu)</p> </div> </div>

Sieht schon um längen säuberer aus…
Hab wie iTeam meinte jetzt auch die Änderungen an body vorgenommen, weniger DIVs mit richtigen Namen und der content ist nicht mehr absolute sondern relative.

Nur irgendwie wenn ich abstand von oben auf 227px was er ja haben müsste (153px + 74px = 227px) ist da noch 3px platz dazwischen .
Zudem startet er scheinbar nett wie es nun ist unter dem Footer div den Content-Div wieder…

//Anmerkung:
Mir kam gerade ein das hier ja viele wegen Copyright und so dran sind. Ist auch gut so also stell ich hier was direkt klar:
Alle Grafiken sowie das Theme selbst sind aus dem offiziellen Fan-Site Kit des Puplisher das er öffentlich anbietet. Also von daher ist es mir erlaubt zu nutzen !

Mohyra · 26. Juli 2011 um 08:39

Warum machst du einzelnen Stückchen Hintergrundbild nicht ein großes und packst das in body? Würde einiges vereinfachen.
Zum Footer: Den solltest du schon mit in das div mit der id wrapper packen. Dadurch gibts zwar wieder Probleme mit dem body_center, aber die lassen sich durch das Entfernen von position: relative. Was dann natürlich den gesamten Inhalt verschiebt, der aber ja ohnehin noch nicht richtig ausgerichtet ist. Das sollte aber kein Problem darstellen.
Du solltest vielleicht insgesamt schaun, daß du auch mehr mit margin und padding arbeitest. Ist doch recht hilfreich.

hummer · 26. Juli 2011 um 12:22

Sieht für mich nach wildem „(PS)-rumgeslice“ aus. Da kann ja nur murks bei rauskommen

SirZimt · 26. Juli 2011 um 13:23

Der Footer ist im DIV Wrapper… es ist alles darin xD

Aufbau:
index.php

[code]

<?php require('themes/'.template.'/body.tpl'); ?>

[/code]

So nachdem ich jetzt das position: relative bei body_center raus, Inhalt neu ausgerichtet hab funktioniert es nun .
Nachdem ich auf der news.php datei noch einen Fehler behoben hatte funktionierte es auch dort (schön blöd wenn man da vergisst eine DIV Class anzugeben… ).

Ich bedanke mich hier mal bei Mohyra und iTeam die Tipps von euch beiden haben geholfen…

Und zu hummer:
Falls du alles gelesen hast müsstest du wissen das ich das aus einem Fansite Kit habe das Design… und was die da einem so vorgeben zum selbst basteln ist mehr als schlecht .
Einige Kommerzielle Designs sind noch schlimmer aufgebaut als das von mir hier zusammen gebastelte.

Mohyra · 26. Juli 2011 um 13:25

Naja nur weil es im Fankit so drin ist, heißt das nicht, daß man sich kein ordentliches Hintergrundbild draus basteln kann Das würde auf jeden Fall mehr Sinn machen, als später die verschiedenen unnötigen Divs hin- und herschieben zu müssen.

edit: hab grad mal das fankit runter geladen. da ist der hintergrund doch eh als ganzes drin.

SirZimt · 26. Juli 2011 um 14:10

[quote=“Mohyra”]Naja nur weil es im Fankit so drin ist, heißt das nicht, daß man sich kein ordentliches Hintergrundbild draus basteln kann Das würde auf jeden Fall mehr Sinn machen, als später die verschiedenen unnötigen Divs hin- und herschieben zu müssen.

edit: hab grad mal das fankit runter geladen. da ist der hintergrund doch eh als ganzes drin.[/quote]

Kug dir die Grafiken mal aber an wie dir vielleicht auffällt hab ich das aus dem fansite_sample.psd genommen und einiges weggelassen dafür

Mohyra · 26. Juli 2011 um 14:15

Hab ich und ich hab gesehn, daß unter Fansite_images die Datei bg.png liegt, die genau der Hintergrund ist, den du aus einzelnen Dateien zusammengestückelt hast. Die fansite_sample.psd ist eine Beispieldatei wie die Seite aufgebaut sein kann, aber grundsätzlich keine gute Vorlage.

iTeam · 26. Juli 2011 um 17:08

wäre sicher von Vorteil wenn du das nächste Mal mit nur einem bg Bild arbeitest.
bei “grafiklastigen” Webseiten empfiehlt sich übrigens ein Preloader, der die Seite erst anzeigt, wenn sie vollständig geladen ist und diese Zeit mit einer Meldung überbrückt wird. z.B. so:

[code]

#site{display: none;} #preloader{display: block} #site{display: block;} #preloader{display: none;}

Einen Moment bitte, die Seite wird geladen...

Seite die geladen werden musste...

[/code]

MfG
iTeam

SirZimt · 26. Juli 2011 um 18:01

@iTeam: Eine solche Möglichkeit suchte ich schon seit langem. Fand aber nie etwas richtiges dazu. Nur solche „vorgefertigten“ Scripts wovon ich die Finger lassen will da sie eh nie gehen.

Ich werde das von dir mal versuchen. Hört sich vielversprechend an was man da so ließt. Gut von JavaScript hab ich ja fast 0-Ahnung aber in etwa versteh ich schon was da so steht.

Für Vorschläge bin ich meist sehr offen.
Zudem will ich hier auch mal anmerken das ich eher Hobby-Mäßig ab und zu sowas bastele.
Zurzeit bin ich ja dran mir ein kleines CMS System zu basteln… daher kommt das mit diesem body.tpl und so .

//EDIT
@iTeam:
Hab den Preloader mal eingebaut… funktioniert nicht so ganz seite läd wie zuvor einfach und die Meldung sieht man nur im Quelltext…

iTeam · 26. Juli 2011 um 18:15

Grundsätzlich ist nur zu beachten das unter den normalen Style Vorgaben steht (damit bei Nutzern die JS deaktiviert haben, die Seite normal geladen wird). Onload wird ausgeführt wenn die Seite geladen wurde, dann wird der preloader ausgeblendet und die site dafür eingeblendet. Der Preloader sollte natürlich nicht zu viele Bilder enthalten (höchsten vielleicht ein loader.gif, solche kannst du dir z.B. auf ajaxload.info/ generieren lassen.

//EDIT: Leer mal den Cache

SirZimt · 26. Juli 2011 um 19:01

Cache geleert…
Bei mir kommt kein Preloader

iTeam · 26. Juli 2011 um 19:23

[code]

window.onload = function() { Preloader = document.getElementById('preloader'); Seite = document.getElementById('site');

		Preloader.style.display = 'none';
		Seite.style.display = 'block';
	}
</script>
<style type="text/css">
	#site{display: none;}
	#preloader{display: block;}
</style>

<noscript>
	<style type="text/css">
		#site{display: block;}
		#preloader{display: none;}
	</style>
</noscript>

Einen Moment bitte, die Seite wird geladen...

Seite die geladen werden musste...

[/code]

probiers mal so …