Dreispealtiges Tabellenloses Liquid-Layout

**Harry Hunt** · 17-08-2005, 20:49

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.

**Liz** · 18-08-2005, 18:51

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

pit-r · 18-08-2005, 19:31

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

**Liz** · 18-08-2005, 19:37

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

**ZeitGeist** · 26-09-2005, 23:52

Wenn man für die width statt px em verwendet passt sich das Layout auch unterschiedlichen Schriftgrößen an

**thrawn** · 13-11-2005, 16:48

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.

**dkdenz** · 13-11-2005, 23:22

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...

**thrawn** · 14-11-2005, 12:48

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

Thema: Dreispealtiges Tabellenloses Liquid-Layout

LinkBack

Themen-Optionen

Anzeige

Dreispealtiges Tabellenloses Liquid-Layout

AW: Dreispealtiges Tabellenloses Liquid-Layout

AW: Dreispealtiges Tabellenloses Liquid-Layout

AW: Dreispealtiges Tabellenloses Liquid-Layout

AW: Dreispealtiges Tabellenloses Liquid-Layout

AW: Dreispealtiges Tabellenloses Liquid-Layout

AW: Dreispealtiges Tabellenloses Liquid-Layout

AW: Dreispealtiges Tabellenloses Liquid-Layout

Ähnliche Themen

Layout zentrieren

Firefox und Opera zeigen mein Layout falsch an

Zweispaltiges Layout

tabellenfreies layout

Lesezeichen

Lesezeichen

Berechtigungen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen