Drupal: Das wichtigste CSS-Element

Für das CMS Drupal existieren eine Vielzahl unterschiedlicher Layouts, die einfach an die eigenen Bedürfnisse angepasst werden können. Trotzdem ist es immer wieder nötig, ein Theme zu verändern oder ein Eigenes zu erstellen. Dies ist mit Drupal sehr einfach möglich, wenn man ein paar Tricks kennt.
Unter Drupal wird ein Großteil der Elemente in einem div-Container angezeigt. Da die Elemente meistens aussagekräftige IDs besitzen und in Klassen eingeteilt sind, können sie vom Nutzer per CSS verändert werden. Diese Strukturierung erleichtert es, Farben zu verändern und Hintergrundbilder einzublenden. Sobald man jedoch das Layout der Seite bearbeiten möchte, stören die verschachtelten Div-Container.
Das HTML-Element div gehört zur Gruppe der so genannten Block-Elemente und nimmt bei der Darstellung den gesamten horizontalen Raum ein. Im Gegensatz zu Inline-Elemente wie a, img und em, sind Block-Elemente, wie div, h1 und p nicht Teil des normalen Textflusses. Die Positionierung von mehreren Elementen nebeneinander wird dadurch erschwert.
Glücklicherweise kann man die div-Elemente mit einer einfachen CSS-Anweisung dazu bringen, sich wie Inline-Elemente in den Textfluß der Seite zu integrieren. Indem man dem entsprechenden div in der CSS-Datei die Option display: inline; hinzufügt ist es beispielsweise möglich mehrere Blöcke in der gleichen Zeile anzuzeigen. Das Attribut display: inline; kann man außerdem dazu verwenden, komplexe und in ihrer Darstellung unberechenbare Floating-Layouts zu vermeiden. Unter Drupal kann das Element dem Entwickler unter Umständen sogar die Erstellung eines eigenen Templates ersparen.

« Der Photoshop-Killer?

Kleine Geschichtsstunde: Apple vs. Microsoft »