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. Hauni Maschinenbau GmbH, Hamburg
  2. Bosch Gruppe, Abstatt

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. 24,99€ + Versand (Vergleichspreis 41,18€)
  2. 44,99€ (Vergleichspreis 90,51€)
  3. 69,90€ + Versand (Vergleichspreis über 102€)
  4. für 229€ statt 263,99€ im Vergleich (+ 30€ Rabatt bei Zahlung mit Masterpass und Gutschein...

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
       


Sky Ticket TV-Stick im Test

Wir haben den Sky Ticket TV Stick getestet. Der Streamingstick mit Fernbedienung bringt Sky Ticket auf den Fernseher, wenn dieser den Streamingdienst des Pay-TV-Anbieters nicht unterstützt. Auf dem Stick läuft das aktuelle Sky Ticket, das im Vergleich zur Vorgängerversion erheblich verbessert wurde. Den Sky Ticket TV gibt es quasi kostenlos, weil dieser nur zusammen mit passenden Sky-Ticket-Abos im Wert von 30 Euro angeboten wird.

Sky Ticket TV-Stick im Test Video aufrufen
SpaceX: Milliardär will Künstler mit zum Mond nehmen
SpaceX
Milliardär will Künstler mit zum Mond nehmen

Ein japanischer Milliardär ist der mysteriöse erste Kunde von SpaceX, der um den Mond fliegen will. Er will eine Gruppe von Künstlern zu dem Flug einladen. Die Pläne für das Raumschiff stehen kurz vor der Fertigstellung.
Von Frank Wunderlich-Pfeiffer

  1. Mondwettbewerb Niemand gewinnt den Google Lunar X-Prize

iPhone Xs, Xs Max und Xr: Wer unterstützt die eSIM in den neuen iPhones?
iPhone Xs, Xs Max und Xr
Wer unterstützt die eSIM in den neuen iPhones?

Apples neue iPhones haben neben dem Nano-SIM-Slot eine eingebaute eSIM, womit der Konzern erstmals eine Dual-SIM-Lösung in seinen Smartphones realisiert. Die Auswahl an Netzanbietern, die eSIMs unterstützen, ist in Deutschland, Österreich und der Schweiz aber eingeschränkt - ein Überblick.
Von Tobias Költzsch

  1. Apple Das iPhone Xr macht's billiger und bunter
  2. Apple iPhones sollen Stiftunterstützung erhalten
  3. XMM 7560 Intel startet Serienfertigung für iPhone-Modem

Zukunft der Arbeit: Was Automatisierung mit dem Grundeinkommen zu tun hat
Zukunft der Arbeit
Was Automatisierung mit dem Grundeinkommen zu tun hat

Millionen verlieren ihren Job, aber die Gesellschaft gewinnt dabei trotzdem: So stellen sich die Verfechter des bedingungslosen Grundeinkommens die Zukunft vor. Wie soll das gehen?
Eine Analyse von Daniel Hautmann

  1. Verbraucherschutzminister Kritik an eingeschränktem Widerspruchsrecht im Online-Handel
  2. Bundesfinanzminister Scholz warnt vor Schnellschüssen bei Digitalsteuer
  3. Sommerzeit EU-Kommission will die Zeitumstellung abschaffen

    •  /