[ugberlin]

Hallo zusammen!
Ich hoffe, ihr könnt mir helfen. Ich habe auf meiner Seite 2 Spalten. Die Spalten sind gefüllt mit Checkboxen, hinter denen Text steht. Ist der Text zu lang, gibt es einen Zeilenumbruch. Auf der zweiten Zeile ist der Text dann aber nicht unter dem Text der ersten Zeile, sondern direkt unter der Checkbox, was sehr unschön aussieht.
Bei der Seite handelt es sich um responsives Webdesign (Wordpress).
Kann mir jemand helfen?
Schon mal vielen Dank im Voraus und euch allen einen schönen Abend!
LG

[MrMurphy]

Hallo,

das Bild hilft nicht weiter. Ich vermisse den Link zur Seite.

Gruss

MrMurphy

[ugberlin]

Das ist die URL: Checkliste Urlaub | Reiseplanung
Vielen Dank schon mal

[MrMurphy]

Hallo,

dein Formularaufbau ist leider teils veraltet und teils unsinnig. Beispielsweise

<p>
   <label>
      <input type="checkbox" /> Reise- und Sicherheitshinweise des Auswärtigen Amts lesen
   </label>
   <br />
   <label>
      <input type="checkbox" /> Reisezeitraum festlegen
   </label>
   <br />
   <label>
      <input type="checkbox" /> Reiseroute planen
   </label>
   <br />
   <label>
      <input type="checkbox" /> An- und Abreise buchen
   </label>
</p>

Das p-Element ist nicht für Formulardaten geeignet. Das br-Element sollte nicht mißbraucht werden um Abstände zu erzeugen.

Auf die Verschachtelung der label- und input-Elemente sollte verzichtet werden. Sinnvoller wären die Elemente folgendermaßen zu erstellen:

<input type="checkbox" id="sicherheitshinweise" name="sicherheitshinweise" />
<label for="sicherheitshinweise">Reise- und Sicherheitshinweise des Auswärtigen Amts lesen</label>
<input type="checkbox" id="reisezeitraum" name="reisezeitraum" />
<label for="reisezeitraum">Reisezeitraum festlegen</label>
<input type="checkbox" id="reiseroute" name="reiseroute" />
<label for="reiseroute">Reiseroute planen</label>
<input type="checkbox" id="anabreise" name="anabreise" />
<label for="anabreise">An- und Abreise buchen</label>

Die Elemente können dann per CSS angeordnet werden. Veraltet zum Beispiel mit float / clear oder aktuell mit Flexbox.

Gruss

MrMurphy

[etux]

MrMurphy, ich finde es sehr lobenswert, wie viel Freizeit Du für die Hilfe hier opferst.
Leider kommt es aber (auch wenn eher selten) vor, dass Du Unfug schreibst.
Nicht weiter schlimm – es ist ja ein Forum und meist folgt eine Korrektur (von Dir selbst oder Anderen).
Schlimm finde ich eher die "Endgültigkeit" Deiner Aussagen. Denk bitte daran, es lesen hier auch Leute mit, die wenig oder keine Ahnung haben und gerade dabei sind, CSS und HTML zu lernen.
Aber sonst, wie gesagt, Dein Einsatz kann man nur loben.

Zitat von MrMurphy

Das p-Element ist nicht für Formulardaten geeignet.

Wie ich das davor gemacht habe, weiß ich nicht mehr, aber seit mindestens 5-6 Jahren schreibe ich es wie im Beispiel hier (verschachtelt; input in label).
4.10 Forms
Oft eignet sich dafür, wie auch bei der Seite von ugberlin, auch eine Liste. Die P-Elemente können auch dann die Form-Elementen umschließen, müssen aber nicht.

Zitat von MrMurphy

Das br-Element sollte nicht mißbraucht werden um Abstände zu erzeugen.

Richtig. Das „br“ Element fände ich eher sinnvoll, wenn überhaupt, bei einem Quellcode, wie in Deinem Beispiel. Also nach jedem label-Element. Aber auch dann kann es ruhig weg bleiben.

Zitat von MrMurphy

