SELFHTML Forum Doku Wiki Blog

Forumsarchiv 2013, November
Überschrift in Linie anzeigen, quasi Linie durch Text

archivierte Beiträge lesen

  1. CSS Überschrift in Linie anzeigen, quasi Linie durch Text Moni 05. 11. 2013, 12:31

Überschrift in Linie anzeigen, quasi Linie durch Text

Moni 05. 11. 2013, 12:31

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

Überschrift in Linie anzeigen, quasi Linie durch Text

1UnitedPower 05. 11. 2013, 12:48

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Matthias Apsel 05. 11. 2013, 14:16

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.

Weiterleitungen?

Gunnar Bittersmann 05. 11. 2013, 15:30

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

Weiterleitungen?

dedlfix 05. 11. 2013, 16:09

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.

Überschrift in Linie anzeigen, quasi Linie durch Text

Gunnar Bittersmann 05. 11. 2013, 13:11

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Moni 05. 11. 2013, 14:15

http://dabblet.com/gist/7318806

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Matthias Apsel 05. 11. 2013, 14:40

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.

Überschrift in Linie anzeigen, quasi Linie durch Text

Gunnar Bittersmann 05. 11. 2013, 15:16

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Matthias Apsel 05. 11. 2013, 18:16

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.

Überschrift in Linie anzeigen, quasi Linie durch Text

Gunnar Bittersmann 05. 11. 2013, 19:06

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Matthias Apsel 05. 11. 2013, 19:28

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.

Überschrift in Linie anzeigen, quasi Linie durch Text

Gunnar Bittersmann 05. 11. 2013, 19:53

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Gunnar Bittersmann 05. 11. 2013, 20:04

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Matthias Apsel 05. 11. 2013, 20:11

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.

Überschrift in Linie anzeigen, quasi Linie durch Text

Gunnar Bittersmann 07. 11. 2013, 11:16

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

Überschrift in Linie anzeigen, quasi Linie durch Text

Gunnar Bittersmann 07. 11. 2013, 14:22

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

Überschrift in Linie anzeigen, quasi Linie durch Text

ChrisB 05. 11. 2013, 14:40

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?

© 1998-2014 SELFHTMLImpressumSoftware: Classic Forum 3.4