0 votes
in SoSci Survey (dt.) by s079684 (975 points)

Hallo,
ich hätte diese beiden Darstellungen gerne nebeneinander als Auswahlfrage. Am liebsten so, dass man beiden Elemente als Kärtchen auswählen kann. Allerdings verschiebt sich das Layout bzw. verschwinden die Beschriftungen, wenn ich die beiden Codeteile als Auswahloption in der Auswahlfrage angebe. Was wäre hier die sauberste Lösung?

 <div style="width: 300px;
  text-align: center;
  font-weight: bold;
  font-size: large;
  margin-bottom: 50px;
  font-family: monospace;">
  Option A
</div>
<div style="display: inline-block;
  width: 300px;
  height: 150px;
  margin-bottom: 50px;">
  <div style="display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid black;
  overflow: hidden;">
    <div style="display: inline-block;
  background-color: lightgrey;
  height: 100%;
  width: 150px;"></div>
  </div><div style="border-collapse: collapse;
  display: inline-block;
  border-top: 1px solid black;
  height: 75px;
  width: 35px;">
  </div>
</div>

<div style="display: inline-block;">
  <div style="text-align: left;
  position: relative;
  left: -100px;
  top: -72px;
  font-weight: bold;
  font-family: monospace;">
    +100€
  </div>
</div>

<div style="display: inline-block;">
  <div style="text-align: right;
  position: relative;
  left: -235px;
  top: -148px;
  font-size: small;
  font-family: monospace;">
    100%
  </div>
</div>


<div style="width: 300px;
  text-align: center;
  font-weight: bold;
  font-size: large;
  margin-bottom: 50px;
  font-family: monospace;">
  Option B
</div>
<div style="display: inline-block;
  width: 300px;
  height: 150px;
  margin-bottom: 50px;">
  <div style="display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid black;
  overflow: hidden;">
    <div style="display: inline-block;
  background-color: lightgrey;
  height: 25%;
  width: 150px;
  border-right: 2px solid black;"></div>
    <div style="display: inline-block;
  background-color: white;
  height: 75%;
  width: 150px;"></div>
  </div><div style="border-collapse: collapse;
  display: inline-block;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  height: 150px;
  width: 35px;">
  </div>
</div>

<div style="display: inline-block;">
  <div style="text-align: left;
  position: relative;
  left: -100px;
  top: -133px;
  font-weight: bold;
  font-family: monospace;">
    +100€
  </div>
  <div style="text-align: left;
  position: relative;
  left: -100px;
  top: 5px;
  font-weight: bold;
  font-family: monospace;">
    0€
  </div>
</div>

<div style="display: inline-block;">
  <div style="text-align: right;
  position: relative;
  left: -230px;
  top: -131px;
  font-size: small;
  font-family: monospace;">
    25%
  </div>
  <div style="text-align: right;
  position: relative;
  left: -230px;
  top: 4px;
  font-size: small;
  font-family: monospace;">
    75%
  </div>
</div>

1 Answer

+1 vote
by SoSci Survey (302k points)
selected by s079684
 
Best answer

Dieses "Layout" arbeitet damit, dass es Elemente irgendwo auf der Seite platziert und dann mittels "position: relative" an die richtige Stelle schiebt. Allerdings plant der Browser an der ursprünglichen Stelle dann immer noch den Platz dafür ein:

Beispiel/Screenshot

Sobald Sie weniger Platz zur Verfügung stellen, rutschen die Elemente in die nächste Zeile und damit aus dem sichtbaren Bereich (weil sie ja danach noch verschoben werden). Meines Erachtens ist das kein sauberer HTML-Code für die Platzierung. Ein "position: absolute", verankert innerhalb eines "relative" platzieren <div>-Elements wäre hier nach meiner Ansicht deutlich besser geeignet.

by s079684 (975 points)
Danke für den Hinweis. HTML ist immer noch trial und error bei mir. Werde das versuchen!
by SoSci Survey (302k points)
Wichtig zu position:absolute zu wissen: Das "absolute" ist absolut zum nächsten Eltern-Element, das nicht "position:static" ist. Deshalb einfach ein

<div style="position: relative">

Um das Bildchen außenherum setzen. Darin dann die ganzen einzelnen Elemente platzieren.

Oder was in Ihrem Fall noch viel besser wäre: Erstellen Sie mit InkScape ein SVG-Vektorbild und verwenden Sie dieses. SVG ist für das gedacht, was Sie mit HTML machen.
by s079684 (975 points)
Danke! Hatte das immer als absolute zur gesamten Page verstanden. Sehr hilfreich

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

...