Text-decoration

[Thomas]

Hallo zusammen!

Eine (für Euch) leichte Frage, deren Antwort mich zum Verzeifeln bringt (finde dazu nichts!):

Ich habe in meinen style-sheet folgendes angegeben:

.tdpop
{
  font-family: tahoma,verdana,Arial,Helvetica, sans-serif;
  font-size: 10pt;
  text-color:#00004D;
  text-align: justify;
  text-decoration: underline;
  }

Wie ihr also seht, möchte ich den Text in einer Tabelle unterstreichen lassen, was auch funktioniert. Kann man die Unterstreichung auch in einer anderen Farbe (als in diesem Fall schwarz) darstellen? Der Text soll dabei allerdings schwarz bleiben!!

Vielen Dank an Euch!

Thomas

[Gerd]

Hallo Thomas,
dann mußt du nicht text-decoration, sondern border verwenden, dann geht's.

a {
color: #0004D;
border-bottom: 1px solid #F00;
}

Viel Spaß!
Gerd

[Gernot Back]

Hallo Gerd,

dann mußt du nicht text-decoration, sondern border verwenden, dann geht's.

a {
color: #0004D;
border-bottom: 1px solid #F00;
}

Das ist aber etwas anderes als eine Unterstreichung. Die Buchstaben g, j, p, q, y haben Unterlängen, die von einer Unterstreichung geschnitten werden, wie du an der von mir geänderten Posting-Überschrift erkennst.

Bei border-bottom werden die Unterlängen nicht geschnitten.

Gruß Gernot

[Der Martin]

Hallo Gernot,

Die Buchstaben g, j, p, q, y haben Unterlängen, die von einer Unterstreichung geschnitten werden, wie du an der von mir geänderten Posting-Überschrift erkennst.
Bei border-bottom werden die Unterlängen nicht geschnitten.

Richtig, daran hatte ich auch schon gedacht. Das wäre aber von der Optik her eher ein Pluspunkt für die Verwendung von border-bottom anstatt einer echten Unterstreichung.

Schönen Tag noch,
 Martin

[Gernot Back]

Hallo Martin,

Die Buchstaben g, j, p, q, y haben Unterlängen
Bei border-bottom werden die Unterlängen nicht geschnitten.

Richtig, daran hatte ich auch schon gedacht. Das wäre aber von der Optik her eher ein Pluspunkt für die Verwendung von border-bottom anstatt einer echten Unterstreichung.

Wenn es darum geht, dem usability-erschwerenden Eindruck entgegenzuwirken, es handele sich bei der unterstrichenen Textpassage um einen anklickbaren Link, der sich bei einer Webseite immer aufdrängt, gebe ich dir Recht. Aber mit unterschiedlichen Unterstrichstärken und -farben könnte man da ja auch eine Differenzierung von üblichen Links einführen.

Mit Border-Bottom geht es allerdings leichter, den Strich in einer anderen Stärke und in einer anderen Farbe zu definieren als den "unterstrichenen" Text.

Ich habe da mal experimentiert. Der folgende Code wird bei meinen Browsern nur in Mozilla-Derivaten so interpretiert wie ich das haben möchte:

  
em { font-family:Arial,verdana,Helvetica,Swiss,sans-serif;  
   font-weight:900;  
   color:red;  
   font-style:normal;  
   text-decoration:underline;  
}  
  
em span {  
   font-weight:100;  
   color:black;  
}  

Es gäbe da aber auch noch die Möglichkeit, mit einem Hintergrundbild zu arbeiten, bei dem man die Strichstärke und -farbe nach Gusto definiert. Das hat freilich den Nachteil, dass dieses in bestimmten Ausgabemedien (Druck, Handy, etc.) üblicherweise gar nicht angezeigt wird.

  
em {  
   font-family:Arial,verdana,Helvetica,Swiss,sans-serif;  
   font-style:normal;  
   font-weight:normal;  
   color:black;  
   background:url(dreiRotePixelUeberEinander.gif) repeat-x 0 .98em;  
}  

Gruß Gernot

[Dieter Raber]

Hallo Thomas,

Wie ihr also seht, möchte ich den Text in einer Tabelle unterstreichen lassen, was auch funktioniert. Kann man die Unterstreichung auch in einer anderen Farbe (als in diesem Fall schwarz) darstellen? Der Text soll dabei allerdings schwarz bleiben!!

