Marco: CSS-Layout-Hilfe

SELF-Forum

CSS-Layout-Hilfe

Marco
– Informationen zu den Bewertungsregeln

Ich möchte ein Layout (kopfzeile, zweigeteilter Mittelbereich und Fusszeile) realisieren. Zusätzlich soll, wenn der Bereich nicht die ganze Seite füllt, die Fusszeile immer unten stehen. Beides habe ich realisiert bekommen (mit dem "min-height-hack").
Mein einziges Problem ist jetzt, dass ich normaler Weise den gesamten Inhalt in ein DIV "Seite" packe um es auf eine bestimmte Breite zu beschränken und zentriert auszurichten. Geht eigentlich auch ganz einfach mit:

.seite {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    border:1px solid #C0C0C0;
  }

Leider geht dann die Anweisung mit der Fusszeile ganz unten nicht mehr.
Eine Lösung hierfür wäre noch die Höhe height:100% für .seite anzugeben. Dann geht es im IE einwandfrei und bei wenig Inhalt auch bei Firefox (mit kleinem Schönheitsfehler).
Wenn ich jedoch mehr Inhalt reinschreibe geht beim Firefox der Text aus dem .inhalt und über die Border von .seite. Das sieht ziemlich doof aus.

Wie kann ich dieses Problem lösen, dass es in beiden Browsern wie gewollt läuft? Hier mal der komplette Code der im IE läuft und im FF diesen "Überlauf"-Fehler erzeugt:

______________________________________________________________
______________________________________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
 <title>Layout</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
  html, body {
    height: 100%;
  }

body {
    margin: 0;
    padding: 0;
  }

.seite {
   height: 100%;
   width: 990px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    border:1px solid #C0C0C0;
  }

.prop {
    height: 100%;
    float: right;
    width: 1px;
    margin: -150px 0 -51px 0;
  }

.inhalt {

padding: 5px;
    width: 770px;
    margin: 0 0 0 0;
    overflow:visible;
    border 1px solid #C0C0C0;
  }

.info {

float: right;
    width: 200px;
    margin: 0 0 0 0;
    padding: 5px 0 0 5px;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
  }

.kopf {
    height:150px;
    background:#e6e6e6;
    border-bottom:1px solid #C0C0C0;
  }

.fuss {
    clear:both;
    background:#e6e6e6;
    height:50px;
    border-top:1px solid #C0C0C0;
  }
</style>
</head>
<body>
<div class="seite" align="center">
 <div class="kopf">Kopfzeile</div>
  <div class="prop"></div>

<div class="info">
  Hier steht Text.<br>
 Der kann ziemlich lang sein.<br>
 <br>
 <br>
 Wirklich!!!!<br>
 <br>
 <br>
  Hier steht Text.<br>
Der kann ziemlich lang sein.<br>

</div>
  <div class="inhalt">

Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>

<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>

<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>

<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>
<br>
Wirklich!!!!<br>
<br>
<br>
Hier
<br>
<br>
Hier steht Text.<br>
Der kann ziemlich lang sein.<br>
<br>

</div>
  <div class="fuss">Fußzeile</div>
  </div>

</body>

</html>

__________________________________________________
__________________________________________________

