CSS - Spalten Layout

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS - Spalten Layout

    Hallo,

    brauche mal einen CSS Tipp:

    Habe ein Layout das wie folge aussehen soll (beispielhaft)

    - Oben Header, Zeile 100% Breite
    - dann zwei Spalten (linke in Rot, Rechte in Gelb)
    - dann Footer, 100% Breite

    Wie bekomme ich es hin, dass die linke (rot) und rechte (gelb) Spalte jeweils gleichhoch sind, je machdem in welcher Spalte mehr Text drin ist.

    Ich finde das ist eine ziemlich tricky Frage, oder?

    Jens
    http://www.NoteStore.de
    http://www.diaet-community.de
    http://www.jensn.de
    http://www.KinderFlohmarkt.de

  • #2
    starten kannst du schon mal hier: http://www.css4you.de/wslayout1/ex0008.html dann entsprechend dein Bedarf anpassen.

    Kommentar


    • #3
      Danke für den Tipp...

      ... aber derartige Turorials kenn eich zuhauf.
      Ich suche GENAU die Lösung für mein Problem :-)

      Jens
      http://www.NoteStore.de
      http://www.diaet-community.de
      http://www.jensn.de
      http://www.KinderFlohmarkt.de

      Kommentar


      • #4
        mitte {
        margin: 100px 0px;
        border: 2px solid #000;
        padding: 0px;
        background-color: #FFF;
        }

        <div class="mitte">
        <table>
        <tr>
        <td>inhalt links</td>
        <td>inhalt rechts</td>
        </tr>
        </table>
        </div>

        so vieleicht???

        Kommentar


        • #5
          Neee...

          ... habe es mitlerweile gelöst. Bin wieder zu Tabellen + CSS übergegangen :-(

          Eine Lösung würde mich trotzdem interessieren
          Jens
          http://www.NoteStore.de
          http://www.diaet-community.de
          http://www.jensn.de
          http://www.KinderFlohmarkt.de

          Kommentar


          • #6
            basierend auf das Bsp von CSS4U, brauchst du nur ein bisschen zu modifizieren, etwa so:
            Code:
            body 
            {
             font-family:Verdana;
             font-size:12px;
             background-color:#ffefde;
             [color=red]height:100%;[/color] /* elternelement max. Höhe definieren */
            }
            
            #left {
            [color=red]height:100%;[/color] /* höhe auf 100% */
            [color=red]width:50%;[/color] /* breite auf 50% */
            float:left;
            line-height:18px;
            [color=red]background-color:#ff0000;[/color] /* farbe rot */
            }
            
            #content {
            [color=red]height:100%;[/color] /* höhe auf 100% */
            [color=red]width:50%;[/color] /* breite auf 50% */
            float:right;
            [color=red]background-color:#ffff00;[/color] /* farbe gelb */
            }
            sollte funz

            Kommentar

            Lädt...
            X