Vertikales Menü geht über Footer, anstatt Footer Bereich weiter nach unten zu schieben

Johny · 4. Januar 2014

Habe das Layout meiner Homepage geändert. Navigation ist vertikal.

Oben Header, links stehen die Inhalte, rechts das Menü und unten der Footer:

[Blockierte Grafik: http://www.kostenlos-erstellen.de/forenbilder/layout.png]

Das Problem: steht wenig Text im Inhalt - dann wird die Höhe kleiner als die das Menü. Das Menü überschneidet sich dann unten am Footer und das soll eben nicht sein - das Footer soll wenn überhaupt nur an das Menü angrenzen.

Erkennt man, wenn man auf Kontakt geht:
http://www.kostenlos-erstellen.de/kontakt.php

Die Seiten sind alle als .php-dateien gespeichert, jedoch nur weil der Nav-Bereich rechts eine php-include Funktion besitzt. Alles andere sollte Html5 sein.

Basi · 4. Januar 2014

Ich verstehe das Problem nicht ganz, es handelt sich doch hier um eines der simpelsten Boxmodelle. Ich steige absolut nicht durch deinen Seitenaufbau durch, du brauchst doch nur 4 Boxen welche du dann mit Inhalt füllst:

HTML

<body>




  <div id="header"></div>
  <div id="content">
    <h2>Page Headline</h2>
    <h4>Content Headline</h4>
    <p style="display: block;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
    duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="menu">
    <h3>Menu</h3>
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
  <div id="footer"></div>




</body>

Alles anzeigen

CSS

body, div {
  margin: 0;
  padding: 0;
}




body {
  width: 600px;
  margin: 0 auto;
}




div#header {
  height: 100px;
  background: green;
}




div#content {
  width: 400px;




  float: left;
  background: blue;
}




div#menu {
  width: 200px;
  height: 200px;
  float: right;
  background: red;
}




div#footer {
  clear: both;
  height: 100px;
  background: green;
}

Alles anzeigen

Wenn du nun den paragraph-Tag mit dem CSS display-Befehl aus/einblendest siehst du wie sich der footer wunderbar entweder an der Navigation oder am Inhalt orientiert, je nachdem was in dem Fall weiter nach unten ragt.

Wenn du das Menü relativ positionierst ist es nicht wunderlich das der Footer sich nicht um die Höhe davon schert.

Vertikales Menü geht über Footer, anstatt Footer Bereich weiter nach unten zu schieben

Jetzt mitmachen!

Teilen