CSS Positionieren

Question

Hallo,

Ich habe das Problem das mein Text nicht auf einer Höhe zu dem Lautsprecher angezeigt wird. Zuletzt habe ich das Problem mit CSS padding korregieren können. Hier allerdings funktioniert das nicht. Ich benutze folgenden Code:

<table><tbody><tr><td style="padding:0 10px 0 0;"><a type="button" value="Play"
onclick="responsiveVoice.speak('Zunächst haben wir einige Fragen zu Ihrer
Person.','Deutsch Female');"><img src="TTS.png"></a></td><td style="padding:0
0 10px 0;"><p><b>Zunächst haben wir einige Fragen zu Ihrer
Person.</b></p></td></tr></tbody></table><br>

Der Code kommt in einem Textbaustein zum Einsatz. Änderungen im "padding" Teil machen sich nicht bemerkbar.

Hat jemand eine Idee woran es liegen könnte?

Vielen Dank

Answer 1

Ich rate davon ab, Tabellen zur Positionierung zu verwenden. Spätestens wenn ein Teilnehmer den Fragebogen auf dem Mobilgerät öffnet, entstehen Darstellungsprobleme. Auch rate ich davon ab, die Titel mit einem <b> fett zu formatieren - wenn Sie das generell bei allen Titeln haben möchten, sollten Sie es via CSS im Layout hinterlegen. Beziehungsweise: Wenn Sie einen Textbaustein im Fragenkatalog anlegen, dann können Sie den Text (im zweiten Karteireiter) auch als Titel formatieren lassen.

Am Rande: Hatten Sie es nicht ohnehin so, dass das responsiveVoice Script den Text automatisch aus dem zugehörigen HTML-Element ausgelesen hatte? Das sollten Sie im Interesse der Wartung nach Möglichkeit so beibehalten, statt den Text doppelt einzufügen.

Ich kenne das Script nicht genau, deshalb kann ich nur raten, ob das <a> Tag benätigt wird. Mein erster Versuch würde aber wie folgt aussehen:

<p>
<button type="button"
onclick="responsiveVoice.speak('Zunächst haben wir einige Fragen zu Ihrer Person.','Deutsch Female');" style="background-color: white; vertical-align: middle"><img src="TTS.png"></button>
Zunächst haben wir einige Fragen zu Ihrer Person.
</p>

Oder ganz ohne Knopf-Element:

<p>
    <img src="TTS.png" onclick="responsiveVoice.speak('Zunächst haben wir einige Fragen zu Ihrer Person.','Deutsch Female');" style="vertical-align: middle">
    Zunächst haben wir einige Fragen zu Ihrer Person.
</p>

Wenn es mehrzeilig werden soll, dann wäre ein umflossenes Element das Mittel der Wahl:

<p>
    <img src="TTS.png" onclick="responsiveVoice.speak('Zunächst haben wir einige Fragen zu Ihrer Person.','Deutsch Female');" style="float: left; margin: 0 0.5em; 0.5em 0; vertical-align: middle">
    Zunächst haben wir einige Fragen zu Ihrer Person.
</p>

... das ist dann aber oben-bündig und nicht mittig zum Text.

Answer 2

Lieber Herr Leiner,
danke für Ihre ausführliche Antwort und entschuldigen Sie die späte Rückmeldung. Wir "mussten" die Tabelle als Formatierungstool nehmen, da wir den Text etwas von den Lautsprechern entfernt haben möchten. Und spätesten bei einem Zeilenumbruch hatten wir Probleme mit der Formatierung. table hat uns da viel Arbeit abgenommen. Da wir alle Geräte stellen auf denen die Umfrage durchgeführt wird, können wir das Risiko deutlich senken.
Zu Ihrer zweiten Anmerkung: Der Text muss trotzdem immer zweimal im Script stehen: einmal für das TTS Tool (also was vorgelesen wird) und einmal zum selbst lesen.

Ihre Lösung mit

<p>
    <img src="TTS.png" onclick="responsiveVoice.speak('Zunächst haben wir einige Fragen zu Ihrer Person.','Deutsch Female');" style="vertical-align: middle">
    Zunächst haben wir einige Fragen zu Ihrer Person.
</p>

hilft schon einmal sehr gut weiter bei kürzeren Sätzen. Bei einem Zeilenumbruch zeigt sich aber gut warum wir uns für die table Formatierung entschieden haben.

Eine manuelle Anpassung damit der Textanfang untereinander steht wäre sehr aufwändig. Durch das table Format stehen die Satzanfänge automatisch untereinander. Eine saubere Methode dies zu machen ist mir leider nicht bekannt. Ihnen vielleicht?

Beste Grüße