Eigentlich geht das nicht, zumindest nicht mit text-decoration. Du koenntest allerdings bei :hover ein border-bottom in einer beliebigen Farbe angeben. Und da der IE das wahrscheinlich wieder nicht kann, muesstest du wohl auf Javascript zurueckgreifen.
Wenn du aber nicht einen wahsinnig wichtigen Grund fuer den Unterstrich hast, solltest du ihn komplett weglassen. Unterstriche sind Indikatoren fuer Links, und wenn es sich bei deinem Text nicht um einen solchen handelt, solltest du eine andere Art der Hervorhebung waehlen, etwa den Wechsel der Hintergrundfarbe.

Gruß,

Dieter

[Hilker]

Tach

.tdpop
{
  font-family: tahoma,verdana,Arial,Helvetica, sans-serif;
  font-size: 10pt;
  text-color:#00004D;
  text-align: justify;
  text-decoration: underline;
  }

Gerd hat schon den entscheidenden Hinweis gegeben, darauf kannst Du aufbauen. Ich wollte nur noch was zu Deinem Style-Sheet sagen.

Du solltest Dich etwas bemühen alles etwas einheitlich zu halten, allein der Übersicht wegen.
bei text-color:#.... ist beispielsweiese kein Leerzeichen hinter dem Doppelpunk, wie in den anderen Fällen... Ebenso bei den Kommata die die Font Falmilien trennen. Dort ist auch noch das "mal groß, mal kleinschreiben" zu bemängeln.

Das sollte der Funktion alles keinen widerstand leisten, jedoch solltest Du Dir selbst eins sein.
Speziell in den Unix(artigen) welt ist "index.html" nicht gleich "Index.html", nur so als Beispiel. Hier ist alles Case-Sensesitive!

Viel Erfolg noch und

mfG der Hilker

[Der Martin]

Hallo Thomas,

Eine (für Euch) leichte Frage, ...

geht so. ;-)

font-size: 10pt;

Ist das ein Stylesheet für den Papierausdruck? Falls nein, ist "pt" keine wirklich geeignete Einheit für die Schriftgröße. Hier empfiehlt sich eine Angabe in "%" oder "em".

Kann man die Unterstreichung auch in einer anderen Farbe (als in diesem Fall schwarz) darstellen?

Ja, kann man. Übrigens ist dein Text und die Unterstreichung in deinem Beispiel nicht schwarz, sondern dunkelblau (#00004D). Wenn die Unterstreichung andersfarbig sein soll, brauchst du eine doppelte Verschachtelung.

Beispiel:

<p>Dieser Absatz ist in <span class="u"><span>schwarzer</span></u> Schrift gesetzt.</p>

p
 { color: #000;
 }

p span.u
 { color: #F00;
   text-decoration: underline;
 }

p span.u span
 { color: #000;
 }

In diesem Beispieltext sollte das Wort "schwarzer" rot unterstrichen sein.
Es gibt noch eine einfachere, aber nicht so elegante Möglichkeit: Man kann die Unterstreichung mit einem border-bottom simulieren, wie Gerd schon vorgeschlagen hat.

So long,
 Martin

[Ashura]

Hallo Martin.

<p>Dieser Absatz ist in <span class="u"><span>schwarzer</span></u> Schrift gesetzt.</p>

Was ist das?

Und warum nicht em oder strong? Wenn etwas unterstrichen werden soll, hat es meist auch inhaltlich eine hervorzuhebende Bedeutung, wofür em oder strong angemessen sind.

Einen schönen Freitag noch.

Gruß, Ashura

[Der Martin]

Hallo,

Und warum nicht em oder strong? Wenn etwas unterstrichen werden soll, hat es meist auch inhaltlich eine hervorzuhebende Bedeutung, wofür em oder strong angemessen sind.

ja, normalerweise schon. ich wollte diese Bedeutung aber nicht vorwegnehmen und habe deshalb absichtlich neutrale spans verwendet. Es ging ja nur um das Prinzip der Unterstreichung.
Um ehrlich zu sein: Ich hatte sogar überlegt, für dieses Beispiel das u-Element wiederzubeleben, hab es dann aber doch sein lassen.

Ciao,
 Martin

[Ashura]

Hallo Martin.

Um ehrlich zu sein: Ich hatte sogar überlegt, für dieses Beispiel das u-Element wiederzubeleben, hab es dann aber doch sein lassen.

Zu 50% ja:

<p>Dieser Absatz ist in <span class="u"><span>schwarzer</span></u> Schrift gesetzt.</p>

Einen schönen Freitag noch.

Gruß, Ashura

[Der Martin]

Tach,

Um ehrlich zu sein: Ich hatte sogar überlegt, für dieses Beispiel das u-Element wiederzubeleben, hab es dann aber doch sein lassen.

Zu 50% ja:

<p>Dieser Absatz ist in <span class="u"><span>schwarzer</span></u> Schrift gesetzt.</p>

Auweia. Erwischt... *kopfeinzieh*
Okay, soll nicht wieder vorkommen. Heute jedenfalls nicht. ;-)

