Elemente nebeneinander platzieren

Dieses Kapitel beschreibt, wie verschiedene Elemente im Fragebogen nebeneinander platziert werden, z.B. ein Bild neben einer Frage oder zwei Fragen nebeneinander.

Wichtig: Wenn Sie zwei Fragen mit denselben Items nebeneinander platzieren möchten (z.B. für eine Fishbein-Skala), dann lesen Sie bitte zunächst Kombinierte Fragen.

Beispiel 1

Beispiel 2

Eine Schritt-für-Schritt-Beschreibung zum obigen Beispiel lesen Sie unter Dropdowns nebeneinander platzieren.

Eine Flexbox-Konstruktion besteht aus einem Flexbox-Container <div style="display: flex"> und darin enthalten Elemente, die nebeneinander angeordnet werden.

Der Unterschied zu Tabellen (unten) besteht darin, dass man den Elementen einer Flexbox erlauben kann, dass sie auf mehrere Zeilen umbrechen, wenn der Platz nicht ausreicht. Dadurch können Elemente auf dem PC-Bildschirm nebeneinander und auf dem Smartphone untereinander angeordnet werden.

Zum Nachlesen: CSS Tricks: CSS Flexbox Layout Guide

Wenn Sie zwei Fragen nebeneinander platzieren möchten, benötigen Sie auf der Fragebogen-Seite (Fragebogen zusammenstellen) „HTML-Code“ (nicht zu verwechseln mit „PHP-Code“), welcher gewissermaßen einen Rahmen um die Fragen bildet. Das kann wie folgt aussehen. Der Teil zwischen <!-- und --> ist ein Kommentar und dient nur zur Orientierung, für die Funktion sind diese Zeilen unerheblich.

<!-- Flexbox-Container -->
<div style="display: flex; flex-wrap: wrap; gap: 0 50px;">
 
<!-- Anfang linkes Element -->
<div style="flex: 1 1 400px; min-width: 320px;">

<!-- Abschluss linkes Element --> 
</div>
 
<!-- Anfang rechtes Element -->
<div style="flex: 1 1 400px; min-width: 320px;">

<!-- Abschluss rechtes Element --> 
</div>
 
<!-- Abschluss Flexbox --> 
</div>

Das Breitenverhältnis der beiden Spalten ergibt sich aus der Angabe flex: 1 1 400px, die bei beiden Elementen steht. Würde hier beim zweiten Element eine größere Zahl stehen, z.B. flex: 1 1 600px, so wäre die rechte Spalte breiter. Die beiden Einser (1 1) geben lediglich an, dass die Element ausgehend von der Basisbreite (400 Pixel in diesem Fall) sowohl größer als auch kleiner werden dürfen.

Die Angabe gap: 0 50px im Container gibt an, dass zwischen den Elementen ein horizontaler Abstand von 50 Pixels bleiben soll. Falls die Elemente aber untereinander dargestellt werden (siehe unten), soll kein Abstand eingefügt werden.

Die Angabe min-width: 320px gibt an, dass jedes Element für sich nicht schmaler als 320 Pixel dargestellt werden darf. Falls der Platz nicht für beide Elemente nebeneinder plus Abstand (320 + 50 + 320 = 690 Pixel) nicht ausreicht (zum Beispiel auf dem Smartphone, weil das Tablet hochkant gehalten wird, oder weil das Browserfenster einfach nicht den ganzen Bildschirm bekommt), dann werden die Elemente untereinander dargestellt (flex-wrap: wrap erlaubt das Umbrechen). Dort nehmen sie dann aber wieder die komplette verfügbare Breite ein.

Anstatt von Fragen können auch andere Element zwischen den HTML-Code-Elementen stehen, zum Beispiel Bilder oder der HTML-Code für Mediendateien.

Hinweis: Tabellen sind besser steuerbar, aber weniger flexibel. Falls Sie erwarten, dass Personen den Fragebogen via Smartphone ausfüllen, sollten Sie keine Tabellen verwenden.

Die Grundlage für eine mehrspaltige Anordnung sind HTML-Tabellen. Eine einfache HTML-Tabelle sieht aus wie folgt. Darunter sehen Sie den HTML-Code für eine Tabelle mit 3 gleich breiten Spalten und 2 Zeilen.

<table>      <!-- Damit beginnt eine Tabelle -->
<colgroup>   <!-- Hier wird die Breite der 3 Spalten definiert -->
    <col width="33%">   <!-- Spalte 1 ist 33% breit, col = column -->
    <col width="33%">
    <col width="34%">
