Drupal 7: Inhalte trotz einspaltigen Layouts mehrspaltig ausgeben

Die Gestaltung von Webseiten ist nicht besonders flexibel: Das HTML-Grundgerüst folgt klaren Regeln, unter der Haube agiert CSS. Beider Manipulation erfordert ein bisschen Expertenwissen. Wer sich eine Webseite bauen lässt, möchte aber in der Regel vermeiden, sich in die Technik und irgendwelchen Code einzuarbeiten. Oft bestückt man die Webseite nur in unregelmäßigen Abständen, und wer soll sich dann all diese Codeschnipsel und wo sie hingehören behalten?

So wollte ein Kunde auf einer für mobile Geräte optimierten Seite in der mittleren Inhaltsspalte Bilder und Texte nebeneinander darstellen, und zwar mehrere Bilder. Seine Idee war, eine Tabelle anzulegen und die einzelnen Bausteine dort zu platzieren, wie man es mit MS-Word gerne macht. Tabellen so zu optimieren, dass sie auch auf Smatphones funktionieren bedeutet eigentlich, sie zu vermeiden. Statt einer HTML-Konstruktion

<table> <tr> <td> Bild </td> <td> Text </td> </tr> </table>

kommt für eine zweispaltige Darstellung eine Konstruktion

<div style="overflow: hidden;"> <div style="width: 49%; float: left;"> <div> Bild </div> </div> <div style="width: 49%; float: right;"> <div> Text </div> </div> </div>

zum Einsatz. Einem Kunden kann ich aber nicht zumuten, im WYSIWYG-Editor in die Quelltext-Ansicht zu gehen und irgendwelches HTML und CSS einzugeben. Will der in 14 Tagen seinen Text überarbeiten, weiß er schon nicht mehr, was wo hingehört. Und das ist ja auch nicht seine Aufgabe.

Das Problem haben aber auch andere Entwickler schon gehabt und deswegen hat jemand die Erweiterung "Layouter" programmiert. Layouter stellt verhältnismäßig einfach unterschiedliche Spaltenlayouts für an sich der Link zum Layoutereinspaltige Inhalte bereit.

Ein unauffälliger Link unter dem Editor-Fenster führt zu einem kleinen Popup, das die Layoutalternativen zum Auswählen angibt. Hat man sich für eine Variante entschieden, gibt man im Popup die Inhalte ein. Weiter gestalten kann man sie an dieser Stelle allerdings nicht, erst wenn man die Die Auswahlmöglichkeiten im LayouterEingabe abschließt und die Inhalte in den WYSIWYG-Editor übernommen werden, kann man Texte ganz normal fett, kursiv oder mit Übrschriftsdefinitionen auszeichnen.

Mit Vorsicht zu genießen ist die Option, Text automatisch in zwei Spalten fließen zu lassen. Die resultierende Konstruktion

<p style="-moz-column-count: 2; -moz-column-gap: 16px; -webkit-column-count: 2; -webkit-column-gap: 16px; column-count: 2; column-gap: 16px;"> Text </p>

funktioniert nur in modernen Browsern und wird z.B. vom Internet Explorer unterhalb der Version 10 nicht unterstützt. Das ist allerdings kein Beinbruch, ältere Browser stellen den Text dann eben nur herkömmlich einspaltig dar.

Unterhalb einer mehrspaltigen Konstruktion eine weitere, unabhängige mehrspaltige Konstruktion einzufügen, ist jetzt nicht weiter schwierig: Den Cursor einfach ganz unten in den Editor setzen (wo sich eine leere Zeile befindet) und wieder den Layouter aktivieren. Natürlich kann man diese Layouts durch Unachtsamkeit und das Setzen des Cursors an die falsche Position zerstören, sie sind aber weitaus stabiler und flexibler als viele handgestrickten Varianten.

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
By submitting this form, you accept the Mollom privacy policy.

 

Das Team

Martina Ruediger

Martina Rüdiger
(X)HTML/CSS, PHP, Drupal, Wordpress, Konzeption, Design und Umsetzung von modernen Web-Layouts, SEO, Printdesign

 

Jürgen Thau
Kundenberatung, Projektsteuerung, PHP, JavaScript, Drupal, Joomla, Drupal- und Joomla-Schulungen  

Was wir bieten

  • Konzeption und Gestaltung rund um Ihre Web-Seite
  • Online Shops
  • barrierearme und zukunftssichere Designs
  • Beratung rund um Content-Management
  • maßgefertigte Lösungen
  • ergänzende Angebote aus dem Print-Bereich
  • bedarfsgerechte Web-Hosting-Angebote
  • Schulungen vor Ort
  • Unterstützung nach dem Start Ihrer Web-Seite

Wir sehen uns:

WordCamp Frankfurt

02.09. – 04.09.2016
@WordCampFRA #WCFRA

Gezwitschert ...

  • Neu im Blog: Problem bei der Anmeldung an Windows10 nach Update (und wie man es löst) https://t.co/mpH7vCQYqS vor 11 Wochen 3 Tage
  • Neu im Blog: Drupal-Webseite auf SSL umstellen https://t.co/3pQWwxAKKV vor 14 Wochen 4 Tage

Neueste Kommentare