So long,
 Martin

[Thomas]

Tach,

Um ehrlich zu sein: Ich hatte sogar überlegt, für dieses Beispiel das u-Element wiederzubeleben, hab es dann aber doch sein lassen.

Zu 50% ja:

<p>Dieser Absatz ist in <span class="u"><span>schwarzer</span></u> Schrift gesetzt.</p>

!!! Wieso "auweia"? Sorry, ich kann nicht mehr folgen! :-(
Bei mir erscheint der "Schrift gesetzt" auch rot, nachdem bei "schwarz" eine rote Unterstreichung eingefügt ist!! Wir sind schon nahe am Ziel... Bitte nochmals um kurze Hilfestellung! DANKE!!!

Auweia. Erwischt... *kopfeinzieh*

Okay, soll nicht wieder vorkommen. Heute jedenfalls nicht. ;-)

So long,
Martin

[wahsaga]

hi,

<p>Dieser Absatz ist in <span class="u"><span>schwarzer</span></u> Schrift gesetzt.</p>

!!! Wieso "auweia"? Sorry, ich kann nicht mehr folgen! :-(

Weil Martin statt des schließend </span> ein </u> geschrieben hatte.

Bei mir erscheint der "Schrift gesetzt" auch rot, nachdem bei "schwarz" eine rote Unterstreichung eingefügt ist!!

Eben deshalb.

Wir sind schon nahe am Ziel... Bitte nochmals um kurze Hilfestellung! DANKE!!!

Es wäre hilfreich, wenn du Beispielcode nicht unreflektiert übernehmen, sondern kritisch hinterfragen würdest - dann hätte es dir eigentlich schon auffallen müssen.

gruß,
wahsaga

[Thomas]

hi,

<p>Dieser Absatz ist in <span class="u"><span>schwarzer</span></u> Schrift gesetzt.</p>

!!! Wieso "auweia"? Sorry, ich kann nicht mehr folgen! :-(

Weil Martin statt des schließend </span> ein </u> geschrieben hatte.

Bei mir erscheint der "Schrift gesetzt" auch rot, nachdem bei "schwarz" eine rote Unterstreichung eingefügt ist!!

Eben deshalb.

Wir sind schon nahe am Ziel... Bitte nochmals um kurze Hilfestellung! DANKE!!!

Es wäre hilfreich, wenn du Beispielcode nicht unreflektiert übernehmen, sondern kritisch hinterfragen würdest - dann hätte es dir eigentlich schon auffallen müssen.

gruß,
wahsaga

Hi wahsaga,

vielen Dank für Deine prompte Hilfe. Ist mir nicht gleich aufgefallen, bin auf dem Gebiet noch ein ziemlicher Frischling. Darf ich dazu nochmals Dein Wissen "anzapfen"? Kann man den Unterstrich auch dicker machen?

Vielen Dank nochmals
Thomas

[wahsaga]

hi,

Kann man den Unterstrich auch dicker machen?

Seine Dicke ist allerhöchstes von der Schriftgröße abhängig.

Ja, an Hand von Martins Beispiel könnte man jetzt für den äußeren span eine viel größere Schriftgröße angeben, die man dann im inneren span wieder "runterdreht".
Da das aber auch Auswirkungen auf die Höhe der line-box etc. haben könnte, würde ich davon abraten.

Wenn du die Dicke bestimmen willst - dann nutze doch lieber einen border-bottom. (der ist natürlich nur dann geeignet, wenn der text so kurz ist, dass er aller Voraussicht nach nicht über mehr als eine Zeile gehen wird.)

gruß,
wahsaga