Sticky Footer + Page zentriert

Miazawa · 17. Juni 2009

Hallo Leute

Ich möchte gerne mit CSS einen Footer erstellen der beim scrollen fixiert bleibt also so etwas:
http://ryanfait.com/sticky-footer/

Ich habe es hinbekommen mit diesen codes:

HTML:

Code:

<div id="wrap">
   <div id="main"> Main Text </div>
</div>
<div id="footer"> Footer </div>

CSS:

Code:

* {
     margin:0;padding:0;
} 
html, body, #wrap {
     height: 100%;
}
body > #wrap {
     height: auto; min-height: 100%;
}
#main {
     padding-bottom: 150px;
}
#footer {
     position: relative;
     margin-top: -150px;
     height: 150px;
     clear:both;
}

Doch jetzt ist mein Problem, ich möchte die ganze Webseite zentriert haben, den Footer auch..(den Text natürlich links bündig)

Ich habe versucht um die ganze Seite ein DIV zu erstellen, doch dann funktioniert der Footer nicht mehr,,,

Kann mir einer weiterhelfen?

bin schon seit stunden daran ...

anna55 · 17. Juni 2009

Schau Dir mal hier das Beispiel an:
http://forum.jswelt.de/css-x-html/47303-seite-hoehe-strecken-browserhoehe-anpassen.html#post297978

Bei Deinem Code ist der Footer nicht unten.

Miazawa · 17. Juni 2009

anna55 schrieb:
Schau Dir mal hier das Beispiel an:
http://forum.jswelt.de/css-x-html/47303-seite-hoehe-strecken-browserhoehe-anpassen.html#post297978

Bei Deinem Code ist der Footer nicht unten.

Hey danke für die schnelle Antwort!!

Das funktioniert schon mal danke, doch wäre es nicht möglich, zu sagen, dass der Footer scrollen soll, sobald der Text dem Footer ankommt?

Weil momentan scrollt der Footer erst dann, wenn der Text ganz unten der Page angekommt.... :grin:

anna55 · 17. Juni 2009

Hm, stimmt. Modifizier doch mal bei diesem Beispiel den Div #content

PHP:

#content {
    padding: 20px 0 50px;
    width:100%;
    color:green;
}

Ich vermute, Du willst keine extra Scrollbalken bei Content, sondern schon an der ganzen Page.

Miazawa · 17. Juni 2009

Danke viel viel mal anna, du hast mir den tag gerettet

)

Es funktioniert sauber in Mozilla, Safari und Google Chrome.
Bei IE ist der footer rechts unten (...komischerweise)...

Ich glaube es liegt an "position:absolute;" , weil als ich das weg genommen habe,, war es wieder normal zentriert, aber funktioniert natürlich nicht richtig,
hast du vielleicht einen Vorschlag wie ich das korrigieren könnte?

anna55 · 17. Juni 2009

Hm, welchen IE meinst Du? Sieht bei mir identisch aus in den von Dir genannten Browsern + Opera + IE 6 + IE7. Den IE 8 hab ich hier nicht drauf.
Hab den Code mal hochgeladen:
http://annaland.de/examples/footer_bottom.html

Miazawa · 17. Juni 2009

Ja das ging auch, aber schau mal die Seite an:
... (url) ...

Ich hab es mit einer Tabelle aufgebaut, sieht komisch aus :S

anna55 · 17. Juni 2009

Wofür um Gottes Willen hier eine Tabelle? Und wo ist der korrekte Doctype, den ich in meinen Beispiel habe?

Und: Du hast sicher gesehen, dass der Validator nicht ganz fröhlich schaut:
http://www.validome.org/validate/?uri=http://atelier-bauform.gutknecht-informatik.com/

Aber zum Footerproblem:
Du nimmst im CSS raus aus dem body

PHP:

text-align: center;

Beim Div #logo musst Du den linken Abstand dann ungefähr ändern zu

PHP:

	margin-left: 206px;

Und wenn Du dann noch

PHP:

text-align:left;

2x jeweils in die Tabellenzelle vor

PHP:

<span class="footer_right"

(Du hast ja zusätzliche Styleanweisungen) schreibst, dann sollte es stimmen.

Miazawa · 17. Juni 2009

Boah anna du bist die besteeeeeeeeeee

Es funktioniert hahahaaha

Ja wieso ich tabellen genommen habe?
Weil es sieht komisch aus auf dem Mac und Windows, hab mit Divs probiert, aber es ist nicht immer schön rechts oder linksbündig... deswegen habe ich mit einer Tabelle probiert, und es sieht gleich aus (mac & pc)...

Das mit dem Doctype,, es ist ein CMS, macht alles automatisch im hintergrund, ich kam gar nicht auf die idee,, das zu ändern =)
werde ich morgen machen!

Du kannst dir nicht vorstellen wie dankbar ich dir bin

anna55 · 18. Juni 2009

Keine Ahnung, ob Du hier nochmal reinschaust und - ich habe nicht auf dem Mac getestet, da ich keinen habe.

Sieh Dir einfach mal das HTML nur für den Footer bei Deinem Tabellenkonstrukt und dann die CSS-Lösung an:
HTML Tabelle:

