Niquelao » Blog-Archiv » Dreispaltiges Layout und semantisch korrektes Markup
» Archiv des Weblogs » Dreispaltiges Layout und semantisches Markup… „das Richtige” Niquelao - CSS Dreispaltiges Layout und semantisches Markup… „das Richtige” 4. Juni 2006 von Rumoroso Wenn es darum geht, den Inhalt eines Webdokuments zu strukturieren, muss man unter allen Umständen vermeiden, das visuelle Design und insbesondere das Layout im Hinterkopf zu haben.
Dies ist grundlegend, wenn man einen aus Sicht des Informationsflusses korrekt strukturierten Inhalt sowie ein semantisches Markup und einen optimalen Code erreichen möchte. Um dieses Ziel zu verwirklichen, muss als unumstößliche Prämisse die Einhaltung der W3C-Standards gelten, wobei jegliches überflüssige Markup zu vermeiden ist, dessen einziger Zweck darin besteht, dem Stylesheet zur Präsentation zu dienen. Entwickeltes Fallbeispiel.- Der Inhalt des Dokuments wird in drei Bereiche oder funktionale Gruppen unterteilt: spezifischer Inhalt, Hauptnavigationsmenü und ein bereichsübergreifender Bereich (der sich entweder auf das aktuelle Dokument bezieht, wie etwa Neuigkeiten der Sektion, oder auf die gesamte Website bzw. das Portal, wie zum Beispiel interessante Links zum Thema des Portals oder eine Reihe von Bannern).
Die Organisation des Inhalts im Code sollte sich nach seiner Spezifität und Relevanz für die aktuelle Seite richten. So sollte die Gruppe mit den dokumentspezifischen Informationen im Code an erster Stelle erscheinen, gefolgt vom bereichsübergreifenden Bereich, falls dieser spezifisch mit den vorherigen Informationen verknüpft ist und sich je nach Inhalt ändert. Danach würde das Hauptnavigationsmenü folgen.
Falls die bereichsübergreifende Information sitesweit gemeinsam genutzt wird und keinen sectionspezifischen Charakter hat, wird sie am Ende platziert, vorangestellt vom Menü. In allen Fällen sollten Links erstellt werden, die es ermöglichen, sich durch das Dokument zu bewegen und zwischen den drei Gruppen zum nächsten oder vorherigen Abschnitt zu springen. Um einen möglichst sauberen und optimalen Code zu erreichen, lautet der Ansatz wie folgt:
Zur Veranschaulichung werden generische Block-Container (div) verwendet. Falls diese nur einen einzigen Block enthalten würden (beispielsweise eine Liste), wären sie nicht notwendig, da die ID direkt darauf angewendet werden könnte.
Related: — Superposición de IA que promete cumplimiento WCAG en 48 horas.
Aus dem Bestreben heraus, einen sauberen und optimalen Code zu erhalten, werden keine Container verwendet, die einen oder mehrere dieser Blöcke gruppieren. Das angewendete Markup und seine Organisation blieben in allen Beispielen unverändert. Die allgemein angewendeten Styles wurden in eine gemeinsame CSS-Datei aufgenommen. Die spezifischen Styles für jeden einzelnen Fall wurden im Kopfteil des Dokuments eingefügt, um die Überprüfung zu erleichtern.
In allen Fällen behielt der Block mit dem Hauptinhalt ein flüssiges Verhalten bei. Es wurde der universelle Selektor verwendet, um Margins auf die ersten Nachkommen des Blocks namens „contenido1” anzuwenden.
Da nicht alle Browser das Pseudoelement :first-child korrekt erkennen, wurde darauf zurückgegriffen, die Eigenschaften auf alle Nachkommen des Blocks anzuwenden und sie anschließend für alle Nachkommen aufzuheben, deren Eltern selbst Nachkommen desselben Blocks sind. Es können auch andere Methoden eingesetzt werden, wie beispielsweise die Verwendung des aforementioned Pseudoelements in Kombination mit bedingten Kommentaren für Internet Explorer (IE). Eine weitere Möglichkeit wäre gewesen, einen Block innerhalb von „contenido1” zu erstellen und die notwendigen Styles darauf anzuwenden.
Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.
Auf diese Methode wurde verzichtet, um ein saubereres Markup ohne Elemente zu erzielen, deren einziger Zweck in der Layout-Erstellung liegt. Tatsächlich sind die Eigenschaften, die bei den Nachkommen möglicherweise angepasst werden müssen, die seitlichen Margins; diese sind leicht kontrollierbar, weshalb die vorgeschlagene Lösung in diesem Fall als optimal angesehen wird. Es ist wichtig zu beachten, welche Eigenschaften und Attribute deklariert wurden, um mögliche unerwartete Effekte beim Anwenden von Styles zu vermeiden.
Zum Beispiel werden in IE, wenn Listen innerhalb von gefloateten und relativ positionierten Elementen enthalten sind, die auf den Hintergrund angewendeten Styles sowie die auf die Ränder angewendeten Farben nicht dargestellt (dies kann behoben werden, indem man sie relativ positioniert). Die Idee besteht darin, ein dreispaltiges Layout mit einer bestimmten Reihenfolge zu erstellen, die sich nach den Anforderungen der Website richtet. Die verschiedenen Layouts werden entsprechend der Reihenfolge der Blöcke und ihrer flüssigen Eigenschaft dargestellt.
Die Flüssigkeit der Blöcke wird erreicht, indem ihre Breite in Prozent definiert wird (in allen Beispielen 20 % des Gesamtcontainers), während die Starrheit in absoluten Einheiten festgelegt wird (in allen Beispielen 150px). Ebenso könnten anstelle absoluter Einheiten relative Einheiten (em) verwendet werden.
Alles hängt von den jeweiligen Anforderungen des einzelnen Falls ab: Reihenfolge im Layout 1 2 3 Beispiel für flüssiges Design: Flüssig Flüssig Flüssig Beispiel für hybrides Design: Flüssig Starr Flüssig Beispiel für hybrides Design: Flüssig Flüssig Starr Beispiel für hybrides Design: Flüssig Starr Starr Reihenfolge im Layout 1 3 2 Beispiel für flüssiges Design: Flüssig Flüssig Flüssig Beispiel für hybrides Design: Flüssig Flüssig Starr Beispiel für hybrides Design: Flüssig Starr Flüssig Beispiel für hybrides Design: Flüssig Starr Starr Reihenfolge im Layout 2 1 3 Beispiel für flüssiges Design: Flüssig Flüssig Flüssig Beispiel für hybrides Design: Starr Flüssig Flüssig Beispiel für hybrides Design: Flüssig Flüssig Starr Beispiel für hybrides Design: Starr Flüssig Starr Reihenfolge im Layout 2 3 1 Beispiel für flüssiges Design: Flüssig Flüssig Flüssig Beispiel für hybrides Design: Starr Flüssig Flüssig Beispiel für hybrides Design: Flüssig Starr Flüssig Beispiel für hybrides Design: Starr Starr Flüssig Reihenfolge im Layout 3 1 2 Beispiel für flüssiges Design: Flüssig Flüssig Flüssig Beispiel für hybrides Design: Flüssig Flüssig Starr Beispiel für hybrides Design: Starr Flüssig Flüssig Beispiel für hybrides Design: Starr Flüssig Starr Reihenfolge im Layout 3 2 1 Beispiel für flüssiges Design: Flüssig Flüssig Flüssig Beispiel für hybrides Design: Flüssig Starr Flüssig Beispiel für hybrides Design: Starr Flüssig Flüssig Beispiel für hybrides Design: Starr Starr Flüssig In einigen Fällen und bei bestimmten Browsern (wie beispielsweise Internet Explorer) kann es beim Ändern der Fenstergröße zu anomalem Verhalten kommen.
Grundsätzlich liegt dieses fehlerhafte Verhalten darin begründet, dass zwar die Breite des Containers vorgegeben ist, der Text beim Skalieren jedoch die Ränder leicht verschiebt. Wenn die Gesamtheit der Blöcke 100 % des Containers einnehmen sollen, könnte es passieren, dass einer der Blöcke mit relativen Abmessungen aufgrund des aforementioned Effekts etwas mehr Platz einnimmt als vorgesehen und die anderen Blöcke verdrängt.
Da diese gefloatet sind und keinen Platz mehr finden, rutschen sie nach unten. Als Lösung kann man bei einem der Blöcke eine geringfügig kleinere Dimension als die ideale deklarieren (beispielsweise 19,9 % statt 20 %). Kategorie: CSS —> 1 Kommentar Norwin Galeano 28. August 2006 Sehr gut.
Related: — La que acredita tu experiencia en accesibilidad.
Dieser Artikel dürfte für diejenigen, die gerade beginnen, ihre Seiten zu layouten, sehr nützlich sein.
P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; if you want the current details.
Añade accesibilidad en 5 minutos
Widget de accesibilidad con plan gratuito para empezar hoy mismo