Zentrierter Footer

wolf

Abend,

Ich steh grad aufm Schlauch.
Ich will einen Zentrierten Footer, drinnen ein paar article's und dieser soll responsive sein.
Struktur:

HTML

<footer>
	<article>
	</article>
	<article>
	</article>
</footer>

Soll:

cottton

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 left

Dadurch 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

wolf

Aber wenn jetzt n 3. Teil dazukommt?

Und zur Frage, das habe ich halt fürs Bild manuell gemacht

Basi

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

<!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>&Uuml;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>

Alles anzeigen

wolf

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!