hoktar: Schrift zeilenweise farbig hinterlegen.

Hallo, ich bräuchte Hilfe bei folgendem Design:

Design

Die Schrift soll also farbig hinterlegt sein, aber nicht die ganze Zeile hindurch sondern nur dort wo wirklich auch Schrift ist.

Wenn ich den Text in ein <span> einbette und dem <span> eine background-color gebe, sieht das so aus: falsch
Also nicht was ich will. Wie erreiche ich das obige Ergebnis?

Freu mich über jeden Tipp, vielen Dank schonmal :)

  1. Moin!

    Also nicht was ich will. Wie erreiche ich das obige Ergebnis?

    In dem Du die Schrift in ein inline Element einbettest. Span ist dafuer das inline Element der Wahl.

    Nein ich veralbere dich nicht. Zu klaeren ist: Was hast Du mit deinem Span gemacht, dass es sich nicht so verhaelt?

    --
    Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.
  2. Leider fehlen Deinem Posting HTML und CSS, so dass wir nicht sagen können, ob der span vielleicht schon display: block; hat.

    Du brauchst auf jeden Fall display: inline; und eine line-height, die über der Schriftgröße liegt. Mehr Hilfe können wir Dir dann geben, wenn Du uns ein konkretes Beispiel verlinkst.

    Gruß, LX

    --
    RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
  3. Ich bin mal so frei: klick

    --
    for your security, this text has been encrypted by ROT13 twice.
    1. Om nah hoo pez nyeetz, zaphod1984!

      Ich bin mal so frei: klick

      Also bei mir sieht es in allen Browsern (FF3.6, Op10.5, IE8, Chr5, Saf4) aus wie gewünscht.

      Matthias

      --
      http://www.billiger-im-urlaub.de/kreis_sw.gif
      1. Om nah hoo pez nyeetz, apsel!

        Om nah hoo pez nyeetz, zaphod1984!

        Ich bin mal so frei: klick

        Also bei mir sieht es in allen Browsern (FF3.6, Op10.5, IE8, Chr5, Saf4) aus wie gewünscht.

        Uups, ich dachte, das wäre das gewünschte Online-Beispiel.

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Uups, ich dachte, das wäre das gewünschte Online-Beispiel.

          Reading-FAIL :p

        2. Uups, ich dachte, das wäre das gewünschte Online-Beispiel.

          Das ist ein Beispiel wie's geht... ;)

          --
          for your security, this text has been encrypted by ROT13 twice.
    2. Ich bin mal so frei: klick

      Ahhh danke! Hab den Fehler jetzt gefunden. Der Hauptunterschied zwischen deiner Lösung und meinem Versuch ist, dass ich ein float:left drin hab. Aus irgend einem Grund matscht er das Ganze zusammen wenn man im span ein float:left drin hat.
      Hat wer eine Ahnung warum? Wär interessant.

      Aber jedenfalls funktionierts jetzt, danke euch und dir besonders apsel :)

      1. Om nah hoo pez nyeetz, hoktar!

        Aber jedenfalls funktionierts jetzt, danke euch und dir besonders apsel :)

        Du dankst dem Falschen. Ich hab nur zaphods Lösung in verschiedenen Browsern getestet.

        float macht display: block draus.

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif