3 Spalten Layout

  • Hallo, ich habe heute versucht ein Layout mit Kopf und Fusszeile, sowie 3 Spalten zu machen, aber er klappt nicht wirklich... unter der linken Spalte und über der rechten Spalte ist immer ein leerer Bereich und ich weiß nicht, wie ich das beheben soll... :(
    Außerdem würde ich die Seite gerne fix haben, sodass sich alles dem Browserfenster anpasst...
    Kann mir bitte eine helfen?


    Mein Code ist:


    <style type="text/css">
    <!—


    body
    {
    text-align: center; /* Zentrierung IE */
    }


    #seitenbereich
    {
    text-align:left; /* Inhalt wieder links */
    margin: 0 auto; /* Zentrierung mitte */
    width: 1000px;
    background-color:silver;
    }


    #kopf
    {
    background-color:lightskyblue;
    }


    #links
    {
    float:left;
    width:13em;
    background-color:thistle;
    }


    #mitte
    {
    margin: 0 10em 0 13em;
    background-color:lightblue;
    }

    #rechts
    {
    float:right;
    width: 10em;
    background-color:yellowgreen;
    }

    #fuss
    {
    clear: both;
    background-color:lightskyblue;
    }

    -->
    </style>


    </head>
    <body>


    <div id="seitenbereich">


    <div id="kopf">
    <!-- w --><a class="postlink" href="http://www.HTML-Seminar.de">http://www.HTML-Seminar.de</a><!-- w --> - jetzt html lernen
    </div>


    <div id="links">
    <ul>
    <li>Startseite</li>
    <li>Impressum</li>
    </ul>
    </div>


    <div id="mitte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
    </div>


    <div id="rechts">
    Auf dieser Seite bekommen Sie Informationen zu ...
    </div>

    <div id="fuss">
    <!-- w --><a class="postlink" href="http://www.html-seminar.de">http://www.html-seminar.de</a><!-- w --> - Kontakt über .... [AT] html-seminar.de
    </div>


    </div>


    </body>

  • Hi, ich habs versucht, aber es ändert sich gar nichts :(


    Wo muss denn das height:100%; denn genau stehen??


    Und auf der Seite bei dir ist noch gar nichts drauf...

  • Zitat von &quot;aniaaa&quot;

    Hi, ich habs versucht, aber es ändert sich gar nichts :(


    Wo muss denn das height:100%; denn genau stehen??


    Und auf der Seite bei dir ist noch gar nichts drauf...


    die Eingabe 100% bringt janüscht, denn ein 'Auffüllen' der Seite erfolgt doch erst bei vorgenommenen Eingaben... und das dann automatisch.


    Einzig, wie ich es mal ausgeführt habe ist, der Seite Text oder Grafiken im Modus
    visibility:hidden hinzuzufügen. Diese Vorgabe benötigt gegenüber display:none seinen Platzhalter :!:


    Kommt eine Tabelle zum Einsatz liesse sich solcher Weg auch noch durch empty-cells: hide vornehmen, worin dann aber tatsächlich kein Eintrag drin stehen darf - also nicht einmal ein &nbsp;

  • das verstehe ich leider gar nicht :( bin noch totaler anfänger mit css...




    und irgendwie krieg ich die nicht alle ordentlich nebeneinander... so das kein grau mehr zu sehen ist :(


    was mach ich bloß falsch??

  • Hi aniaaa


    Die Reihenfolge spielt eine Rolle, nach dem div #links kommt #rechts und dann #mitte.
    Ich habe die CSS etwas verändert, so kannst du sie kopieren.
    Du muß nur noch <div id="mitte"> nach unten kopieren vor <div id="fuss">, dann klappt
    es mit deinem Layout.



    Gruß Pit

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!