Anzeige

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

YellowLeds Weblog / 12. Sep 2007

CSS3 - bitte beschleunigen!



Anzeige

  1. Business Consultant (m/w) SAP-Template Ersatzteile Wholesale
    Daimler AG, Stuttgart
  2. Methodenexperte (m/w) EAM
    Anovio AG, München, Ingolstadt, Erlangen
  3. IT-Bereichsleiter (m/w)
    über JobLeads GmbH, München
  4. IT-Security-Berater im Kundenbereich (m/w)
    TÜV Informationstechnik GmbH, Essen

Detailsuche


Hardware-Angebote
  1. Geforce GTX 970/980/980Ti Grafikkarte kaufen und Rise of the Tomb Raider gratis erhalten
  2. Microsoft Surface Book bestellen und bis zu 550 Euro Cashback erhalten
  3. EVGA GeForce GTX 970 SSC ACX 2.0+
    339,00€ statt 384,90€

Weitere Angebote


Folgen Sie uns
       


  1. Descent of the Shroud

    Grey Goo erhält kostenlose DLC-Kampagne

  2. Tuxedo Infinitybook

    Das voll konfigurierbare Linux-Macbook

  3. Flash-Speicher

    Micron spricht über 768-GBit-Chip

  4. Daybreak Game Company

    Zombiespiel H1Z1 wird aufgeteilt

  5. Twitter

    Neue Sortierung der Timeline kommt

  6. Error 53

    Unautorisierte Ersatzteile sperren iPhone

  7. Escape Dynamics

    Firma für mikrowellenbetriebene Raumschiffe ist bankrott

  8. Deutsche Bahn

    Wlan für alle ICE-Fahrgäste möglicherweise erst 2017

  9. Die Woche im Video

    Raider heißt jetzt Twix ...

  10. Alpenföhn

    Der Olymp soll 340 Watt an Leistung abführen



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Raspberry Pi Zero angetestet: Der Bastelrechner für stille, dunkle Ecken
Raspberry Pi Zero angetestet
Der Bastelrechner für stille, dunkle Ecken
  1. Jaguarboard Noch ein Bastelcomputer mit Intel-Chip
  2. Cricetidometer mit Raspberry Pi Ein Schrittzähler für den Hamster
  3. Orange Pi Lite Preis- und Größenkampf der Bastelcomputer

Eizo Foris FS 2735 im Test: Beinahe der Wunschlos-glücklich-Monitor
Eizo Foris FS 2735 im Test
Beinahe der Wunschlos-glücklich-Monitor

Blind programmieren: Wenn der Computer schneller spricht, als ein Sehender hört
Blind programmieren
Wenn der Computer schneller spricht, als ein Sehender hört
  1. Windows 10 Neues Insider Build enthält viele Fehler

  1. Re: TLC Speicher Risiken...

    sofries | 18:26

  2. Re: Warum Aluminium?

    sofries | 18:21

  3. Re: Zombiespiele? Spielezombies!

    hw75 | 18:19

  4. Re: Eigenschreibweise von Open Source Projekten

    Smiled | 18:16

  5. Re: Leider nur eine Deutsche Tastatur

    SelfEsteem | 18:13


  1. 15:00

  2. 12:00

  3. 11:25

  4. 14:45

  5. 13:25

  6. 12:43

  7. 11:52

  8. 11:28


  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