Überschrift in Linie anzeigen, quasi Linie durch Text

[Moni]

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

[1UnitedPower]

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

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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'

[dedlfix]

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.

[Gunnar Bittersmann]

@@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?

[Moni]

http://dabblet.com/gist/7318806

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

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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'

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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'

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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'

[Gunnar Bittersmann]

@@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'

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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'

[Gunnar Bittersmann]

@@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'

[ChrisB]

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