17 Sep 2007

Technikwürze 90 (S01/E90) Die Rückkehr der Tabellenlayouts

Man sieht sich immer zwei Mal im Leben – dachte sich auch die Layouttabelle und kehrt in Form von den CSS 3 Grid Layouts wieder. Eric Eggert und David Maciejewski schauen auf die neuen Möglichkeiten und werfen auch einen Blick auf die Alternativen.

Höre Technikwürze auf SoundCloud: Diese Folge | Alle Folgen

tw90_eric

Grid Layouts mit CSS 3

CSS3/Grid bzw. offiziell CSS Grid Positioning Module Level 3 ist ein Standard um aus dem Printbereich bekannte Spaltenlayouts in CSS einfach umzusetzen. Diese werden beispielsweise zur visuellen Aufteilung einer Seite genutzt.

Zusammenhang mit anderen CSS-Modulen

CSS3/Grid ist einer von drei Vorstößen des W3C um flexiblere Layouts zu ermöglichen. Das sind neben CSS3/Grid noch CSS3/Multi-Column (CSS3 module: Multi-column layout) und CSS3/Advanced Layout (CSS Advanced Layout Module).

CSS3/Multi-Column:

Sorgt für Text, der sich über mehrere Spalten verteilt (implementiert in Mozilla / Safari)

CSS3/Advanced Layout:

Erreicht eine direkte Layout-/Contentzuordnung

Status der Entwürfe

CSS3/Grid: 1. WD 05.09.2007
CSS3/Advanced Layout: 2. WD 09.08.2007 (1. WD 15.12.2005)
CSS3/Multicolumn: 4. WD 06.06.2007 (1. WD 22.06.1999)

Implizites und explizites Grid

Ein implizites Grid bekommt man, wenn man per Multicolumn-Modul einen mehrspaltigen Text erstellt (Eigenschaften columns und column-gap).
Ein explizites Grid wird über die Eigenschaften grid-columns und grid-rows definiert. Explizit definierte Grids sind immer spezifischer als implizit definierte.

Spezifikation von expliziten Spalten

grid-rows: 4em (.25em 1em); → Element bekommt eine 4em-Spalte und dann 1em-Spalten im Abstand von .25em bis kein Platz mehr verfügbar ist.

grid-rows: 4em .25em 1em; → Element bekommt eine 4em-Spalte, eine mit .25em und eine mit 1em;

grid-rows: 4em (.25em 4em)[3] → Element bekommt vier Spalten mit jeweils 4em Breite und Zwischenräumen von jeweils .25em.

Neue Einheit: gr

Durch eine neue Einheit gr können Elemente über mehrere Grid-Spalten/-Zeilen definiert werden. Ein Bild mit der Eigenschaft width: 1gr; wird sich genau in eine Spalte einpassen. In welche wird mit den Eigenschaften float und float-offset festgelegt. Float wird dazu um Werte wie page, top usw. erweitert.

Der Gewinner der 300-EUR-Karte zur Flash Forum Konferenz 2007

Tomas Caspers hatte einen guten Grund sich für die Karte zu bewerben – das wird belohnt. Herzlichen Glückwunsch lieber Kollege!

Die News der Sendung

  • jQuery 1.2 ist erschienen und trumpft mit vielen Verbesserungen auf. (via Ajaxian)
  • Wie man diese hässlichen Dateiupload-Inputs mit CSS und dem DOM ändern kann, erklärt Shaun Inman.

Der Gastmoderator

Eric Eggert ist ein sehr aktives Webkrauts -Mitglied und zu erreichen unter yatil.de.

Tags: , , , , ,

Dieser Beitrag wurde am Montag, 17. September 2007 um 00:00 Uhr in der Kategorie Podcast veröffentlicht.
Kommentare sind im Moment nicht erlaubt, du kannst aber einen Trackback von deiner Seite aus senden.

