Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

0 votes

Lieber Online Support,

in meiner Studie möchte ich zufällig gezogene Stimuluspaare zeigen. Diese sollen in unterschiedlichen Distanzen voneinander gezeigt werden. Die Distanzen sollen früheren Studien entsprechen.

Um dies zu verwirklichen, habe ich eine HTML-Tabelle (insgesamt 746px breit) angelegt, in der ich die Stimuli je nach Trial positionieren wollte. Für einen Trial, in dem die Stimuli mittig in 12 px Abstand angezeigt werden sollen, sieht mein Code bspw. wie folgt aus:

  <table style="border:1px solid black;">
  <!-- to arrange stimuli; margins: datasheet DistancesStimuli -->
  <colgroup>              <!-- define width of the 5 columns -->
    <col width="317px">   <!--column 1 = left margin to left stimulus-->
    <col width="50px">    <!--column 2 = first stimulus-->
    <col width="12px">    <!--column 3 = margin between stimuli-->
    <col width="50px">    <!--column 4 = second stimulus-->
    <col width="317px">   <!--column 5 = right margin to right stimulus-->
  </colgroup>
    <tr style="height: 80px;"><!-- placeholder row above -->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr> 
    <tr style="height: 100px;">     
        <td></td>
        <td style = "vertical-align: middle;"> 
                <img src="'.$stimulus[2].'.png" width = "50px" 
                         height = "auto" alt="Person A">
        </td>
        <td></td>
        <td style = "vertical-align: middle;">
            <img src="'.$stimulus[3].'.png" width = "50px" 
                      height = "auto" alt="Person B">
        </td>
        <td></td>
    </tr>
    <tr style="height: 80px;"><!-- placeholder row below -->
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </table>

Leider stimmen die Abstände aber nicht genau. Meine laienhafte Erklärung ist, dass automatisch Platz für die Zellenränder hinzufügt, und/oder padding eingefügt wird. Das sehe ich vor allem dann, wenn eigentlich gar kein Abstand zwischen den Stimuli sein sollte.

Wie kann ich also Bilder auf den Pixel genau positionieren?

Vielen herzlichen Dank im Voraus für die Hilfe!
MfG
Eileen Pauels

in SoSci Survey (dt.) by s089516 (110 points)

1 Answer

0 votes

Die Positionierung mit Tabellen hat viele Nachteile, v.a. was Usability und das Ausfüllen auf Mobilgeräen angeht (was Sie mit einer Frage vom Typ "Gerät und übermittelte Variablen" unbedingt kontrollieren sollten). Aber in Ihrem Fall sind Sie ja oahnehin auf ein sehr statisches Layout angewiesen.

Damit Tabellen die vorgegeben Breiten exakt einhalten, ergänzen Sie im <table>-Tag bitte noch die CSS-Anweisung table-layout: fixed.

<table style="border:1px solid black; table-layout: fixed;">

Wenn es dann noch nicht zu 100% passt, können Sie die Details mit dem "Inspektor" - zu finden bei den Entwickler-Tools Ihres Browsers - überprüfen.

by SoSci Survey (89.5k points)
...