Anzeige

Footer am Seitenende positionieren

Footer am Seitenende positionieren | PSD-Tutorials.de

Erstellt von gosunnycat, 24.08.2008.

  1. gosunnycat

    gosunnycat Nicht mehr ganz neu hier

    Dabei seit:
    19.08.2005
    Beiträge:
    62
    Geschlecht:
    weiblich
    Footer am Seitenende positionieren
    Ich habe noch ein kleines Positionierungsproblem. Mein Footer muss immer am Ende der Seite sein. Das heißt bei wenig Text an der unteren Browserkante. Bei viel Text einfach nach dem Text.

    Es geht konkret um folgende Webseite:

    http://www.tauchschule-szagunn.de/

    Bis jetzt habe ich es wie folgt gelöst

    #footer {
    width: 100%;
    background-color: #212c33;
    clear: both;
    text-align:center;
    padding: 10px 0 10px 0;
    }

    Den Content habe ich mit min-height: 100%; gemacht aber es funktioniert nicht! Der Content nimmt nicht den Raum ein den es bei wenig Text könnte sodass der Footer in der Luft schwebt.
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Versuch es mal mit bottom: 0px;

    Ggf. auch absolut positionieren. Der Nachteil ist halt dabei, wenn der Inhalt größer ist, dass sich dann die Ebenen überlappen.
     
    #2      
  3. serverhombre

    serverhombre Guest

    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Hallo,
    so ein kleines Beispiel vom mir (xhtml/css kein JS ;) ):
    zum Beispiel

    Im Quelltext stehen alle wichtigen angaben, bei Fragen bitte nochmal melden.

    Ich hoffe das hilft weiter. :rolleyes:
     
    #3      
  4. gosunnycat

    gosunnycat Nicht mehr ganz neu hier

    Dabei seit:
    19.08.2005
    Beiträge:
    62
    Geschlecht:
    weiblich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    @stb_87 nein bottom: 0px ist keine Lösung. Der Footer würde beim Scrollen über den Content hängen und das geht ja mal gar nicht.
    @sobi35 mit JavaScript kenn ich mich leider fast überhaupt nicht aus ich versuch mich mal in deine Antwort reinzufitzen
    @serverhombre ah deine Antwort ist vielversprechend ich habe meinen Code mal wie folgt abgeändert:
    Code (Text):
    1.  
    2. html,body {                                                                            
    3. height:100%;
    4. margin:0;
    5. padding:0;
    6. text-align:center;
    7. }
    8.  
    9. * html #layout {
    10.      height: 100%;
    11. }
    12. #footer {
    13.     width: 100%;
    14.     background-color: #212c33;
    15.     clear: both;
    16.     text-align:center;
    17.     padding: 10px 0 10px 0;
    18. }
    19.  
    Aber wenn ihr jetzt auf der Webseite schaut ist der Footer immer außerhalb des sichtbaren ??? wie muss ich es coden? Ich bin mir jetzt auch nicht sicher was ich mit dem folgenden Code bezwecke?
    Code (Text):
    1.  
    2. * html #layout {
    3.      height: 100%;
    4. }
    5. html,body {                                                                            
    6. height:100%;
    7. }
    8.  
     
    #4      
  5. serverhombre

    serverhombre Guest

    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    So dann will ich das Rätsel mal auflösen ;).

    so fangen wir mit dem (x)html Teil an:
    HTML:
    1.  
    2. <div id="layout">
    3.  
    4. <h1>Inhalt</h1>
    5. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nibh quam, luctus.</p>
    6.  
    7. </div>
    8.  
    9. <div id="footer">Footer immer unten</div>
    10.  
    zuerst wird ein div mit der id="layout" definiert in diesem ist der Inhalt oder halt weitere divs,p,span, h1 was auch immer....

    Nun kommt der Footer div id="footer" wichtig dabei ist das der footer sich unter dem layout div befindet also hinter </div> des layout-containers.


    so nun zum css-Teil:
    Code (Text):
    1.  
    2.  
    3. html,body {                                                                            
    4. height:100%;
    5. margin:0;
    6. padding:0;
    7. font-size:100.01%;
    8. text-align:center;
    9. }
    10.  
    11. * html #layout {
    12.      height: 100%;
    13. }
    14.  
    15.  
    16. #layout {
    17. min-height:100%;
    18. height:auto;
    19. width:60em;
    20. margin:0 auto;
    21. text-align:left;
    22. }
    23.  
    24. #layout h1,p {
    25. padding:1.5em 0.5em;
    26. width:45em;
    27. margin:0 auto;
    28. font-size:0.95em;
    29. }
    30.  
    31.  
    32. #footer {
    33. margin:-20px auto;
    34. padding:0;
    35. line-height:20px;
    36. font-size:0.95em;
    37. background:#ccc;
    38. }
    39.  
    40.  
    zuerst wird dem html,body eine höhe von 100% verpasst, kurz damit der Browser weis was auf ihn zukommt, also eine höhe von 100%. margin/pedding:0; text-align:center; für IE 5 zentrierung usw.....

    weil der IE 5/6 probleme mit min-heigth:100%; hat wird mit dieser angabe dem layout div ne höhe von 100% gegeben:

    * html #layout {
    height: 100%;
    }

    im #layout kommen dann noch min-height:100%; height:auto; hinein.
    so nun hat fast jeder Browser mitbekommen das er 100% der Fenstergröße für den Layout- div nehmen muss. :hmpf:

    so nun kommt der footer der sich ja unter dem layout div befindet,und ein höhe z.B. 100px hat, dadurch entsteht ein Scrollbalken bzw. der Footer wird nicht im sichtbereich angezeigt. Das ist aber gewollt denn der Layout-div hat ja schon ne höhe von 100% bekommen also von der darstellung ist alles ok.

    so nun bekommt der Footer einfach einen margin: - höhe des footers; durch diesen Negativen margin wird der footer von unten nach oben gezogen also z.B. margin:-100px 0; um die 100px die er hoch ist, nun klebt er am unteren Ende der Seite und der Scrollbalken ist dank des -margin auch weg. :p

    so ich hoffe das ist verständlich genug.
     
    #5      
  6. dusticelli

    dusticelli Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    10
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    Hallo Community,

    ich würde gerne diesen Thread nochmal nach oben schieben, weil ich das gleiche Problem mit diesem Ansatz lösen wollte, aber es noch nicht zufriedenstellend gelöst ist.

    Die hier beschriebene Methode entspricht ja in etwa der Methode "Footer stick alt" die hier dank der Erklärungen von serverhombre auch für mich (da im Original englisch) vollumfänglich verstanden ist.

    Ich habe es also so nach Anleitung gemacht, und mein Layout in einen Wrap namens #layout gepackt und den Footer nun darunter.

    Das Problem ist nun, dass der IE Explorer (8) bei mir alles wie gewünscht anzeigt, aber die Kollegen FF, Chrome oder Opera machen etwas was noch nicht nach Vorstellung läuft.

    In allen 3 Browsern wird bei Seiten die länger sind als die Browserfenster-Höhe der Footer direkt an den untersten Inhalt des #layout divs gepappt.

    Egal was ich auch probiere (Margin, Padding extra druntergepacktes Div mit entsprechender Höhe), es klappt nicht. Entweder der Seiteninhalt verschiebt sich irgendwie oder Footer und Layout bleiben aneinander gepappt.

    Kann vielleicht irgendjemand eine Hilfestellung geben?

    Zu sehen ist das ganze hier:

    Bitte zunächst mit diesem Link das entsprechende Layout aufrufen:

    Willkommen &bull; SENANA
    (dient auch als Beispiel für Lange Seite)

    und dann vielleicht dieses Beispiel für kürzere Seiten
    Mr. Fuss Systempakete

    Ich möchte gerne zwischen der Box #contact-wrapper
    und dem #footer einen Abstand von 20px haben.

    Kann jemand helfen?
    Nachtrag: Der IE pappt die beiden auch zusammen. Hatte wohl im Cache festgehangen..
     
    Zuletzt von einem Moderator bearbeitet: 28.12.2010
    #6      
  7. Manfred62

    Manfred62 Nicht mehr ganz neu hier

    Dabei seit:
    09.05.2010
    Beiträge:
    73
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Bei diesen Lösungen dürfen imho keine vertikalen margins verwendet werden.
    Davon hast du jede Menge drin. Wenn man den kompletten Inhalt entfernt, funktioniert es...
    Lies mal hier unter "Known Issues"
    How to Use the Sticky Footer HTML & CSS Code

    Manfred
     
    #7      
  8. dusticelli

    dusticelli Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    10
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Hallo Manfred,

    Vielen Dank für die schnelle Hilfe. Cool! :)

    Das wäre ja für mich der Supergau. Müsste ja den ganzen Code überarbeiten. Zumindest aber hat dein Verweis auf die sticky footer Seite mich auf einen anderen Fehler aufmerksam gemacht. mir fehlte in dem Main-Bereich ( bei mir #layout) noch das entsprechende padding-bottom mit Höhenanagbe des Footers.

    Jetzt siehts schon besser aus, aber der in den known issues erwähnte Effekt tritt tatsächlich auf. Die Seiten mit wenig Inhalt sind länger als das Browserfenster.

    hm, gibt es noch eine andere Möglichkeit als Margins durch Paddings u ersetzen?

    thx

    Gruß aus Köln

    Dusticelli
     
    #8      
  9. Manfred62

    Manfred62 Nicht mehr ganz neu hier

    Dabei seit:
    09.05.2010
    Beiträge:
    73
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Nein, man kann nur padding und/oder border nehmen. StickyFooter Varianten kann man i.d.R. nicht einfach per copy+paste in ein fertiges Layout packen, sondern plant dies bereits beim Aufbau mit ein.
    BTW: wozu brauchst das? Selbst die "kurze" Seite hatte doch beinahe schon 1000px? Verteil einfach den Inhalt etwas grosszügiger.

    Manfred
     
    #9      
  10. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Footer am Seitenende positionieren
    #10      
  11. dusticelli

    dusticelli Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    10
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Moin,

    Das sehe ich nun auch ein. Ich bin natürlich kein Webdesigner oder so, sondern habe mir alles aus Interesse selbst beigebracht. Autodidakt, sozusagen. Für mein nächstes Projekt werde ich diesen Umstand also berücksichtigen ;)

    Das die kurze Seite bereits jetzt so hoch ist, verdanke ich wohl dem Umstand, dass die Margins im Content den Footer weiter nach unten drücken. Ausserdem ist die Seite ja ein Shop/Content Managament System, und ich weiss noch nicht was da so alles noch an Inhalt kommt.

    Letztendlich wäre das dann der Wörgaround. Aber gestern Abend habe ich noch bemerkt, dass in den Known Issues nur von horizontalen Margins die Rede war. du hattest aber von verttikalen Margins geschrieben.

    Sollte es tatsächlich nur um horizintale Margins gehen, könnte ich es doch mit einer Überarbeitung mal versuchen. Denn ich glaube da habe ich nicht soo viele Baustellen, sondern nur ein paar Container.

    Kann es sein dass Du Dich nur vertippt/vertan hattest oder weißt Du sicher, dass die vertikalen Margins auch Probleme machen?

    Danke noch mal für Deine Mithilfe.

    Gruß
    dusticelli
     
    #11      
  12. dusticelli

    dusticelli Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    10
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    @jackprince

    Danke für den Tip. Die Variante mit dem .push div (Ryan Fait) habe ich gestern auch noch irgendwo gefunden. Man könnte man versuchen, ob da die Margins auch stören.

    Grundsätzlich vermute ich mal, dass das Problem das selbe bleiben wird, weil der Lösungsansatz ja wie Du auch schreibst, der gleiche ist.

    Mache jetzt mal einen Versuch, bei einer Seite mit wenig Content, ob es sich verändert, wenn ich die horizontalen Margins rausnehme...
     
    #12      
  13. dusticelli

    dusticelli Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    10
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Es scheint zu klappen. Wenn man die horizontalen Margins rausnimmt, dann sieht es so aus, wie gewünscht.

    Zu sehen hier:

    SENANA &bull; Login


    Auf dieser Seite habe ich dann alle horizontalen Margins entfernt.
    Allerdings, spielen Opera und Chrome nicht ganz mit. Beide liefern noch ein kleines bisschen Übergröße der Seite, es erscheint also ein Scrollbalken.

    Hat jemand eine Idee, woran das nun wieder liegen könnte?

    Vielen Dank schonmal.
     
    #13      
  14. Manfred62

    Manfred62 Nicht mehr ganz neu hier

    Dabei seit:
    09.05.2010
    Beiträge:
    73
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Gemeint sind margin-top und margin-bottom.
    In den "Known Issues" steht dies auch so, nicht horizontal.
    Erklärung für vertikal

    Gruß Manfred
     
    Zuletzt bearbeitet: 29.12.2010
    #14      
  15. dusticelli

    dusticelli Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    10
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    @all,

    so, habs jetzt laufen. Die horizontalen Margins habe ich raus genommen. Zudem fehlte mir wohl noch ein wrapper, dem man per "padding-bottom" die Höhe des Footers zuweist.

    Für alle die mit selben Problem hier landen, hier nochmal der Link zu der von Manfred erwähnten sehr guten Erklärung, aber in deutsch:

    CSS Sticky Footer

    Vielen Dank an alle!
     
    #15      
  16. Bleccer

    Bleccer Guest

    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Die größe vom content auf 100% setzen so passt sich die Box dem Inhalt nach an
     
    #16      
  17. dusticelli

    dusticelli Noch nicht viel geschrieben

    Dabei seit:
    19.11.2010
    Beiträge:
    10
    Geschlecht:
    männlich
    Footer am Seitenende positionieren
    AW: Footer am Seitenende positionieren

    Hallo Bleccer,

    das hat gepasst.

    Vielen Dank.
     
    #17      
x
×
×
teststefan