div mit punkten auffüllen

[Michi]

Ich möchte ein DIV mit Punkten auffüllen. Geht das nur mit einem IMAGE, oder doch mit CSS. Leider habe ich bis jetzt nichts gefunden, nur einen Beitrag der doch schon etwas älter ist zu diesem Thema

<div class="row">

<div class="col-sm-11">Frage 1</div>

<div class="col-sm-1"><input  class="form-check-input" type="radio" name="antwort"></div>

</div>

[Felix Riesterer]

Liebe(r) Michi,

Ich möchte ein DIV mit Punkten auffüllen.

dann schön vorsichtig einfüllen. Nicht daneben schütten!

Geht das nur mit einem IMAGE, oder doch mit CSS.

Keine Ahnung was Du meinst.

Leider habe ich bis jetzt nichts gefunden, nur einen Beitrag der doch schon etwas älter ist zu diesem Thema

Aha, aber welchen wohl...?

<div class="row">

<div class="col-sm-11">Frage 1</div>

<div class="col-sm-1"><input class="form-check-input" type="radio" name="antwort"></div>

</div>

Div-Suppe! Hurra! Ich wünsche Dir guten Appetit.

Und das nächste Mal formulierst Du Deine Punkte so, dass ich gleich verstehe, was Du wirklich erreichen willst. Mit Punkten kann man nämlich alles mögliche machen - von einer polka dot-Tapete, über senkrechte Linien hin zu gepunkteten Rahmen. Aber was genau Du wohl mit "auffüllen" gemeint haben könntest? Keine Ahnung.

Liebe Grüße

Felix Riesterer

[Michi]

Eentschuldigung das ich mich unpräzisse ausgedrückt habe.#

Ich gestalte meine Seite mit Bootstrap4

Es sind zwei DIV in einem steht die Frage im anderen ein radio Button. Mit auffülene meine ich das erste DIV.

Antwort der Frage 1 ................................ O

Antwort der Frage 2 ................................ O

[Matthias Scharwies]

Servus!

Eentschuldigung das ich mich unpräzisse ausgedrückt habe.

Es sind zwei DIV in einem steht die Frage im anderen ein radio Button. Mit auffülene meine ich das erste DIV.

Antwort der Frage 1 ................................ O

Antwort der Frage 2 ................................ O

Felix kritisierte mit DIV-Suppe, dass dein HTML eigentlich nur so aussehen sollte:

<label for="sonstwas">Frage 1</label>
<input id="sonstwas" class="form-check-input" type="radio" name="antwort">

So was hatten wir Anfang des Monats schon mal:

• Speisekarte mit Punkte zwischen Speisen und..........Preis

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Michi

Es sind zwei DIV in einem steht die Frage im anderen ein radio Button. Mit auffülene meine ich das erste DIV.

Antwort der Frage 1 ................................ O

Antwort der Frage 2 ................................ O

Jeweils ein Radiobutton für eine Frage ergibt keinen Sinn. Radiobuttons sind für jeweils eine Option zu einer Frage, also

Frage 1:
Option 1 ........... O
Option 2 ........... O

Die ganze Gruppe wäre ein fieldset-Element; „Frage 1“ dessen legend-Element.

Mir scheint aber, du willst gar keine Radiobuttons, sondern Checkboxen.

Und warum soll die Beschriftung vorn stehen? Bei Checkboxen und Radiobuttons ist es üblich, dass diese vor der Beschriftung stehen. Dann erübrigt sich auch die gepunktete Linie.

LLAP 🖖

[Gunnar Bittersmann]

@@Michi

Ich möchte ein DIV mit Punkten auffüllen. […] Leider habe ich bis jetzt nichts gefunden, nur einen Beitrag der doch schon etwas älter ist zu diesem Thema

So alt ist dieser Beitrag doch noch gar nicht; die Pizza ist noch warm.

Nur dass bei dir das Markup und damit die Selektoren anders sind: keine Beschreibungsliste, sondern Label, denn jedes Eingabefeld muss ein Label haben!

<label>
	<span><span>Frage 1</span></span>
	<span><input class="form-check-input" type="radio" name="antwort"></span>
</label>

Selektoren:

dl > div    →   label
dt          →   label > span:first-child
dt > span   →   label > span:first-child > span
dd          →   label > span:last-child

Bootstrap ist dir hier nur im Weg; du bist besser ohne dran.

LLAP 🖖

[Linuchs]

Da ein DIV eine Fläche ist, hatte ich es so verstanden, dass du die "sprenkeln" willst. Aber du möchtest nur eine gepunktete Linie.

.col-sm-11 {
  margin-bottom: 1px dotted #888;  /* oder dashed */
}

<div class="col-sm-11">Frage 1</div>

Wenn du nur den leeren Teil punkten willst, muss der (weiße) Hintergrund des Textes die Linie überdecken:

.col-sm-11 {
  border-bottom: 1px dotted #a00;
}
.col-sm-11 div {
  display: inline-block;
  background-color: #fff;
  padding-right: .5em;
  margin-bottom: -1px;
}

<div class="col-sm-11"><div>Frage 1</div></div>

Gruß, Linuchs