Auf die Verschachtelung der label- und input-Elemente sollte verzichtet werden.

S. noch mal den w3-Link oben.
Verschachtelt oder nicht – beide sind legitim. Und um Dein Lieblingswort zu benutzen, als „modern“ gilt die input-Elemente in das label-Element zu setzen – Zugehörigkeit wird schneller klar, als mit dem „for“ -Attribut, was dann weg fällt.

Zitat von MrMurphy

Veraltet zum Beispiel mit float ...

Flex ( display: flex; ) ist kein Ersatz für Float. Und erst Recht nicht ein 100%-iges.
Die „float“-Eigenschaft ist zwar schon sehr alt und wurde vom Anfang an von allen Browser sehr gut unterstützt, veraltet ist sie aber deswegen noch lange nicht (nicht "deprecated").
Ich denke, nicht alles lässt sich mit „Flex“ umsetzen, was mit „Float“ möglich wäre - auch wenn mir gerade keine Beispiele einfallen.

@ugberlin

Dein Problem könntest Du beispielsweise nach „veralteten“ Methoden lösen:

.pf-content label {
  display: inline-block;
  /* ohne <br /> im Quellcode oder wenn <br /> per CSS ausgeblendet:
  min-width: 51%;*/
  padding-left: 1.4em;
}
.pf-content label input {
  float: left;
  margin: .3em 0 0 -1.4em;
}

oder „modern“ mit:

.pf-content label {
  display: flex;
}
.pf-content label input {
  margin: 5px 5px 0 0;
}
/* wenn die <br /> noch im Quellcode steht:
.pf-content br {
  display: none;
}
*/

Alle Abstand-Werte sind nur Beispielwerte und sonst alles ohne Garantie, da ich nur kurz mit Firebug Deine Seite getestet habe.

Ich fände es allerdings besser, wenn Du den Quellcode wie im w3-Beispiel abänderst (die p-Elemente) - s. Link oben

[ugberlin]

Guten Morgen,
wow, ich bin begeistert, wie freundlich und ausführlich ihr mir geantwortet habt! Vielen Dank! Heute Abend nach Arbeit werde ich versuchen, alles umzusetzen.
Viele Grüße, Uta

[ugberlin]

Ich bin begeistert, es hat funktioniert!!
Ich habe mich für die "alte" Variante entschieden, da die Checkboxen bei der "modernen" Variante ungleich auf Safari waren (die Checkboxen, deren Texte einen Zeilenumbruch machen, waren kleiner als die anderen.)
Vielen, vielen, vielen Dank euch beiden! Es war wirklich sehr nett von euch, so ausführlich zu antworten.
Der HTML-Code kommt übrigens nicht von mir, sondern vom Wordpress Theme bzw. den Plugins. Da ich ehrlich gesagt nicht fit genug in HTML oder CSS bin, werde ich alles lieber so lassen wie es ist.
Ich wünsche euch einen schönen Abend (meinen habt ihr gerettet) und noch einmal vielen Dank!
Uta

[etux]

Zitat von ugberlin

Ich habe mich für die "alte" Variante entschieden, da die Checkboxen bei der "modernen" Variante ungleich auf Safari waren (die Checkboxen, deren Texte einen Zeilenumbruch machen, waren kleiner als die anderen.)

Ja, das kommt bei WebKit-Browser vor. Es ist aber lösbar.
In Deinem Fall wäre es am einfachsten, den input-Elementen eine Breite zu geben. Beispielsweise: input { width: 1.2em; }

Zitat von ugberlin

Der HTML-Code kommt übrigens nicht von mir, sondern vom Wordpress Theme bzw. den Plugins. Da ich ehrlich gesagt nicht fit genug in HTML oder CSS bin, werde ich alles lieber so lassen wie es ist.

Das war gleich klar. Aber wenn Du Dich (noch) nicht ausreichend auskennst, ist sicher besser, bei Deiner jetzigen Lösung zu bleiben.

Zitat von ugberlin

Ich wünsche euch einen schönen Abend (meinen habt ihr gerettet) und noch einmal vielen Dank!
Uta

Bitte, gern. Weiter viel Spaß beim Coden.