[CrazyLexx]

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

Dieser Beitrag wurde von CrazyLexx bearbeitet: 15. August 2007 - 18:55

[amalbhalbe]

Hallo du kennen uns ja schon ...

also ähm ich hab grad mal versucht auf

http://www.gamepals....ndex.php?area=3

den Inhalt so lang zu verkleinern bis man nicht mehr scrollen muss, und der footer passt sich an? ... hast du vl ne andre subsite ( bei allen links kommt man aufs "alte" design ) wo man das beobachten könnte?

momentan weiß ich nicht wo das passieren könnte

[CrazyLexx]

Zitat (amalbhalbe: 15.08.2007, 21:11)

hast du vl ne andre subsite ( bei allen links kommt man aufs "alte" design ) wo man das beobachten könnte?

Ja, die URL habe ich auch nur als "Testseite" eingerichtet, bevor ich das neue Template auf die reguläre Seite los lasse. Klick doch einfach mal oben auf den "Passwort vergessen" Link. Da die Subseite nicht richtig mit der Datenbank verbunden ist, bekommst du dort eine Seite mit Fehlermeldung, die nur zwei Zeilen benötigt.

[amalbhalbe]

oh seh schon .. ja also es kommt mir so vor als wäre der wrapper ( der container wo alles drin is ) irgendiwe height:100% hat ... wenn das der fall is, dann einfach keine height angeben dann is der weiße bg immer nur so lang wie content is und sollte passen
( kann zurzeit net wirklich weiter guggn css und so =

[CrazyLexx]

Hm, verwende gar keinen Wrapper

EDIT1: So, habe nun mal den ganzen Content Bereich in einen Wrapper DIV gepackt und diesem DIV das Hintergrundbild zugeordnet. Leider wird nun aber der gesamte Mittelteil (Navigationsmenü, Inhalt) ohne das Hintergrundbild dargestellt und man sieht nur noch den grauen Hintergrund, den ich für den Body Teil festgelegt habe... Wohin muss ich jetzt eigentlich genau das Hintergrundbild (mit dem Schatten, Rahmen und hellen Content Bereich) einbinden, damit ich a) einen grauen Hintergrund bekomme und b) überall dort wo Inhalt ist das Hintergrundbild angezeigt wird?

EDIT2: Fehler gefunden! Hatte den Wrapper DIV mit "class" anstelle von "id" aufgerufen. Was ist eigentlich genau der Unterschied zwischen den beiden Befehlen?

Dieser Beitrag wurde von CrazyLexx bearbeitet: 16. August 2007 - 11:20

[CrazyLexx]

Habe nochmal über mein Problem mit der Positionierung des Footers nachgedacht:

Das Problem entsteht ja, wenn der Inhaltsbereich nicht genügend "Inhalt" enthält und dieser dadurch in der Höhe recht klein ausfällt. Der Inhalt wird ja in meinem Beispiel per PHP in einen entsprechenden DIV Container eingefügt und darunter folgt dann direkt ein weiter DIV mit dem Footer. Kann man den "Inhalts-Container" nicht irgendwie so formatieren, dass er entsprechend der Bildschirmauflösung immer die gesamte Bildschirmhöhe ausfüllt? Wenn der Inhalts-Container nur zwei Zeilen Text beinhaltet, würde sich der Container also trotzdem noch weiter nach unten ausdehnen und damit den Footer Div entsprechend nach untern verschieben?

[amalbhalbe]

class = . in der css also .lala
id = #lala ^^ ums mal einfach zu sagen


das mit dem immer ganz ausfüllen kannst du eventuell mit height:100%; erreichen, wird aber denk ich net hinhauen da müsste man wohl etwas mit js spielen aber vl gehts ja doch

[dblay]

Zitat

das mit dem immer ganz ausfüllen kannst du eventuell mit height:100%; erreichen, wird aber denk ich net hinhauen da müsste man wohl etwas mit js spielen aber vl gehts ja doch

Nee, man kriegt das auch mit CSS hin, ist aber ein bissel frickelig. Als erstes muss man den <html> und den <body>-Container auf 100% Höhe skalieren, damit sich die Elemente innerhalb des <body> daran oriendieren können.

html, body {
  height:100%;
}

Dann kannst du deinem "Wrapper DIV" die Eigenschaft min-height:100% zuweisen. Der darf dann aber weder einen margin oder ein padding haben, weil ansonsten die absolute Höhe größer als 100% wird. Wenn du also einen Abstand irgendwo brauchst, musst du einen neuen <div> verwenden. (Hab ja gesagt, ist nicht so einfach alles ).

Dann brauchst du noch ein Style für den IE 6 (nicht IE 7, der stellt das alles korrekt dar), denn der kann nicht so mit min-height. Beim IE 6 musst du anstelle dessen nur height:100% angeben. Denn glücklicherweise stellt der IE 6 Overflows nicht korrekt dar, weshalb du mit height:100% in diesem Fall genau das erzielst, was du willst!!