0 votes
in SoSci Survey (dt.) by s049805 (660 points)

Hallo, ich habe ein Problem mit der Visualisierung meiner Ergebnisse.
Der Visualisierungscode (Skala für einzelne Werte) verwendet als Balken ein "Background Image" welches jedoch nicht gedruckt werden kann.
Darum wollte ich das Background Image als normales image einfügen, jedoch schaffe ich es nicht, das dieses zentriert wird. Hat da jemand vielleicht eine Lösung dafür? Vielen Dank schon mal!

LG,

1 Answer

0 votes
by SoSci Survey (297k points)

Prinzipiell kann ein Hintergrundbilsch schon gedruckt werden, aber Firefox und andere Browser haben dies standardmäßig deaktiviert.

Sie können Elemente prinzipiell auch mittels CSS-Positionierung (position: absolute) übereinander platzieren. Das könnte dann etwa wie folgt aussehen:

<div class="title" style="text-align: center">%title%</div>
<div style="position: relative">
  <div style="margin: 0 auto; width: 400px; height: 25px;">
      <!-- Die Skala absolut im Hintergrund positioniert -->
      <img src="ofb://slider.scale.sd-blue400S" style="position: absolute; left: 0; top: 0;">
      <!-- Zur Platzierung der Markierung wird eine Einheit (Bereich 0 bis 1) als Blockelement platziert -->
      <div style="position: absolute; top: -2px; left: 50%; width: 65px; height: 27px">
        <!-- Die eigentliche Markierung wird an der richtigen Stelle eingefügt -->
        <img src="ofb://slider.button.rhomb" alt="" style="position: absolute; left: %z-value*100%%; margin-left: -8px" />
      </div>
  </div>
</div>

Gegenüber dem Code in der Anleitung wurde hier das background-image entfernt und dafür ein <img> mit absoluter Positionierung eingefügt.

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

...