Kommentare

  • 1.
    Abro
    am 17. September 2007, 01:29 Uhr

    endlich mal wieder content in der sendung =)

  • 2.
    Marcel Böttcher
    am 17. September 2007, 09:20 Uhr

    Böser Kommentar, aber wohl wahr.

  • 3.
    Marcus
    am 17. September 2007, 09:55 Uhr

    Moin, Hab eben den Cast gehört und am Ende wurde noch etwas gesagt von der Gestaltung der Uploadbutton. Wo genau soll das stehen? Find hier leider nichts. Danke.

    Ansonsten sehr schöner Cast!

  • 4.
    macx
    am 17. September 2007, 09:58 Uhr

    So lange wir Technikwürze nicht hauptberuflich machen, bleibt es Freizeit. Und diese ist auch gerade wegen der vielen Arbeit knapp. Jede Woche eine Sendung mit einem großen Thema zu veröffentlichen, ist extrem viel Arbeit – das können wir leider nicht gewährleisten. Ganz im Gegenteil: Gerade die Newsbeiträge finde ich auch wichtig.

    @Marcus: Die News habe ich nachtragen. Danke!

  • 5.
    NewMedia
    am 17. September 2007, 11:13 Uhr

    Hey,

    muss der Link von Webkrautus nicht so heißen? http://www.webkrauts.de/ unten in Eurem Artikel ist der doch etwas falsch geschrieben.

    Echt klasse Sendung.

    Gruß,
    NewMedia

  • 6.
    macx
    am 17. September 2007, 11:16 Uhr

    Ach herrje. Mein Freund Marcel Schwarzenberger ermahnt mich jedes Mal, meine Artikel mal gegenzulesen. Ohne Erfolg bisher.
    Danke für den Hinweis, Link ist korrigiert.

  • 7.
    NewMedia
    am 17. September 2007, 11:28 Uhr

    Hallo,

    g nein der stimmt immer noch nicht so ganz, nun heißt er so: http://www.webkrauts.de-mitglied/ aber es muss doch wenn schon dann so heißen: http://www.webkrauts.de/mitglied/

    Gruß,
    NewMedia

  • 8.
    macx
    am 17. September 2007, 11:39 Uhr

    Weder noch. Korrigiert.

  • 9.
    Thomas Schaaf
    am 17. September 2007, 14:15 Uhr

    Ein Podcast :)

    Das heißt, dass ich das frühstens in 5-10 Jahren benutzen kann :(
    Weil es leider z.B. immernoch Menschen bzw. Monster gibt, die immernoch IE 6 und sogar IE 5.5 benutzen.

    Ist genauso wie die Webform 2.0

    Ich fände es ja klasse, wenn CSS rechnen könnte Beispiel:
    div
    {

    left:50%-50px;
    }

    dadurch würden schöne Sachen möglich sein.. momentan müsste man es mit JS machen.. und deswegen macht man es nicht.

    @David Maciejewski: Ist okay, dass es Freizeit ist und deswegen natürlich nicht jedes mal das riesige Thema sein kann. Wäre allerdings nett :P Hast übrigens auf der Webseite 400€ stehen und hast 300€ gesagt

    Thomas

    P.S: Gibt ne neue Version von VS.Php

  • 10.
    konstantin klein
    am 17. September 2007, 20:24 Uhr

    stimmt allgemein optimistisch. Nur die Sache mit dem IE macht mir Sorgen. Die Umsetzung kann dauern.
    Von mir auch ein Lob: So inhaltsreich mag ich Technikwürze.

  • 11.
    Peter
    am 19. September 2007, 00:47 Uhr

    Find ich gut und innovativ (oder smart ;-) ) wenn wenn mit CSS 3 irgendwann Grid Layouts erstellt werden können.
    Ob Widescreen Bildschirme auch zu “Widescreen Layouts bei Webseiten” führen könnten – ich denke eher nicht.

  • 12.
    Herr Voß
    am 23. September 2007, 09:56 Uhr

    Ich freue mich, dass mal wieder so richtig dick in Webstandards eingestiegen wird. Ich schätze aber vor allem, dass ihr den Podcast auch macht, wenn mal nicht so viel auf dem Zettel steht. Einer reihe Podcasts sind ja schon die Themen ausgegangen.

    Liegt es nur an der Zeit? Wenn es auch an den Ideen liegt, könntest Du doch neben dem Hinweis auf die Kommentare auch einen Hinweis auf Themenwünsche bringen.

  • 13.
    macx
    am 23. September 2007, 11:27 Uhr

    Es ist stets die Zeit. Jede Woche Technikwürze zu produzieren ist schon ein hartes Stück Brot.

  • 14.
    Herr Voß
    am 25. September 2007, 01:39 Uhr

    Mal sone Frage: Wir groß wird Eurer Meinung nach ein Monitor in Zukunft sein? Gut 14” war ganz schön klein. 15” auch, aber werden wir tatsächlich alle in ein paar Jahren vor 35” Monitoren sitzen? Bei der Arbeit mag das ja vielleicht noch in einigen Bereichen sinnvoll sein, aber privat möchte ich eigentlich nicht so ein Ungetüm haben. Laptops werden sicher auch nicht so bald 35” haben…

    Ich denke also nicht, dass sich der Mensch ein grundsätzlich anderes Lesen angewöhnen wird. Vielmehr erreichen die Monitor langsam eine Größe, bei der es sich lohnt den Browser nicht immer in Fullscreen laufen zu lassen. Beim Mac gibt es doch schon so weit ich weiß die Funktion, dass man ein Fenster nur auf eine bestimmte Größe immer wieder maximieren kann. So kann man sich seinen Desktop viel besser einteilen.

    Bücher werden wird weiterhin in recht schmalen Spalten lesen – da entspricht die heutige Internetseite doch recht gut der Printdarstellung.

    Ich würde da vor einem Blick in das was CSS kann zuerst einen Blick in wissenschaftliche Arbeiten werfen, was denn der Mensch braucht um gut lesen zu können.

    Nur weil man im Browser ein Zeitungslayout nachstellen kann muss das nicht gut sein. Obwohl das sicher schick aussehen würde.

    100% geht bei solchen Breiten IMHO gar nicht. Eine Zeile, die 250 Wörter lang ist, will doch niemand lesen. Und ich will das auch nicht in 25 Spalten lesen.

    Ich fand es gut, dass ihr so schön deutlich beschrieben habt, was man in Zukunft machen kann und ich fand es gut, dass ihr auch darauf hingewiesen habt, dass man diese Techniken dann auf jeden Fall mit Vorsicht nutzen soll.

  • 15.
    Abro
    am 4. Oktober 2007, 20:59 Uhr

    Ist ja alles in Ordnung, ich weiß ungefähr wie schwer es ist jede Woche sinnvolle, interessante Dinge zu erzählen. Immerhin habe ich selbst eine Wöchentliche zweistündige Radiosendung. Da darf ich dann aber zum glück genau so Musik spielen wie die Hörer zutexten. Sonst würde ich persönlich das gar nicht hinbekommen. Ja, die Zeit ;)
    Ich wollte niemandem zu nahe treten, sondern habe mich einfach gefreut, dass es wieder bergauf geht.
    Übrigens ist dies hier auch eine Sendung, welche lust auf mehr macht

Dein eigener Kommentar

Die Kommentarfunktion für diesen Beitrag wurde deaktiviert.