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 

eye home zur Startseite
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. Entwicklungsingenieur/in im Bereich videobasierte Fahrerassistenzsysteme
    Robert Bosch GmbH, Leonberg
  2. Technical Consultant / Functional Expert CRM (m/w)
    ista International GmbH, Essen
  3. SAP Key User Technik (m/w)
    Rentschler Biotechnologie GmbH, Laupheim
  4. Administrator Linux (m/w) High Performance Computing
    Bechtle GmbH IT-Systemhaus Nürnberg, Nürnberg

Detailsuche



Anzeige

Folgen Sie uns
       


  1. Skylake-R

    Intel veröffentlicht 65-Watt-Quadcores mit GT4e-Grafik

  2. Brasilien

    Whatsapp schon wieder blockiert

  3. Microsoft

    SQL Server 2016 steht ab dem 1. Juni bereit

  4. Netzpolitik

    Edward Snowden ist genervt

  5. Elektroauto

    BMW vergrößert die Reichweite des i3 deutlich

  6. Patentklagen

    Nvidia und Samsung legen Rechtsstreit bei

  7. 100 MBit/s

    Telekom-Chef nennt Diskussionskultur zu Vectoring vergiftet

  8. Flyboard Air

    Neuer Weltrekord im Hoverboarden

  9. Pre-Touch

    Microsofts neues Display reagiert vor der Berührung

  10. Mobilcom-Debitel

    DVB-T2 in 1080p wird Freenet TV heißen



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Privacy-Boxen im Test: Trügerische Privatheit
Privacy-Boxen im Test
Trügerische Privatheit
  1. Kaspersky-Analyse Fast jeder Geldautomat lässt sich kapern
  2. Alphabay Darknet-Marktplatz leakt Privatnachrichten durch eigene API
  3. Verteidigungsministerium Ursula von der Leyen will 13.500 Cyber-Soldaten einstellen

LizardFS: Software-defined Storage, wie es sein soll
LizardFS
Software-defined Storage, wie es sein soll
  1. Security Der Internetminister hat Heartbleed
  2. Enterprise-IT Hunderte Huawei-Ingenieure haben an Telekom Cloud gearbeitet
  3. HPE Hyper Converged 380 Kleines System für das schnelle Erstellen von VMs

LG Minibeam im Test: Wie ein Beamer mein Begleiter wurde
LG Minibeam im Test
Wie ein Beamer mein Begleiter wurde
  1. Huawei P9 im Test Das Schwarz-Weiß-Smartphone
  2. HTC Vive im Test Zwei mal zwei Meter sind mehr, als man denkt
  3. Panono im Test Eine runde Sache mit ein paar Dellen

  1. Re: Deshalb bestelle ich so gut wie nie bei Amazon...

    Test_The_Rest | 06:59

  2. Re: ??

    John2k | 06:40

  3. Re: Wenn das in der Türkei passiert wäre...

    Marentis | 06:36

  4. Re: Ist so ein Gebaren auch aus Amazon USA bekannt..?

    Test_The_Rest | 06:36

  5. Re: Wozu für Werbe TV auch noch zahlen bloß wegen HD?

    Kakiss | 06:30


  1. 00:35

  2. 00:35

  3. 21:22

  4. 18:56

  5. 18:42

  6. 18:27

  7. 18:17

  8. 18:01


  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