Abo
  • Services:

CSS3 Grid Layout: Webseiten-Layout wie bei Zeitungen

Insgesamt sind also sechs logische Spalten plus zwei Abstände definiert, wobei zwei Gitterspalten jeweils eine Textspalte ausmachen. Das Bild wird nun links an der vierten Gitterspalte und unterhalb der ersten Gitterreihe mit "float-offset" positioniert. Dabei orientiert sich die Positionierung an "float". "4gr" steht für vier Grid Units, wobei jede Gittereinheit sich durch den Abstand zwischen zwei Gitterlinien definiert, also die Abstandsangabe 0.5in unter grid-columns mitgezählt wird.

Stellenmarkt
  1. ProLeiT AG, Leverkusen
  2. Versicherungskammer Bayern, Saarbrücken

Die grobe Positionierung ist bereits mit %22float%22 möglich. Das Gitter erlaubt hingegen eine präzisere Positionierung von Elementen, die sonst unmöglich wäre, so der Working Draft. Gegenüber Tabellen besteht zudem der Vorteil, dass Änderungen am Layout recht einfach durchzuführen sein sollten.

Mit dem Grid Positioning Module zeigt sich zudem Microsofts Bemühen, an CSS3 aktiv mitzuarbeiten, so dass davon auszugehen ist, dass CSS3 in zukünftigen Versionen des Internet Explorers Einzug finden wird. Die Autoren des Arbeitsentwurfs Alex Mogilevsky und Markus Mielke sind beide für den Konzern aus Redmond tätig.

Da sich alle Empfehlungen für erweiterte Layouts noch im Entwurfsstadium befinden, ist die Benutzung der CSS3-Techniken in nächster Zeit noch nicht möglich. Das W3C empfiehlt die Nutzung von CSS3 erst ab dem Status einer Candidate Recommendation (CR). Vor diesem befindet sich jedoch erst der Last Call bzw. eventuell weitere Working Drafts. Das W3C verweist zudem auf die Media Queries, da das Grid Layout sich nicht unbedingt für jeden Fall eignet.

Die experimentelle Nutzung ist bei einigen Browsern vereinzelt vorher möglich. Die meisten Browser unterstützen etwa experimentelle CSS-Eigenschaften, die mit dem Präfix "-o-" für Opera, "-moz-" für Gecko oder "-webkit-" für Webkit-Browser versehen sind. Von der allgemeinen Nutzung ist jedoch abzuraten, da die Module noch geändert werden können und teilweise voneinander abhängig sind.

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


Anzeige
Top-Angebote
  1. für 109,99€ statt 189,99€ (Neupreis) und 32 GB für 139,99€ statt 219,99€ (Neupreis)
  2. (aktuell u. a. WD Elements 4 TB für 99€ und SanDisk Ultra 64-GB-micro-SDXC für 17€ - Angebote...
  3. für 249€ + 5,99€ Versand
  4. 79,90€ + 5,99€ Versand (Vergleichspreis ca. 126€)

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
       


Kameravergleich P20 Pro, Xperia XZ2, Galaxy S9 Plus

Huaweis neues P20 Pro hat gleich drei Kameras auf der Rückseite. Diese ermöglichen nicht nur eine Porträtfunktion, sondern auch einen dreistufigen Zoom. Mit ihren KI-Funktionen unterstützt die Kamera des P20 Pro den Nutzer bei der Aufnahme.

Kameravergleich P20 Pro, Xperia XZ2, Galaxy S9 Plus Video aufrufen
Datenschutz: Der Nutzer ist willig, doch die AGB sind schwach
Datenschutz
Der Nutzer ist willig, doch die AGB sind schwach

Verbraucher verstehen die Texte oft nicht wirklich, in denen Unternehmen erklären, wie ihre Daten verarbeitet werden. Datenschutzexperten und -forscher suchen daher nach praktikablen Lösungen.
Ein Bericht von Christiane Schulzki-Haddouti

  1. Denial of Service Facebook löscht Cybercrime-Gruppen mit 300.000 Mitgliedern
  2. Vor Anhörungen Zuckerberg nimmt alle Schuld auf sich
  3. Facebook Verschärfte Regeln für Politwerbung und beliebte Seiten

P20 Pro im Kameratest: Huaweis Dreifach-Kamera schlägt die Konkurrenz
P20 Pro im Kameratest
Huaweis Dreifach-Kamera schlägt die Konkurrenz

Mit dem P20 Pro will Huawei sich an die Spitze der Smartphone-Kameras katapultieren. Im Vergleich mit der aktuellen Konkurrenz zeigt sich, dass das P20 Pro tatsächlich über eine sehr gute Kamera verfügt: Die KI-Funktionen können unerfahrenen Nutzern zudem das Fotografieren erleichtern.
Ein Test von Tobias Költzsch

  1. Android Huawei präsentiert drei neue Smartphones ab 120 Euro
  2. Wie Samsung Huawei soll noch für dieses Jahr faltbares Smartphone planen
  3. Porsche Design Mate RS Huawei bringt 512-GByte-Smartphone für 2.100 Euro

Razer Nommo Chroma im Test: Blinkt viel, klingt weniger
Razer Nommo Chroma im Test
Blinkt viel, klingt weniger

Wenn die Razer Nommo Chroma eines sind, dann auffällig. Dafür sorgen die ungewöhnliche Form und die LED-Ringe, die sich beliebig konfigurieren lassen. Die Lautsprecher sind aber eher ein Hingucker als ein Hinhörer.
Ein Test von Oliver Nickel

  1. Razer Kiyo und Seiren X im Test Nicht professionell, aber schnell im Einsatz
  2. Stereolautsprecher Razer Nommo "Sind das Haartrockner?"
  3. Nextbit Cloud-Speicher für Robin-Smartphone wird abgeschaltet

    •  /