Abo
  • Services:

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.

Artikel veröffentlicht am ,

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.

Inhalt:
  1. CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen
  2. CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen

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 
  1. 1
  2. 2
  3.  


Anzeige
Top-Angebote
  1. 0,00€
  2. (heute u. a. Be quiet Dark Base 900 139,90€, Intenso 960-GB-SSD 149,90€)
  3. (u. a. Far Cry 5, Skyrim Special Edition, Tekken 7, The Witcher 3, Ghost Recon Wildlands...

datenimperator 13. Sep 2007

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

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

LeVito 13. Sep 2007

Tabellenlayout muss nicht sein. Auch, wenn su "quick & dirty" manches erstmal einfacher...

Laury 12. Sep 2007

und ganz Oben stehen die Content-Strukturalisten, für die es eigentlich nur Text gibt...


Folgen Sie uns
       


3D Mark Raytracing Demo (RTX 2080 Ti vs. GTX 1080 Ti)

Wir haben die Raytracing Demo von 3D Mark auf Nvidias neuer Geforce RTX 2080 Ti und der älteren Geforce GTX 1080 Ti abspielen lassen.

3D Mark Raytracing Demo (RTX 2080 Ti vs. GTX 1080 Ti) Video aufrufen
Echo Link: Amazon hält sich für Sonos
Echo Link
Amazon hält sich für Sonos

Sonos ist offenbar für Amazon ein Vorbild. Anders ist die Existenz des Echo Link und des Echo Link Amp nicht zu erklären. Aber ohne ein Ökosystem wie das von Sonos sind die Produkte völlig unsinnig.
Ein IMHO von Ingo Pakalski

  1. Smarte Echo-Lautsprecher Amazon macht Alexa schlauer
  2. Amazon Alexa Echo-Lautsprecher können bald über Skype telefonieren
  3. Zusatzbox Amazon bringt Alexa mit Echo Auto in jedes Auto

Elektroroller-Verleih Coup: Zum Laden in den Keller gehen
Elektroroller-Verleih Coup
Zum Laden in den Keller gehen

Wie hält man eine Flotte mit 1.000 elektrischen Rollern am Laufen? Die Bosch-Tochter Coup hat in Berlin einen Blick hinter die Kulissen der Sharing-Wirtschaft gewährt.
Ein Bericht von Friedhelm Greis

  1. Neue Technik Bosch verkündet Durchbruch für saubereren Diesel
  2. Halbleiterwerk Bosch beginnt Bau neuer 300-mm-Fab in Dresden
  3. Zu hohe Investionen Bosch baut keine eigenen Batteriezellen

Grafikkarten: Das kann Nvidias Turing-Architektur
Grafikkarten
Das kann Nvidias Turing-Architektur

Zwei Jahre nach Pascal folgt Turing: Die GPU-Architektur führt Tensor-Cores und RT-Kerne für Spieler ein. Die Geforce RTX haben mächtige Shader-Einheiten, große Caches sowie GDDR6-Videospeicher für Raytracing, für Deep-Learning-Kantenglättung und für mehr Leistung.
Ein Bericht von Marc Sauter

  1. Tesla T4 Nvidia bringt Googles Cloud auf Turing
  2. Battlefield 5 mit Raytracing Wenn sich der Gegner in unserem Rücken spiegelt
  3. Nvidia Turing Geforce RTX 2080 rechnet 50 Prozent schneller

    •  /