Ergebnis 1 bis 8 von 8
LinkBack URL
About LinkBacks-
17-08-2005, 20:49 #1
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).
Das ganze wird in allen aktuellen und den meisten älteren Browsern korrekt angezeigt.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ßtext hier </div> </div> <div id="footer"> Footertext </div> </body> </html>
Geändert von Harry Hunt (18-08-2005 um 20:41 Uhr)
-
18-08-2005, 18:51 #2
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
Lizein
an pit-r ... Immer am Lernen
-
18-08-2005, 19:31 #3pit-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
-
18-08-2005, 19:37 #4
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
Lizein an pit-r ... Immer am Lernen
-
26-09-2005, 23:52 #5
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
-
13-11-2005, 16:48 #6
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.
-
13-11-2005, 23:22 #7
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...
-
14-11-2005, 12:48 #8
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Ähnliche Themen
-
Layout zentrieren
Von Alarik im Forum CSS und (X)HTMLAntworten: 9Letzter Beitrag: 25-01-2005, 23:11 -
Firefox und Opera zeigen mein Layout falsch an
Von Ugeen im Forum CSS und (X)HTMLAntworten: 12Letzter Beitrag: 03-12-2004, 19:44 -
Zweispaltiges Layout
Von dipser im Forum Tutorials CSS und XHTMLAntworten: 3Letzter Beitrag: 09-08-2004, 10:22 -
tabellenfreies layout
Von jsgreenhorn im Forum AllgemeinesAntworten: 10Letzter Beitrag: 12-08-2003, 02:35
Lesezeichen