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.

2 comments so far

  1. Web Design Gold Coast on

    i am not able to get the language !
    plz help me out

  2. hendrik on

    I was annoyed that Drupal used so many div-containers because it made themeing via css difficult. fortunately, i found out that you can change the div-behaviour via css. just set: „display: inline;“


Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: