CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen

Präzise Positionierungen in mehrspaltigen Layouts

Mit CSS3 Grid Layout veröffentlicht das World Wide Web Consortium (W3C) seinen ersten Arbeitsentwurf (Working Draft - WD) einer Spezifikation, die Layouts ermöglicht, die denen von Zeitungen oder Büchern am ehesten entsprechen. Dabei funktioniert das Ganze ohne mehrfach verschachtelte Tabellen.

Anzeige

Zusammen mit dem CSS3 Multi Column Layout Module (WD vom 6. Juni 2007), dem CSS3 Advanced Layout Module (WD vom 9. August 2007) und dem heute veröffentlichten Working Draft des CSS 3 Grid Positioning Module bietet CSS3 nun vieles, das mit CSS1 und CSS2 nur mit Mühen umzusetzen war oder den Einsatz von Tabellen erforderte. Von den ersten beiden Modulen gab es bereits Arbeitsentwürfe, die jedoch auf das Jahr 2005 datiert sind.

Das Grid Positioning Module bietet die beiden Eigenschaften grid-columns für Spalten und grid-rows für Reihen an. Der Ansatz ist dabei vom Advanced Layout Module etwas verschieden. Letzteres unterteilt wie bei klassischen Tabellendesigns das Layout in einzelne Bereiche, die mehr oder weniger fest sind. Grid Positioning erlaubt hingegen die Positionierung an einem Gitternetz.

W3C Grid Layout: 3 Spalten; 6 und 2 Gittereinheiten sowie Standardabstände um das Layout herum
W3C Grid Layout: 3 Spalten; 6 und 2 Gittereinheiten sowie Standardabstände um das Layout herum

Das Bild in obigem Beispiel wird etwa mit

body { grid-columns: * * (0.5in * *)[2];
    grid-rows: 20% *;
    columns:3; column-gap:0.5in; }
    
img { float:page top left; float-offset: 4gr 1gr; }

positioniert. Die Eigenschaften Columns und column-gap sind aus dem Multi Column Layout Modul und beschreiben zunächst ein klassisches Drei-Spalten-Layout, das sich etwa in gedruckten Medien findet. Um das Bild zu definieren, braucht es jedoch weitere Möglichkeiten, die mit grid-columns bzw. -rows möglich werden. "* *" im Wert der grid-columns beschreibt die ersten beiden Spalten, in Klammern steht der Abstand zum Grid sowie weitere zwei Spalten und das "[2]" sorgt für eine Wiederholung der Werte, die in Klammern als wiederholbar gekennzeichnet wurden.

CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen 

datenimperator 13. Sep 2007

Soll denn die zu erwartende Realität der mangelhaften Implementierungen dazu führen...

squanto 13. Sep 2007

es gibt übrigens schon ähnliche Projekte welche dies mit herkömmlichem CSS schaffen...

Crocus 13. Sep 2007

Sry, aber ich gebe dem Plattler hier vollkommen recht. Das was das W3C schon verbrochen...

keinname 13. Sep 2007

Grids, Canvas, StackPanels, DockPanels... funktioniert alles wunderbar. Auch das Styling...

LeVito 13. Sep 2007

Das war/ist auch meine größte Hoffnung, als ich die Meldung gelesen habe. Leider geht...

Kommentieren


Thomas goes .NET / 13. Sep 2007

CSS3 wird mehrspaltige Layouts ermöglichen

YellowLeds Weblog / 12. Sep 2007

CSS3 - bitte beschleunigen!



Anzeige

  1. Software-Entwickler (m/w) SAP ABAP / SAP ABAP OO
    AOK Systems GmbH, Frankfurt am Main
  2. Elektronikerin / Elektroniker für die Qualitätssicherung
    VITRONIC Dr.-Ing. Stein Bildverarbeitungssysteme GmbH, Wiesbaden
  3. IT-Experte (m/w) Client Applikationsmanagement
    Aareal Bank AG, Wiesbaden
  4. Software-Entwickler (m/w) für Linux-Umgebung
    RIEKE COMPUTERSYSTEME GmbH, Martinsried

 

Detailsuche


Spiele-Angebote
  1. Grand Theft Auto V [PC Download]
    53,99€ (Vorbesteller-Preisgarantie) USK 18 - Release 14.04.
  2. GTA 5 (PC)
    59,00€ (Vorbesteller-Preisgarantie) USK 18 - Release 14.04.
  3. TIPP: Xbox One Wired Controller für Windows
    43,99€

 

Weitere Angebote


Folgen Sie uns
       


  1. Watch Urbane LTE im Hands On

    LGs Edelstahl-Uhr für geduldige Golfer

  2. Qi Wireless Charging

    Ikea-Möbel laden schnurlos Akkus

  3. Linux-Desktops

    Xfce 4.12 ist endlich fertig

  4. Fahrerdienst

    Uber verschweigt monatelang einen Server-Einbruch

  5. Linux 4.0

    Streit um das Live-Patching entbrennt

  6. Spieldesign

    Spiele sollen sich nicht wie Filme anfühlen

  7. MotionX

    Schweizer Uhrenhersteller gegen Apple

  8. Grafikfehler

    Macbook-Reparaturprogramm jetzt auch in Deutschland

  9. Uber

    Taxi-Dienst wächst in Deutschland nicht weiter

  10. Überwachung

    Apple-Chef Tim Cook fordert mehr Schutz der Privatsphäre



Haben wir etwas übersehen?

E-Mail an news@golem.de



Freenet: Das anonyme Netzwerk mit der Schmuddelecke
Freenet
Das anonyme Netzwerk mit der Schmuddelecke
  1. Geheimdienstchef Clapper Cyber-Armageddeon ist nicht zu befürchten
  2. U-Bahn Neue Überwachungskameras können schwenken und zoomen
  3. Matthew Garrett Intel erzwingt Entscheidung zwischen Sicherheit und Freiheit

Technical Preview im Test: So fühlt sich Windows 10 für Smartphones an
Technical Preview im Test
So fühlt sich Windows 10 für Smartphones an
  1. Internet Explorer Windows 10 soll asm.js voll unterstützen
  2. Microsoft Windows 10 erhält Anmeldestandard Fido
  3. Mobiles Betriebssystem Technical Preview von Windows 10 für Smartphones ist da

Lifetab P8912 im Test: Viel Rahmen für wenig Geld
Lifetab P8912 im Test
Viel Rahmen für wenig Geld
  1. Medion Lifetab P8912 9-Zoll-Tablet mit Infrarotsender kostet 180 Euro
  2. Medion Life X5001 5-Zoll-Smartphone mit Full-HD-Display für 220 Euro
  3. Lifetab S8311 8-Zoll-Tablet mit UMTS-Modem im Metallgehäuse für 200 Euro

  1. Re: Nur weil er schlechte filmische Spiele als...

    Der Held vom... | 16:07

  2. Re: Aus- und Einschalten

    Mixermachine | 15:58

  3. Re: Daseinsberechtigung von filmische Spiele.

    Kakiss | 15:53

  4. Re: Nebenbei-Frage zu Linux

    EpicLPer | 15:46

  5. Re: Dumm nur,

    mikehak | 15:44


  1. 15:39

  2. 13:23

  3. 13:12

  4. 11:27

  5. 10:58

  6. 10:13

  7. 15:24

  8. 14:40


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel