Zentrierter Footer
-
-
Und was ist die frage?
Wegen Responsive:
Du willst sicher mit media queries arbeiten.
Ich bin zwar fuer responsive desings, allerdings gegen uebermaessigen gebrauch von media queries.
(und gegen kacke Notebooktastaturen :D)Ohne schnickschnak wuerde ich es so aufbauen, dass:
#artikel_links
width 50%
text-align right#artikel_rechts
width 50%
text-align leftDadurch solltes Du das gewuenschte Ergebnis bekommen und der Browser kuemmert sich.
soll heissen: wenn Fenster zu klein, dann knallt das rechte Element nach unten.EDIT: die beiden Artikel muessen wohl noch in einem (zB) div liegen, welches auf 100% Breite alleine steht
-
Aber wenn jetzt n 3. Teil dazukommt?
Und zur Frage, das habe ich halt fürs Bild manuell gemacht
-
Da könnte JavaScript helfen:
Das Script berechnet die Breite der section's im div im footer (so kommt man wohl auf Filmideen wie Inception) und positioniert dann den div-Container. Jaja, der gute alte <CENTER>-Tag Das Ganze funktioniert übrigens ohne das im CSS Dokument jemals einer der abgefragten Werte (width, margin, padding) angegeben wurde.
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <title>Footer</title> <meta charset="ISO-8859-1"> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content=""> <style> body, footer, div, section, h4, ul, li { margin: 0; padding: 0; list-style: none; } footer { display: block; width: 100%; background-color: #D7D7D7; overflow: auto; } footer div { position: relative; left: 50%; background-color: #A6A6A6; overflow: auto; } footer div section { float: left; padding: 10px; } </style> <script> var width = false, marginL = false, marginR = false, paddingL = false, paddingR = false, range = 0; function getOuterWidth(obj){ marginL = parseInt(window.getComputedStyle(obj, null).getPropertyValue("margin-left").replace(/\D/g,'')); paddingL = parseInt(window.getComputedStyle(obj, null).getPropertyValue("padding-left").replace(/\D/g,'')); width = parseInt(window.getComputedStyle(obj, null).getPropertyValue("width").replace(/\D/g,'')); paddingR = parseInt(window.getComputedStyle(obj, null).getPropertyValue("padding-right").replace(/\D/g,'')); marginR = parseInt(window.getComputedStyle(obj, null).getPropertyValue("margin-right").replace(/\D/g,'')); return marginL + paddingL + width + paddingR + marginR; } window.onload = function(){ var elements = document.getElementsByTagName("footer")[0].getElementsByTagName("section"); for(i = 0; i < elements.length; i++){ range = range + getOuterWidth(elements[i]); } var container = document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0]; container.style.width = range +"px"; container.style.marginLeft = "-"+ range/2 +"px"; } </script> </head> <body> <footer> <div> <section><h4>Entwickler</h4> <ul> <li>Login</li> <li>Registrieren</li> <li>Profil</li> </ul> </section> <section><h4>Über</h4> <ul> <li>Klo-papier-reit Son Typ</li> <li>Gimpressum</li> <li>Datenhandel</li> <li>Niezens</li> </ul> </section> </div> </footer> </body> </html>
-
Danke Basiii, habe gerade kein Bock mich drum zu kümmern, habs mir einfach nach cotton gemacht, wenn ich mal Langeweile hab werd ich es ändern
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!