</colgroup>
<tr>         <!-- Hier beginnt die erste Zeile, tr = table row -->
    <td>Zelle 1/1</td>  <!-- Dies ist die erste Zelle, td = table data -->
    <td>Zelle 1/2</td>  <!-- Jede Zeile hat nun 3 Zellen -->
    <td>Zelle 1/3</td>
</tr>
<tr>
    <td>Zelle 2/1</td>
    <td>Zelle 2/2</td>
    <td>Zelle 2/3</td>
</tr>
</table>

Hinweis: Die Breitenangabe <colgroup> könnte man prinzipiell auch weglassen. Allerdings ist es meistens sinnvoll, die Breiten der einzelnen Spalten genau zu definieren. Anstatt einer Prozentangabe kann man auch die Breite in Pixeln angeben.

Hinweis: HTML bietet auch Layout-Möglichkeiten ohne Tabellen, namentlich die CSS-Positionierung. Allerdings sind zu deren Einsatz fortgeschrittene HTML-Kenntnisse notwendig.

Nun ist es fast schon trivial, zwei Fragen nebeneinander zu platzieren:

Aber wie bekommt man die Fragen in die Tabelle? Ganz einfach, indem man die Tabelle um die Fragen herum schreibt. Dazu muss man die Tabelle genau an den Stellen unterbrechen, an denen eine Frage eingefügt werden soll. Nachfolgend noch einmal der Tabellen-Code für eine Tabelle mit einer Zeile und zwei Spalten.

Hinweis: Das table-Tag im folgenden Beispiel definiert noch einige Attribute. Diese sind notwendig, damit der Browser keinen Rahmen um die Tabellenzellen zeichnet (border=„0“) und die ganze Seite ausgenutzt wird (width=„100%“).

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<colgroup>
    <col width="50%">
    <col width="50%">
</colgroup>
<tr>
    <td>Frage Nr. 1</td>
    <td>Frage Nr. 2</td>
</tr>
</table>

Unterbricht man den HTML-Code in den Tabellen-Zellen (td), so erhalten wir 3 Teilstücke:

Teilstück 1

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<colgroup>
    <col width="50%">
    <col width="50%">
</colgroup>
<tr>
    <td>

Teilstück 2

    </td>
    <td>

Teilstück 3

    </td>
</tr>
</table>

Zwischen diesen Teilstücken können nun beim Fragebogen zusammenstellen Fragen oder andere Bausteine (z.B. Texte, Bilder) platziert werden.

Falls Sie zwischen den Fragen etwas Abstand wünschen, fügen Sie einfach eine weitere Tabellenzelle ohne Inhalt ein.

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<colgroup>
    <col width="45%">
    <col width="10%">
    <col width="45%">
</colgroup>
<tr>
    <td>Frage Nr. 1</td>
    <td></td>         <!-- Dies hier ist ein Abstandshalter -->
    <td>Frage Nr. 2</td>
</tr>
</table>

Unter Umständen kann der Browser die definierten Spaltenbreiten nicht einhalten - nämlich dann, wenn der Inhalt breiter ist als angegeben.

• Enthält der Text ein langes Wort? In diesem Fall kann man das Wort mit <br> gezielt umbrechen
  
  

  Unter Zuhilfenahme des Unvereinbar-<br>lichkeitserklärungs-<br>dokuments
  waren die Unzulänglich-<br>keiten schnell abzustellen.

• Wurde ein Bild nicht richtig skaliert? Bilder müssen vor dem Hochladen auf die richtige Größe skaliert werden. Im Internet zählt dabei ausschließlich die Größe in Pixel. Mehr dazu s. Bilder im Fragebogen.
  Hinweis: Wenn man ein Bild aus oFb löscht, skaliert und unter demselben Dateinamen hochlädt wie vorher, dann zeigt der Browser evtl. trotzdem noch die alte Version aus dem Cache. Ein „Seite neu laden“ bzw. „Aktualisieren“ hilft in diesem Fall weiter.

• Werden die Spalten trotz passenden Inhalts nicht in der richtigen Breite angezeigt? In diesem Fall kann man die Einhaltung der Spaltenbreiten via CSS erzwingen. Dazu muss man im <table>-Tag ein Attribut style ergänzen:
  
  

  <table cellspacing="0" cellpadding="0" border="0" style="table-layout:fixed; width: 100%">
  <colgroup>   <!-- Die folgenden Breiten werden exakt eingehalten -->
      <col width="33%">
      <col width="33%">
      <col width="34%">
  </colgroup>
  <!-- etc ... -->