Zentrierter Footer

wolf · 2. April 2014

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 · 2. April 2014

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 · 3. April 2014

Aber wenn jetzt n 3. Teil dazukommt?

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

Basi · 3. April 2014

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 · 3. April 2014

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

Zentrierter Footer

Jetzt mitmachen!

Teilen