Moni: Überschrift in Linie anzeigen, quasi Linie durch Text

h1 {
font-size: 20px;
border-bottom: 1px dotted #C0C0C0;
}

So habe ich die Linie unter dem Text, ich möchte den Text aber auf der Linie haben, das die Linie quasi durch geht.

Geht das irgendwie?

Moni

  1. Meine Herren,

    So habe ich die Linie unter dem Text, ich möchte den Text aber auf der Linie haben, das die Linie quasi durch geht.

    Geht das irgendwie?

    text-decoration: line-through;

    http://de.selfhtml.org/css/eigenschaften/schrift.htm#text_decoration

    1. Om nah hoo pez nyeetz, 1UnitedPower!

      http://de.selfhtml.org/css/eigenschaften/schrift.htm#text_decoration

      Es wäre schön, wenn du auch im Wiki guckst und besser auf das Wiki verlinkst, falls es den Abschnitt da schon gibt. http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textformatierung/text-decoration

      Matthias

      -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kai und Kaiman.
      1. @@Matthias Apsel:

        nuqneH

        Es wäre schön, wenn du auch im Wiki guckst und besser auf das Wiki verlinkst, falls es den Abschnitt da schon gibt.

        Wenn das Wiki die alte Doku ablösen soll, wäre es schön, wenn serverseitige Weiterleitungen von den URIs in die Doku auf die entsprechenden Stellen im Wiki eingerichtet werden würden.

        Dann hätte man hinter den alten Link die aktuellen^W neueren Informationen.

        Qapla'

        -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Tach!

          Wenn das Wiki die alte Doku ablösen soll, wäre es schön, wenn serverseitige Weiterleitungen von den URIs in die Doku auf die entsprechenden Stellen im Wiki eingerichtet werden würden.

          Die Idee existiert schon seit mindestens dem Self-Treffen vorigen Jahres. Nur, es hat noch keiner die Zeit gefunden, das umzusetzen. Es ist nämlich auch einfacher gesagt als realisiert. Die alten Seiten sind statisch. Das bedeutet, die muss jemand mit administrativen Rechten bearbeiten. Zudem müssen bei Änderungen am Ziel gegebenenfalls die Links nachgezogen werden. Die Idee war eigentlich gewesen, die sowieso schon vorhandene Selfhtml-Extension im Wiki so zu erweitern, dass ein neues Wiki-Syntax-Element hinzukommt, in das man die alte(n) URL(s) einträgt und daraufhin dann ein Mechanismus losläuft, der in die statischen Seiten die Hinweise auf das Wiki einbaut/ändert.

          Viel Arbeit, wenig Unterstützung.

          dedlfix.

  2. @@Moni:

    nuqneH

    h1 {
    font-size: 20px;

    Nicht die beste Idee. Verwende relative Einheiten: em oder rem.

    So habe ich die Linie unter dem Text, ich möchte den Text aber auf der Linie haben, das die Linie quasi durch geht.

    Du meinst: durch die Unterlängen?

    Geht das irgendwie?

    Ja, mit absolut positioniertem Pseudoelement. Dessen Höhe ist eine „magic number“*. Der beste Wert könnte von der Schriftart abhängen, auf die man keinen 100%igen Einfluss hat.

    Qapla'

    * siehe Abschnitt** „Magic numbers“ in Code smells in CSS

    ** Grmpf, kann der Autors keine IDs für Abschnitte vergeben?

    -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. http://dabblet.com/gist/7318806

      danke, aber wie schaffe ich es, das die Linie unter dem Text nicht zu sehen ist.

      1. Om nah hoo pez nyeetz, Moni!

        danke, aber wie schaffe ich es, das die Linie unter dem Text nicht zu sehen ist.

        Du könntest ein zusätzliches span-Element einfügen und diesem einen Hintergrund geben. Nicht schön, aber machbar.

        <h1><span>Heading</span></h1>

        Matthias

        -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Diele und Dielektrizitätskonstante.
        1. @@Matthias Apsel:

          nuqneH

          Du könntest ein zusätzliches span-Element einfügen und diesem einen Hintergrund geben. Nicht schön, aber machbar.

          Überhaupt nicht schön, der Gestaltung wegen das Markup zu verhunzen.

          Beim Refactorn könnte jemand auf die Idee kommen, das im Markup unsinnige span-Element zu entsorgen.

          Und wenn man sich schon solch eines Hacks bedient, sollte man das vielleicht kenntlich machen:

          <h1><span role="presentation">Heading</span></h1>

          auch wenn das span-Element keine semantische Rolle hat und dies für Barrierefreiheit nicht nötig wäre.

          So ein Hack ist aber gar nicht nötig. Siehe ChrisC.

          (Das ist aber mal ein nettes Buchstabenspiel.)

          Qapla'

          -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

            So ein Hack ist aber gar nicht nötig. Siehe ChrisC.

            <p class="subtitle fancy"><span>A fancy subtitle</span></p>, also auch zusätzliches Markup.

            Matthias

            -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pan und Panther.
            1. @@Matthias Apsel:

              nuqneH

              <p class="subtitle fancy"><span>A fancy subtitle</span></p>, also auch zusätzliches Markup.

              Oops, da hast du recht.

              Geht’s auch ohne? Ja, auf die harte Tour.

              Unschön daran:

              1. magic number, abhängig vom Text und der Schriftart.

              2. Geht nur bei einfarbigem Hintergrund.

              Qapla'

              -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

                Unschön daran:
                1. magic number, abhängig vom Text

                wobei das richtig unschön ist, denn das bedeutet, man kann nicht mal für mehrere Überschriften in einem Dokument dasselbe CSS verwenden.

                Matthias

                -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Erze und Erzeugnisse.
                1. @@Matthias Apsel:

                  nuqneH

                  Unschön daran:
                  1. magic number, abhängig vom Text

                  wobei das richtig unschön ist, denn das bedeutet, man kann nicht mal für mehrere Überschriften in einem Dokument dasselbe CSS verwenden.

                  Ja.

                  Deshalb: Und tschüss, magic numbers!

                  Funktioniert in Chrome, Safari, Opera (Presto). Nicht im Firefox, der scheint padding nicht auf ::first-letter anzuwenden. IE nicht getestet.

                  Qapla'

                  -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                  1. @@Gunnar Bittersmann:

                    nuqneH

                    Nicht im Firefox, der scheint padding nicht auf ::first-letter anzuwenden.

                    Wenn man die Linie anders erzeugt als das ::before-Pseudoelement dafür zu verbraten, dann klappt’s auch im Firefox.

                    Qapla'

                    -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                    1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

                      „Talente finden Lösungen, Genies entdecken Probleme.“

                      Respekt. Unbestritten. Habe ich bei dir nicht auch schon mal „CSS magician gelesen“ (twitter vielleicht)?

                      Matthias

                      -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Git und Gitarre.
                      1. @@Matthias Apsel:

                        nuqneH

                        „Talente finden Lösungen, Genies entdecken Probleme.“

                        Grmpf, da hab ich doch grad eine Lösung gefunden.

                        Respekt. Unbestritten. Habe ich bei dir nicht auch schon mal „CSS magician gelesen“ (twitter vielleicht)?

                        Mag sein. Ich erinner micht dunkel.

                        Vielen Dank für die Blumen. Ich hab sie nicht verdient. Noch nicht.

                        Äußerst unschön ist das wiederholte 'white' (bzw. andere Hintergrundfarbe) im Code. Single point of change aside ist das nicht tauglich für Hintergrundbilder.

                        So, jetzt aber.

                        Qapla'

                        -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

                        Folgende Nachrichten verweisen auf diesen Beitrag:

      2. @@Moni:

        nuqneH

        danke, aber wie schaffe ich es, das die Linie unter dem Text nicht zu sehen ist.

        Protip: Wenn man „unter“ in z-Richtung meint, sagt man besser „hinter“.

        Qapla'

        -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. Hi,

    So habe ich die Linie unter dem Text, ich möchte den Text aber auf der Linie haben, das die Linie quasi durch geht.

    http://css-tricks.com/line-on-sides-headers/

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?