Danke für eure Hilfe
Marco

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS-Layout-Hilfe

    RuD
    – Informationen zu den Bewertungsregeln

    Seid gegrüßt!
    Du solltest dem InhaltsDiv keine explizite Höhe verpassen. So läuft der Text dann nicht darüberhinaus. Und für die Fußzeile schau mal hier

    --
    Bis Später
    RuD
    ________________________________________________________________
    SelfCode: ie:% fl:( br:^ va:) ls:< fo:| rl:( n4:& ss:) de:> js:| ch:| mo:| zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS-Layout-Hilfe

      marco
      – Informationen zu den Bewertungsregeln

      Seid gegrüßt!
      Du solltest dem InhaltsDiv keine explizite Höhe verpassen. So läuft der Text dann nicht darüberhinaus. Und für die Fußzeile schau mal hier

      Danke für deine Anregung. Wenn ich dem DIV-Element keine Höhe verpasse ist die Fusszeile bei wenig Inhalt weiter oben, also nicht am unteren Rand der Seite. Das will ich ja grade nicht. Ich habe mir auch deinen Link zu den Footers durchgelesen.
      Das würde generell funktionieren, doch ich will keinen fixierten immer zu sehenden Seitenabschluss sondern einen ganz normalen Schlussbereich unter dem Inhalt. Das heißt wenn viel Text auf der Seite ist, ist die Fusszeile nicht zu sehen, erst wenn ma runter scrolled (wie in dem Beispiel von oben im IE, das gleiche ohne den Überlauf-Bug möchte ich auch im FF realisieren können).

      Marco

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS-Layout-Hilfe

        Inita Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hoi,

        schaumal meine Beispiele:

        version 1
        http://inix.in.funpic.de/stfooter.html

        version 2
        http://inix.in.funpic.de/stickself.html

        HF,
        Inita

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS-Layout-Hilfe

          marco
          – Informationen zu den Bewertungsregeln

          hoi,

          schaumal meine Beispiele:

          version 1
          http://inix.in.funpic.de/stfooter.html

          version 2
          http://inix.in.funpic.de/stickself.html

          HF,
          Inita

          Danke für Links, ich habe die Links von deiner Seite genutzt und den CSS-Code von http://ryanfait.com/sticky-footer/layout.css angepasst und es geht jetzt auch mit 2 Spalten im Mittelteil. Danke! Der Übersicht halber hier nochmal mein Code der jetzt in IE und FF funktioniert:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
           <head>

          <title>A CSS Sticky Footer</title>
          <style type="text/css">
            * {
           margin: 0;
          }
          html, body {
           height: 100%;
          }

          .header {
           height:150px;
            width: 990px;
              margin-left: auto;
              margin-right: auto;
            background: #CCCC99;
            border-top: 1px solid #C0C0C0;
            border-bottom: 1px solid #C0C0C0;

          }

          .wrapper {
           min-height: 99%;
           height: auto !important;
           height: 99%;
           margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
            width: 990px;
            margin-left: auto;
            margin-right: auto;
            border-left: 1px solid #C0C0C0;
            border-right: 1px solid #C0C0C0;
            }

          .inhalt {
              float: left;
              padding: 5px;
              width: 770px;
              margin: 0 0 0 0;
              overflow:visible;
              border: 0px solid #C0C0C0;
            }

          .info {

          float: right;
              width: 200px;
              margin: 0 0 0 0;
              padding: 5px 0 0 5px;
              border-left: 1px solid #C0C0C0;
              border-bottom: 1px solid #C0C0C0;
            }

          .footer  {
           height: 50px;
            width: 990px;
              margin-left: auto;
              margin-right: auto;
            background: #CCCC99;
            border: 1px solid #C0C0C0
             /* .push must be the same height as .footer */
          }

          .push{
           height: 50px;
            clear: both;
          }

          </style>

          </head>
           <body>

          <div class="wrapper">

          <div class="header">
              <h1>BLABLA</h1>
             </div>

          <div class="info">
             <h2>A CSS sticky footer that just works</h2>

          We've all tried to use a <strong>sticky footer</strong> one time
                or another, but they never seem to come out right, do they? Well, the
                days of a hard to understand CSS-based <strong>sticky footer</strong>
                are thankfully over. In just a few simple CSS classes with minimal
                extra HTML markup, I've fashioned a <strong>sticky footer</strong>
                that even beginners can get a handle on. It's been tested in IE 5 and
                up, Firefox, Safari and Opera.

          </div>
                <div class="inhalt">
                <h2>Usage of the CSS</h2>
             <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>

          Absolutely. There are no terms, licenses, fees or requirements. Use it as you will.
                If you find the kindness to link to me on your site, I'd appreciate it, but it's by
                no means necessary. Have fun, and don't be afraid to ask me any questions or
                send me your thoughts.

          dsg4ewt4et<br>
          TEST<br>
                sdgsfg<br>
                dsg4ewt4et<br>
          TEST<br>
                sdgsfg<br>
                dsg4ewt4et<br>
          TEST<br>
                sdgsfg<br>
                dsg4ewt4et<br>

          </div>

          <div class="push"></div>

          </div>

          <div class="footer">
             <p>Copyright &copy; 2006-2007 Ryan Fait | All rights reserved.<br />

          You may not reproduce this example without written permission from Ryan Fait</p>
            </div>

          </body>
          </html>

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS-Layout-Hilfe

            Inita Homepage des Autors
            – Informationen zu den Bewertungsregeln

            gern gesehen,

            nur bitte schreib doch <br /> statt <br>, ist doch ein xHTML Dok. ;)

            LG, Inita

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln