Adressierung der anderen Blöcke

Question

Hallo,
ich versuche aktuell, die Blöcke zu füllen, allerdings bin ich dabei auf zwei Probleme gestoßen:
1. Der erste Block sieht nun zwar so aus, wie er soll, allerdings verstehe ich leider immer noch nicht, was genau ich jetzt machen muss, damit alle übrigen 7 auch entsprechend angepasst werden.
2. Kann ich den Block mit dem Schieberegler so ausrichten, dass er immer den gleichen Abstand zur Unterkante der grauen Box hat, unabhängig davon, wie viel Text in dem Feld steht?

Comments

Würden Sie bitte einen Pretest-Link direkt (!) zur betroffenen Seite posten? Dann kann ich mir das iu Kontext ansehen.

---

https://www.soscisurvey.de/th23/index.php?i=XRL452H5LBXQ&rnd=KDJZ
sowie
https://www.soscisurvey.de/th23/index.php?i=XRL452H5LBXQ&rnd=JHTW

---

Ich befürchte, Sie haben mir keine Pretest-Links, sondern nur zweimal denselben Link zu dem einen Fall im Datensatz geschickt: https://www.soscisurvey.de/help/doku.php/de:survey:pretest

ad 1) Es geht um unterschiedliche Seite, korrekt?

ad 2) Ja, aber dafür müssten Sie die umgebende Box auf display:flex-box umstellen mit flex-direction:column, zum Nachlesen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Oh sorry, ich habe gerade einen Randomisierer eingebaut, die richtigen Links sind jetzt

https://www.soscisurvey.de/th23/index.php?i=GDCQUA2CUGW1&rnd=BLJE

https://www.soscisurvey.de/th23/index.php?i=GDCQUA2CUGW1&rnd=DIAY

---

Solange das i= im Link steht, ist es wirklich nur der Link zu einem spezifischen Fall im Interview. Das rnd=... hinten sorgt nur dafür, dass der Browser-Cache keine Probleme macht. Wenn Sie die Links mal anklicken möchten ... die führen beide zur selben Seite.

---

https://www.soscisurvey.de/th23/?act=hs1Rop1TFkiqU0Jxrv0mgQL8 ist der Prestest link. es geht um Seite 5 und 10. Ich weiß nicht wie ich Ihnen den Link zu den entsprechenden Seiten sonst schicken soll

---

Beim Erstellen des Pretest-Links können Sie rechts oben eintragen, zu welcher Seite dieser führen soll.

---

https://www.soscisurvey.de/th23/?act=1gOPhh9lUwWGG5oB5b8YVxNY

https://www.soscisurvey.de/th23/?act=CQN7UkFg2JNMXhYEWoXMLLMs

---

Danke, viel besser :) Sie haben die Formatierung für "Score" aktuell direkt im Element eingetragen. Das müssen Sie zunächst (bei allen) entfernen und stattdessen z.B.

pageCSS('
div.s2question .s2item > .s2label {
  color: #F39E23;
  font-size: 16px;
  margin: 0px;
  padding: 0px;
  font-family: Helvetica;
  font-variant: small-caps;
  font-weight: bold;
  text-align: center;
}
');

Meinen Sie das? Oder geht es doch um den orangen Hintergrund und die unterschiedlichen Seiten?

---

Auf Seite 5 wird der Kasten um Score richtig dargestellt, alle anderen Fälle nicht. Ich habe lediglich den mir zuvor gesandten Code

pageCSS(' div.s2question div.s2item {margin:0px; border:2px solid; border-color:orange; padding-bottom:10px; border-radius: 8px; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); } ');

als PHP auf der entsprechenden Seite eingetragen, aber dieser beeinflusst scheinbar nur den ersten Slider.

Wenn ich den Code, den Sie mir geschickt haben stattdessen einfüge, zerschießt das leider die gesamte Formatierung der Seite.
https://www.soscisurvey.de/th23/?act=1gOPhh9lUwWGG5oB5b8YVxNY

Für die ersten drei Scores habe ich den Code im Element raus genommen, aber das macht auch keinen Unterschied.

---

> aber dieser beeinflusst scheinbar nur den ersten Slider.

Eigentlich nicht... wenn ich Ihre Pretest-Links von oben aufrufe (also, jetzt mit dem offenbar fehlerhaften Code nur noch den zweiten), dann werden mir die Rahmen um die Slider angezeigt. Um alle. Ich teste hier gerade mit Firefox.

---

Bei mir sind sowohl in Safari als auch in Chrome die Slider nicht mal mehr in den grauen Boxen und 'Score' sowie die Slider Box sind ebenfalls bei den ersten drei komplett verschwunden.. Bei den übrigen ist Score sowie ein oranger Kasten um Score vorhanden, aber die Slider sind auch außerhalb der grauen Box, zu der sie jeweils gehören.

---

ah Moment, ich glaube ich weiß woran es liegt

---

Nicht am Chrome jedenfalls ... da sieht es bei mir bei https://www.soscisurvey.de/th23/?act=CQN7UkFg2JNMXhYEWoXMLLMs immer noch korrekt aus. Mit runden Ecken und so.

---

Hi, das Problem konnte ich lösen, allerdings kriege ich nach wie vor die Boxen die 'Score' und den entsprechenden Slider beinhalten nicht nach unten geschoben, sodass sie immer auf der gleichen Höhe sind.
Ich habe es sowohl mit relative/absolute als auch mit flex probiert, vielleicht mache ich da aber auch einfach was komplett falsch.
Ich habe div.s2question div.s2item als 'child' behandelt und an mehreren Stellen probiert, den entsprechenden 'parent' code einzufügen. Allerdings funktioniert das weder, wenn ich ein weiteres div um das bestehende einfüge, noch wenn ich den parent code in die Tabelle einfüge. Muss ich in der Tabelle noch ein weiteres div anlegen, was div.s2question div.s2item  dann beinhaltet, also z.B. in <td> oder geht das grundsätzlich nicht, weil alles in einer Tabelle ist?

---

> Ich habe es sowohl mit relative/absolute als auch mit flex probiert, vielleicht mache ich da aber auch einfach was komplett falsch.

Flexbox braucht ein bisschen mehr Abstimmung zwischen den Inhalten. Und zwar müssten Sie erstmal dafür sorgen, dass die Boxen (also die großen Boxen) von einem display:flex Element umschlossen sind. Statt einer Tabellen. Dadurch kann man dafür sorgen, dass die Boxen alle gleich hoch sind.

Wenn das erledigt ist, kann man die Boxen als display:flex einstellen, muss dann aber die Richtung "column" einstellen, sodass die Elemente darin nicht neben-, sondern untereinander erscheinen. Und dann kann man festlegen, dass die Elemente über die gesamte Länge verteilt werden sollen.