|
 |
  |
| Autor |
Nachricht |
CrazyLexx
User [User]
Anmeldung: 29.07.07
Beiträge: 13
|
 Verfasst am: 15.08.2007, 21:11 Titel: Wie DIV-Footer immer am Ende einer Seite positionieren? |
 |
|
Hallo zusammen,
verwende auf meiner Seite einen DIV Container um damit die eine Footer-Grafik einzubinden und damit am unteren Bildschirm den eigentlichen Hintergrund zu überdecken und den Contentbereich optisch abzuschließen.
Solange der eigentliche Inhalt umfangreich genug ist (man die Seite also scrollen kann) funktioniert dies momentan auch ohne Probleme. Was aber mache ich, wenn auf einer Seite mal kaum Inhalte vorhanden sind und die Seite nicht gescrollt werden muss? Dann hängt meine Footergrafik nämlich momentan irgendwo Mitten auf dem Bildschirm und der Hintergrund geht in diesem Fall nach dem Footer natürlich einfach so weiter. Wie kann ich dies umgehen?
Danke,
TOM
|
|
| Nach oben |
|
 |
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 486
|
| Verfasst am: 15.08.2007, 21:32 Titel: |
|
|
Da wären ein Link oder der Quelltext hilfreich.
Fotterprobleme kann man oft durch ein lösen. Kommt aber auf den Einzelfall an.
Vielleicht hilft auch der Quelltext
 dieser Seite weiter.
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1597
|
|
| Nach oben |
|
|
CrazyLexx
User [User]
Anmeldung: 29.07.07
Beiträge: 13
|
| Verfasst am: 15.08.2007, 23:57 Titel: |
|
|
Habe mal eine Testseite erstellt, damit man sich das Problem ansehen kann. Wenn man auf folgende Seite geht, wird der Footer so angezeigt, wie ich es mir vorgestellt habe:
http://www.gamepals.de/index.php?area=3
Klickt man dann jedoch oben rechts auf den "Passwort vergessen" Link, wird eine Seite generiert, dessen Inhalt aus nur zwei Zeilen besteht und der Footer dadurch bis ganz nach oben rutscht und darunter den Hintergrund erneut anzeigt. In dem Fall sollte der Footer aber unten am Ende des Browserfensters platziert werden (allerdings nicht so feststehend, wie in dem Beispiel von SelfHTML zu sehen).
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1597
|
| Verfasst am: 16.08.2007, 00:10 Titel: |
|
|
mhh...
hab nochmal drüber nachgedacht:
Du könntest dem normalen Seitenbereich ein min-height von 100% verpassen (für IE<7 ein height:100% -> Conditional Comment (* html)) und den Footer darunter mit einem negativen margin-Wert platzieren - musst nur zusehen, dass er nix aus dem Content überdeckt (padding-bottom... musst mal gucken wie sich das im Contentbereich mit min-height: 100% verträgt, hab' das noch nie ausprobiert...; zur not extra-Container für's padding).
Ist nur so die Überlegung, wird vlt. noch den ein oder anderen Kniff haben - Viel Spass beim basteln  
Schönen Gruß,
Chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
CrazyLexx
User [User]
Anmeldung: 29.07.07
Beiträge: 13
|
| Verfasst am: 16.08.2007, 12:35 Titel: |
|
|
Ok, damit ich dich richtig verstehe:
Auf meiner Seite wird der Inhalt per PHP in einen DIV Container eingefügt und darunter schließt dann direkt ein weiter DIV mit dem Footer an. Soll ich also diesem "Inhalts-DIV" eine height von 100% zuweisen? Worauf bezieht sich diese Prozentangabe dann eigentlich? Auf die maximale vertikale Bildschirmauflösung? Was passiert, wenn der Inhalt des DIVs dann mehr als eine Bildschirmseite benötigt?
Das "padding-bottom" muss sich dann auch auf den "Inhalts-DIV" beziehen und dieser Rand dann ungefähr so groß sein wie der Footer DIV?
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1597
|
| Verfasst am: 16.08.2007, 14:10 Titel: |
|
|
| Zitat: | | Auf meiner Seite wird der Inhalt per PHP in einen DIV Container eingefügt |
Und der soll ein min-height von 100% bekommen. also z.B. <div id="container"> bekommt im CSS-Bereich folgendes Attribut:
| Code: |
#container {
min-height: 100%;
}
|
Das heißt, der Container soll mindestens eine Höhe von 100% haben, er darf auch höher sein - bei einer festgelegten Höhe von 100% würde in modernen Browsern höherer Inhalt aus dem Container herausragen - dann würde z.B. das Hintergrundbild nicht mehr mit wiederholt, was ja doof wäre. Damit die Höhe aber auch passt, musst auch das html und body-Tag eine definierte Höhe von 100% bekommen, sonst klappt's nicht...
Und der IE bis einschließlich Version 6 braucht nochmal 'ne Extra-Wurst... glücklicherweise interpretiert der eine normale height-Angabe genauso wie ein min-height
Ich hab' dir mal ein Beispiel gemacht, solltest du einfach anpassen können. Klappt auch soweit (getestet mit IE6, IE7, FF2)
| Code: |
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Unbenannt</title>
<meta name="generator" content="Scribe! 2 [http://scribe.de]" />
<style type="text/css">
<!--
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
margin: 0 auto;
width: 700px;
}
* html #container {
height: 100%;
}
#abstand {
padding-bottom: 150px;
}
#footer {
height: 120px;
background: red;
width: 700px;
margin: -120px auto;
}
//-->
</style>
</head>
<body>
<div id="container"><div id="abstand">
Inhalt geht hier so lang....<br /><br /><br /><br />Bla blubb sif ai a oiah voi
afviüvbue hgoi reoiegih eroh hioiaehroirhegoihr aoiha ogih awo goiaewröihg örelahg
aö aib eoih boei böhj soiöb htoih tbere horia
aeorg erbhhoiesoi biaroua riohar jbhoera boiaer gbuha
agh aerio eri oaie boia igo oair öoaer iohr ei rea
h eraaiba rebi areuharihg oirh aoiher oihra eohoira eghu
a reohhirabouhero oieargrea harvkjb arhg teöa jöhf
yjhvvb azg uzaewugsfvhsglufz luisg fihvgrzllzgibf öpigur
Inhalt geht hier so lang....<br /><br /><br /><br />Bla blubb sif ai a oiah voi
afviüvbue hgoi reoiegih eroh hioiaehroirhegoihr aoiha ogih awo goiaewröihg örelahg
aö aib eoih boei böhj soiöb htoih tbere horia
aeorg erbhhoiesoi biaroua riohar jbhoera boiaer gbuha
agh aerio eri oaie boia igo oair öoaer iohr ei rea
h eraaiba rebi areuharihg oirh aoiher oihra eohoira eghu
a reohhirabouhero oieargrea harvkjb arhg teöa jöhf
yjhvvb azg uzaewugsfvhsglufz luisg fihvgrzllzgibf öpigur
</div></div>
<div id="footer">Footer hier</div>
</body>
</html>
|
Du kannst einfach das Fenster, in dem du die Seite öffnest, verkleinern, dann siehst du ja, wie's sich verhält...
Schöne Grüße,
Chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
