Lückentext mit CSS erstellen

[Thomas W.]

Hallo,

für einen Lückentext würde ich gerne die Lücken mit CSS erstellen, sprich einen leeren Bereich mit einer gewissen Breite in einem Text freilassen. Leider funktioniert das folgende nicht

Text Text Text <span class="leereluecke"></span> Text Text

.leereluecke { position:relative; width:2cm; },

da inline-Elemente nach http://www.w3.org/TR/REC-CSS2/visudet.html#q4 keine width oder min-width Eigenschaft haben. Setze ich das Ganze mit <div>, kriege ich Zeilenumbrüche in den Text.
Hat jemand eine Idee, wie ich das hinkriege (ohne dass ich z. B. 20 Leerzeichen in das span-Element schreibe, dann brauch ich kein CSS mehr)?

Gruss
Thomas

[Tim Tepaße]

Hallo Thomas,

für einen Lückentext würde ich gerne die Lücken mit CSS erstellen (..)

Interessehalber: Wozu?

Ich wäre spontan auf die Idee gekommen, daß ganze mit Input-Elementen
zu erstellen, auch wenn sich da sicherlich auch Probleme ergeben würden.

• Tim

[Heiner]

Hallo,

Je nach Anwendung kannst Du vielleicht auch folgendes machen:

Columbus entdeckte <span class="luecke">Amerika</span> im Jahr 1492.

Nun kannst Du in der Lücke die Textfarbe weiß machen, die Hintergrundfarbe auch. Wenn Du danach eine Musterlösung anbietest, musst Du nur noch die Lückenfarbe ändern. Das geht natürlich nur, wenn die Prüflinge einen Ausdruck haben, nicht den Quelltext. Sonst könnten sie ja spicken (-:

Heiner

[Ed X]

Hi,

Nun kannst Du in der Lücke die Textfarbe weiß machen, die Hintergrundfarbe auch. Wenn Du danach eine Musterlösung anbietest, musst Du nur noch die Lückenfarbe ändern. Das geht natürlich nur, wenn die Prüflinge einen Ausdruck haben, nicht den Quelltext. Sonst könnten sie ja spicken (-:

Das können die auch anders, denn du musst nur mit der Maus drüberfahren,
und das Dingens markieren, dann wird der ganze Schmuß sichtbar. :-(

bye eddie

[at]

Hallo.

Hat jemand eine Idee, wie ich das hinkriege (ohne dass ich z. B. 20 Leerzeichen in das span-Element schreibe, dann brauch ich kein CSS mehr)?

Mit "visibility:hidden"?
MfG, at

[Maxx]

Hallo Thomas,

Text Text Text <span class="leereluecke"></span> Text Text
.leereluecke { position:relative; width:2cm; },
Hat jemand eine Idee

.leereluecke {padding-left:2cm;}

HTH

Maxx

[jürgen j.]

Hallo Maxx!

.leereluecke {padding-left:2cm;}

Prinzipiell richtig, MSIE5.0 macht da aber nicht mit und ignoriert das.

tschüs, jürgen

[Der Hans]

Moin!

Was ist denn mit dem guten alten display:block; ?
Oder habe ich was falsch verstanden oder ein Brett vorm Kopf?

*grübelnd*

Der Hans

[Der Hans]

Moin!

*grübelnd*

Ich war mal wieder etwas vorlaut:
Weder divs mit display:inline noch spans mit display:block funzen wie gewollt.

Gruß

Der Hans

[stefan]

Hallo,

wie wärs mit "word-spacing" oder "letter-spacing"? So in der Art:

Ein ganz normaler Text, bei dem
   zwe<span style="word-spacing:2em">i
   W</span>örter weit auseinander stehen

bzw.

Ein ganz normaler Text, bei dem
   zwe<span style="letter-spacing:2em">i
   W</span>örter weit auseinander stehen

Details dazu findest Du z.B. unter "SELFHTML > CSS > Textformatierung" (sinngemäß).

Viel Erfolg + schö

stefan

[Thomas W.]

Hallo,
erstmal danke für die Antworten; ich benutze padding-left (das ich so nicht kannte).

@Tim:
Der Text soll nicht eingetippt werden, sondern mittels Drag'n Drop auf die Lücke gezogen werden (es handelt sich um einen Lückentext für Deutschlerner). Schon benutzte Wörter werden dabei durchgestrichen. Ich könnte zwar Eintippen in das Input-Feld verhindern, aber das würde das Ganze nicht gerade intuitiv machen.

@Heiner und at:
Mit euren Vorschlägen werden die Lücken so lang wie die richtige Lösung; da die Wörter eine sehr unterschiedliche Länge haben, kann man das richtige Wort dann teilweise anhand der Lückenlänge erkennen.

@Hans:
display:inline erzeugt mir vor dem <div> einen Zeilenumbruch.

Gruss
Thomas