Wort-Markierung geht über ganze Zeile

[Andre]

Ich will einzelne Wörter "markieren", d.h. den Hintergrund ändern.
Das mache ich so:

.markiert
{
font-size:14px;
background-color:#006600;
}

<p class="markiert">Test</p>

Leider wird dabei die ganze Zeile markiert. Gibt es eine Möglichkeit, dass ich nur das entsprechende Wort markiere?

[Danny]

Hi,

ja, die gibt's: span

[Nichtsnutz]

Hi!

<p class="markiert">Test</p>

Leider wird dabei die ganze Zeile markiert. Gibt es eine Möglichkeit, dass ich nur das entsprechende Wort markiere?

Falsch. Der gesamte Absatz wird makiert. Wenn du nur ein Wort markiert haben willst, dann musst du Inline-Elemente nutzen.
<p>Dies ist <span class="markiert">ein</span> Text.</p>
Bei dem obigen Beispiel hast du das Wort "ein" markiert, der Rest ist ein ganz gewöhnlicher Absatz und bleibt ggf. unmarkiert.

Tschüss
  Wolfgang

[Jens Müller]

Hallo Andre,

<p class="markiert">Test</p>

Leider wird dabei die ganze Zeile markiert. Gibt
es eine Möglichkeit, dass ich nur das entsprechende
Wort markiere?

Ist ja auch richtig <p> ist ein Blocklevel-Element.
Wenn du statt dessen das Inline Element <span>
verwendest sollte es klappen.

<p><span class="markiert">Test</span></p>

gruesse aus'm ruhrpott
  jens mueller

[stefan]

Hallo,

Leider wird dabei die ganze Zeile markiert. Gibt es eine Möglichkeit, dass ich nur das entsprechende Wort markiere?

Die anderen sagen im Prinzip nichts falsches, allerdings stellt sich für mich die Frage, _warum_ Du das Wort markieren willst? Nur aus dekorativen Gründen? - Dann ist <span> für Dich genau das richtige. Solltest Du es jedoch zum _hervorheben_ bestimmter Wörter verwenden wollen, also um diese Wörter zu _betonen_, dann würde ich Dir zu <em> oder <strong> raten. Diese Inline-Elemente sind extra dafür da, einzelne Textteile (also z.B. Wörter) in HTML innerhalb der logischen Auszeihnung zu betonen.

Beispiel:

<p>Jeder bitte nur <strong>ein</strong> Kreuz.</p>

mit dem CSS:

strong{
  font-weight:normal;
  background:#F60;
  color:#000;
  }

Standardmäßig wird <em> in den gängigen Browsern kursiv, <strong> in Fettschrift dargestellt. Dies lässt sich jedoch mit CSS leicht ändern.

Mehr zum Thema: http://selfhtml.teamone.de/html/text/logisch.htm

Viel Spaß,
stefan