Layout von komplexer HTML-Darstellung als Auswahlfrage

Question

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>

Answer 1

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:

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.

Comments

Danke für den Hinweis. HTML ist immer noch trial und error bei mir. Werde das versuchen!

---

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.

---

Danke! Hatte das immer als absolute zur gesamten Page verstanden. Sehr hilfreich