PHP:

   <div id="footer" align="center">
    <table style="font-weight:bold;">
      <tr>
        <td align="right" style="padding:0px; line-height:13px;"><span class="footer_left"> atelier xxxxxxx</span></td>
        <td width="10" style="padding:0px; line-height:13px;"> </td>
        <td style="text-align:left;   padding:0px;line-height:13px;"><span class="footer_right">xxxxxxx xxx <span class="footer_l">l</span> xxx-xxxx xxxxxxxx </span></td>

      </tr>
      <tr>
        <td align="right" style="	  padding:0px;line-height:13px;"><span class="footer_left">innenarchitektur</span></td>
        <td width="20" style="padding:0px;line-height:13px;"> </td>
        <td style="text-align:left; padding:0px;line-height:13px;"><span class="footer_right">tel +41 xx xxx xx xx <span class="footer_l">l</span> fax +41 xx xxx xx xx </span></td>
      </tr>

      <tr>
        <td align="right" style="padding:0px;line-height:13px;"><span class="footer_left">xxxxx xxxxxxxx</span></td>
        <td width="10" style="padding:0px;line-height:13px;"> </td>
        <td style="padding:0px;line-height:13px;"><span class="footer_right"><a href="mailto:mail@example.com">mail@newexample.com</a><span class="footer_l">l</span><a href="http://www.example.com">www.example.com </a></span></td>
      </tr>
    </table>

  </div>  <!-- #footer -->

HTML ohne Tabelle

PHP:

<div id="footer">
<div class="footer_left">
atelier xxxxxxx<br />
innenarchitektur<br />
xxxxx xxxxxxxx
</div>
<div class="footer_right">
xxxxxxxxxx xxx | ch-xxxx xxxxxxxx<br />
tel +41 xx xxx xx xx | fax +41 xx xxx xx xx <br />
<a href="mailto:mail@example.com">mail@example.com </a> | <a href="http://www.example.com"> www.example.com </a></div>
  </div>  <!-- #footer -->

CSS für den footer

PHP:

#footer {
	position:absolute;
	bottom:0;
	clear:left;
	width:900px;
	width:100%;
	background-color:#FFF;
	margin-left:11px;
	margin-top: 20px;
	padding: 10px 0;
	font-size: 12px;
	line-height:17.5px;
	font-weight: bold;
}

.footer_left {
	color: #9c8f7c;
	margin-left: 191px;
	float: left;
	text-align: right;
	display: inline;
}

.footer_right {
	color: #525252;
	font-size: 12px;
	float: left;
	margin-left: 24px;
}

Beim #footer-CSS habe ich lediglich die Schriftgröße geändert und Angaben für line-height und font-weight gemacht, der Rest ist geblieben.

Mac musst Du testen, sollte aber auch ok sein. Ich denke, ein derart reduzierter Code spricht für sich.

Miazawa · 19. Juni 2009

Hey Anna danke viel mal!

Hab es jetzt mit div's gemacht anstatt Tabellen

Ich habe gemerkt, dass wenn ich Doctype auf Strict ändere, dass der Footer nicht unten auf der Seite zentriert ist, sondern 50px unterhalb dem Content hängt... :-/

Und wenn ich Doctype Strict entferne, ist die Seite unter IE 6 & IE 8 nicht zentriert *grml* ..

Miazawa · 19. Juni 2009

Sorry will echt nicht spamen, aber komme nicht weiter

Es funzt wieder, k.A wieso und warum... doch unter Internet Explorer bleibt der Footer nicht unten stehen, wenn ich die Seite scrolle, einfach wenn ich F5 klicke, kommt der Footer unten in der mitte.. grml

Weiss einer wieso es in IE den footer nicht scrollt?

anna55 · 19. Juni 2009

Miazawa schrieb:
Es funzt wieder, k.A wieso und warum...
...
Weiss einer wieso es in IE den footer nicht scrollt?

Da Du keinen aktuellen Link gepostet hast, vermute ich mal, dass es der alte ist. Was mich daran aber stutzig macht, ist Deine Aussage, dass Du die Tabellen ausgenommen hast. Auf der Seite sind nämlich nach wie vor welche drin. Oder meintest Du lediglich den Footer? Und was meinst du mit '...nicht scrollt'?

Hab aber schon mal die Glaskugel befragt:
Der IE6 befindet sich auf Deiner Seite im Quirksmode, weil Du als erstes einen XML-Prolog eingebaut hast. Dieser ist für die abweichende Darstellung dort verantwortlich. Nimm den raus und liefere die Zeichencodierung mittel einer .htaccess-Datei oder über einen PHP-Header. Dieses Thema hatten wir hier schon öfter, z.B. die Posts 11 und 12 hier:
http://forum.jswelt.de/allgemeines/37546-probleme-aufl-sung.html#post244880

Sticky Footer + Page zentriert

Miazawa

New member

anna55

Moderator

Miazawa

New member

anna55

Moderator

Miazawa

New member

anna55

Moderator

Miazawa

New member

anna55

Moderator

Miazawa

New member

anna55

Moderator

Miazawa

New member

Miazawa

New member

anna55

Moderator