Ergebnis 1 bis 8 von 8
  1. 17-08-2005, 20:49 #1
    Harry Hunt
    Harry Hunt ist offline Routinier
    registriert
    08-07-2005
    Ort
    Stuttgart, Baden-Württemberg
    Beiträge
    274

    Dreispealtiges Tabellenloses Liquid-Layout

    Ich hab' das neulich mal als Antwort auf eine Frage in Webdesign -> Allgemeines geschrieben, aber das schadet bestimmt nichts, das hier zu "archivieren", für den Fall, dass es jemand mal braucht.

    Also, hier ist ein einfaches Beispiel wie man ein dreispaltiges Layout ohne Tabellen umsetzen kann. Dabei gibt es links und rechts jeweils eine Spalte mit fester Breite und in der Mitte eine Spalte, die sich der Bildschirmauflösung anpasst (daher auch Liquid-Layout).

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>  
  <style type="text/css"> 
     body { 
      padding: 0; 
      margin: 0; 
     } 

    #header { 
      background: #F00; 
      height: 200px; 
      padding: 10px; 
    } 

    #footer { 
      clear: left; 
      background: #FF0; 
      height: 100px; 
    } 

   #leftcolumn { 
     width: 150px; 
     background: #0F0; 
     float: left; 
    } 

    #rightcolumn { 
      width: 150px; 
      background: #00F; 
      float: right; 
    } 

    #centercolumn { 
      margin: 0px 200px 0px 200px; 
    } 
  </style> 
</head> 
<body>  
  <div id="header">
    <h1>Tolle Seite</h1>  
  </div>  
  <div>  
    <div id="leftcolumn">  
      Links 
    </div>  
    <div id="rightcolumn">  
      Rechts 
    </div>  
    <div id="centercolumn">   
      Flie&szlig;text hier 
    </div>  
  </div>  
  <div id="footer">  
    Footertext
  </div> 
</body> 
</html>
    Das ganze wird in allen aktuellen und den meisten älteren Browsern korrekt angezeigt.
    Geändert von Harry Hunt (18-08-2005 um 20:41 Uhr)
    Zitieren Zitieren
  2. 18-08-2005, 18:51 #2
    Avatar von Liz
    Liz
    Liz ist offline König
    registriert
    29-12-2004
    Ort
    Halle S/A
    Beiträge
    806

    AW: Dreispealtiges Tabellenloses Liquid-Layout

    Hallo Harry !

    Mal vielen Dank! Ich werde das jetzt mal durchackern.
    aber eine Frage habe ich noch - ist die Reihenfolge der Regeln in der CSS-Datei eigentlich egal?
    weil ich sehe die Regel für den Footer steht ja relativ weit oben.
    Zur Erklärung: Es hat mich hier nur irritiert, weil der Clearbefehl, über den Regeln für die Container mit der Eigenschaft float stehen.

    Liebe Grüße
    Liz
    ein an pit-r ... Immer am Lernen
    Zitieren Zitieren
  3. 18-08-2005, 19:31 #3
    pit-r Guest

    AW: Dreispealtiges Tabellenloses Liquid-Layout

    Hi!

    Na - vielleicht kommt Harry ja heute nich mehr rein. Die Reihenfolge is wurscht (jedenfalls bei dem, worum es Dir geht).

    Liebe Grüße - Pit
    Zitieren Zitieren
  4. 18-08-2005, 19:37 #4
    Avatar von Liz
    Liz
    Liz ist offline König
    registriert
    29-12-2004
    Ort
    Halle S/A
    Beiträge
    806

    AW: Dreispealtiges Tabellenloses Liquid-Layout

    Oh danke !

    Ok ! Ich dachte nur, das ist wegen der Vererbung.
    Festgelegt wird ja der Aufbau des Layouts im Quelltext.
    Richtig! (Hoffentlich)

    Vieeeeeelen Dank
    Liebe Grüße
    Liz
    ein an pit-r ... Immer am Lernen
    Zitieren Zitieren
  5. 26-09-2005, 23:52 #5
    Avatar von ZeitGeist
    ZeitGeist
    ZeitGeist ist offline Lounge-Member
    registriert
    26-04-2003
    Ort
    Outa Space
    Beiträge
    4.125

    AW: Dreispealtiges Tabellenloses Liquid-Layout

    Wenn man für die width statt px em verwendet passt sich das Layout auch unterschiedlichen Schriftgrößen an
    Zitieren Zitieren
  6. 13-11-2005, 16:48 #6
    Avatar von thrawn
    thrawn
    thrawn ist offline Foren As
    registriert
    01-01-2005
    Ort
    Hamburg
    Beiträge
    94

    AW: Dreispealtiges Tabellenloses Liquid-Layout

    Mal eine Frage zu diesem Layout: Wie bekomme ich es hin, dass sich #leftcolumn & #rightcolumn in der Höhe am Content orientieren? Hab schon viel diesbezüglich ausprobiert.

    Wenn ich jetzt zB möchte, dass die Hintergrundfarbe von #leftcolumn sich in der Höhe an der Größe des Contents orientiert - ich konnte dies bisher nur immer lösen, indem ich eine Tabelle einsetze, was man ja eigentlich vermeiden möchte.
    Zitieren Zitieren
  7. 13-11-2005, 23:22 #7
    Avatar von dkdenz
    dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Dreispealtiges Tabellenloses Liquid-Layout

    Das durchlesen:
    http://forum.jswelt.de/showthread.php?t=26993 (3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?)
    Vielleicht hilft's Dir ja was...
    Dirk Klar - Webdesign Lübeck
    Twitter
    G+
    Zitieren Zitieren
  8. 14-11-2005, 12:48 #8
    Avatar von thrawn
    thrawn
    thrawn ist offline Foren As
    registriert
    01-01-2005
    Ort
    Hamburg
    Beiträge
    94

    AW: Dreispealtiges Tabellenloses Liquid-Layout

    Jo, danke für den Hinweis dkdenz. Der Gedanke mit der Hintergrundgrafik kam mir auch schon, muss aber sagen, dass dieser Lösungsweg etwas unbefriedigend ist. Wohl aber die derzeit einzige CSS-getreue Variante.

    Wenn ich letzt richtig gelesen habe, soll mit CSS3 diese Problematik leichter realisierbar sein....

    ...na dann warten wir halt noch ne kleine Ewigkeit
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. Layout zentrieren
    Von Alarik im Forum CSS und (X)HTML
    Antworten: 9
    Letzter Beitrag: 25-01-2005, 23:11
  2. Firefox und Opera zeigen mein Layout falsch an
    Von Ugeen im Forum CSS und (X)HTML
    Antworten: 12
    Letzter Beitrag: 03-12-2004, 19:44
  3. Zweispaltiges Layout
    Von dipser im Forum Tutorials CSS und XHTML
    Antworten: 3
    Letzter Beitrag: 09-08-2004, 10:22
  4. tabellenfreies layout
    Von jsgreenhorn im Forum Allgemeines
    Antworten: 10
    Letzter Beitrag: 12-08-2003, 02:35

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln