Text in Infobox ist unterstrichen

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich habe ein kleines Problem mit einer Infobox. Diese erscheint, wenn man mit der Maus über einen rot gestrichelten und zugleich schwarz unterstrichenen Text fährt. Das Problem ist jedoch, das der Text in der Infobox auch unterstrichen ist. Wisst Ihr, wie man den Text in der Infobox nicht unterstrichen darstellen kann? Hier der Code:

a.infobox
{
color:#000000;
}

a.infobox:hover
{
cursor: pointer;
}

a.infobox span
{
visibility: hidden;
position: absolute;
left: -99em;
padding: 1em;
margin-top: 2.0em;
padding:-200px;
line-height: 80%;
}

a.infobox:hover span
{
visibility: visible;
left: 32em;
border: 1px solid #c30;
}
Dieser Text soll unterstrichenDas ist ein Test sein

Danke im voraus :smile:)

#2

Moin,

ich habe ein kleines Problem mit einer Infobox.

In erster Linie hast Du ein Problem mit HTML und CSS. Du mischst beides durcheinander wie jemand, der nicht weiß, wofür HTML da ist.

Das Tag dient der physischen Inhaltsauszeichnung und wird daher nicht mehr verwendet. Denn für die physische Auszeichnung (also Optik und Layout) ist CSS da, nicht HTML!
Als weg mit dem Tag!

Wisst Ihr, wie man den Text in der Infobox nicht
unterstrichen darstellen kann?


Über CSS erreicht man eine Unterstreichung mit
text-decoration:underline bzw.
text-deocration:none

Freundliche Grüße,
-Efchen

#3

Moin moin,

Das Tag dient der physischen Inhaltsauszeichnung und wird
daher nicht mehr verwendet. Denn für die physische
Auszeichnung (also Optik und Layout) ist CSS da, nicht HTML!
Als weg mit dem Tag!

Oder ganz gemein , man killt den u tag im css

u {text-decoration:none}

Besonders gut wenn das HTML von einem uralten (hardcoded) Programm kommt.

#4

Oder ganz gemein , man killt den u tag im css

Damit ist es aber immer noch vorhanden. Ein Client, der die Semantik aus dem HTML-Code ausliest, weiß an der Stelle nichts damit anzufangen. Ob deswegen etwas Schlimmes passiert, kommt auf den Client an.

#5

Hi,

danke für Eure Antworten. Bin leider noch Newcommer in CSS. Aber mit meinen bescheidenen Kenntnissen, habe ich mal das „“ Tag rausgenommen und es durch CSS ersetzt. Trotzdem bleibt der Infotext selber weiterhin unterstrichen. Auch wenn ich in den Styles „text-decoration:none:“ eintragen würde. Hier die geänderte Zeile:


Dieser Text soll unterstrichenDas ist ein Test sein

#6

Info text ? worüber redest du überhaupt ? seh ich was du siehst , nein

also schreib genau welche Worte sind nicht wie du es haben willst.

Übrigens ist da ein span Tag mit style border, der unterstrichelt auch.

#7

Moin,

Bin leider noch Newcommer in CSS.

Ist ja nicht schlimm. Aber halt notwendig, wenn man eine Website gestalten will.

Trotzdem bleibt der
Infotext selber weiterhin unterstrichen.

Weil in Deinem Code auch nichts davon steht, dass irgendwo nicht unterstrichen sein soll. Abgesehen davon gibt es nirgendwo einen „Infotext“, nur einen Link der Klasse „infobox“.

Auch wenn ich in den
Styles „text-decoration:none:“ eintragen würde. Hier die
geänderte Zeile:

Was meinst Du, wieviel Sinn das macht, die Zeile so zu posten, dass a.infotext unterstrichen wird. Einen Fehler könnte man nur erkennen, wenn irgendwo text-decoration:none drin steht. Wahrscheinlich hattest Du nur einen Tippfehler drin oder sowas.

Dieser Text

Kleiner HTML-Exkurs: Du definierst den Inhalt als Gruppe, ohne seine Bedeutung festzulegen. Ein Textabsatz wird mit ausgezeichnet. dient dazu, mehrere Tags zu einer logischen Gruppe zusammenzufassen.

unterstrichen

Hier ist ein syntaktischer Fehler. Du kannst nicht das span schließen, bevor Du das a, was innerhalb des span liegt, geschlossen hast. Lass Deinen Code immer validieren.

Außerdem legst Du hier fest, dass unter dem Link ein gestrichelter Rahmen ist. Das ist kein Unterstreichen!

Die Tipps bzgl. HTML haben keinen Einfluss auf Dein eigentliches Problem.

Grüße,
-Efchen

#8

Ach, nochwas, manchmal ist es einfacher, einen Link zu einer Seite zu geben, wo ein Problem auftritt. Da sind manchmal ganz andere Fehler drin, die nichts mit der vermeintlichen Frage zu tun haben. Außerdem werden manche Fehler durch Kopieren in ein Forum auch schonmal entfernt. Die Antwortenden im Forum grübeln dann über nicht-existente Fehler, die nur in einer Seite sind, die sie nicht kennen.

#9

Hi Thomas,

ich glaube, das ich das Problem bei meiner Anfrage gestern genannt habe. Aber sein es drum. Hier noch einmal meine Frage in Kurzform:

Wenn ich mit dem Mauszeiger über den unterstrichenen und zugleich rot gepunkteten Text fahre, öffnet sich ein „Infotext“ Fenster. Der darin angezeigte Text ist jedoch unterstrichen. Ich möchte jedoch, das der Text im Infofenster NICHT unterstrichen ist.

Info text ? worüber redest du überhaupt ? seh ich was du
siehst , nein

#10

Wenn ich mit dem Mauszeiger über den unterstrichenen und
zugleich rot gepunkteten Text fahre, öffnet sich ein
„Infotext“ Fenster. Der darin angezeigte Text ist jedoch
unterstrichen. Ich möchte jedoch, das der Text im Infofenster
NICHT unterstrichen ist.

Links sind in den Browsern in der Regel unterstrichen.
Um ihnen das abzugewöhnen, gibst Du im „a.infobox:hover span“ ein text-decoration:none an. Dann ist „Das ist ein Test“ beim drüber hovern nicht mehr unterstrichen.

#11

Sooo,

auf besonderen Wunsch poste ich noch einmal den Code. Jetzt aber etwas verändert.

a.infobox
{
color:#000000;
}

a.infobox:hover
{
cursor: pointer;
}

a.infobox span
{
visibility: hidden;
position: absolute;
left: -99em;
padding: 1em;
margin-top: 2.0em;
padding:-200px;
line-height: 80%;
}

a.infobox:hover span
{
visibility: visible;
left: 32em;
border: 1px solid #c30;
text-decoration:none;
}
Dieser Text soll unterstrichenDas ist ein Test sein

Wie schon erwähnt, möchte ich erreichen, das der Satz Dieser Text soll unterstrichen sein komplett schwarz unterstrichen auf der Homepage angezeigt wird. ZUSÄTZLICH soll das Wort unterstrichen rot gepunktet unterstrichen sein. Fährt man nun mit dem Mauszeiger über das Wort unterstrichen , erscheint die infobox mit dem darin befindlichen Text Das ist ein Test. Leider ist dieser besagte Satz unterstrichen. Das soll er aber nicht sein. Es geht nur um diesen einen Satz, der unterstrichen angezeigt wird.

Durch das einfügen von „text-decoration:none;“ bei „a.infobox:hover span“, wird der Text zumindest im Internet Explorer nicht unterstrichen angezeigt. Aber im Firefox und bei Google Chrome ist dieser Text weiterhin unterstrichen.

Hoffe, das das Problem für alle jetzt klar rüberkam :smile:)

#12

Guten Morgen,

„Das ist ein Test“ ist unterstrichen, weil der Link selbst noch unterstrichen ist. Der Text steckt in einem verschachtelten a und span. Dem span sagst Du, es soll nicht unterstrichen sein, dem Link aber sagst Du das nicht. Es muss auch a:hover text-decoration:none bekommen.

Das hat dann allerdings auch zur Folge, dass der Text „unterstrichen“ nicht mehr unterstrichen ist.

Also solltest Du vermutlich dem Link generell kein underline mitgeben und dem Text, der doch unterstrichen sein soll, ein eigenes span verpassen - also genau umgekehrt.

Grüße,
-Efchen

#13

Hi Efchen,

danke für Deine Antwort. Hmm, kannst Du den entsprechenden Script posten?

PS: Ich habe ganz vergessen, das ich am Anfang in den Quirksmodus schalte, also

ausführe. Das hat zur Folge, das der Text im FF nicht mehr unterstrichen ist. Beim IE zwar auch nicht. Aber die rot gestrichelte Linie ist nun verschwunden. Bei Google Chrome schließlich, erscheint zwar die rot gestrichelte Linie. Aber der Hinweistext ist auch wieder unterstrichen!

Bin langsam am verzweifeln …

Also solltest Du vermutlich dem Link generell kein underline
mitgeben und dem Text, der doch unterstrichen sein soll, ein
eigenes span verpassen - also genau umgekehrt.

Grüße,
-Efchen

#14

Moin moin,

Ich muss mal was dazu sagen.

  1. Auch bei neuen Fragen , solltest du das Beispiel was du nun überabreitet hast, vollständig Posten.

  2. Hat dir Efchen alle Fehler genannt. Solange Du das alles ignoriest bringt keine weitere Hilfe etwas.

  3. In deinem Beispiel und Erklärung immer Kopie Paste, was und worum es gerade geht . Wenn du einen bestimmten Teil meinst muss du das auch Dokumentieren.

  4. Keiner sieht durch deine Augen , keiner sieht in dein Kopf, keiner sieht dein bildschirm und schliesslich weiss dann auch keiner worüber du redest wenn du gerade was siehst aber nicht sagst was du siehst.

  5. Etwas mehr mühe geben , so arbeitest du gegen den Helfenden . Ist nicht gerade nett und man wird dich dann auch irgentwann anfangen zu ignorieren.

#15

Bin langsam am verzweifeln …

Ich auch etwas. Mehr als das, was ich bisher genannt habe, kann ich auch nicht dazu sagen. Ich bekomme aber das Gefühl, dass Du nicht immer alles umsetzt. Möglicherweise weil Du irgendwas nicht verstehst. Aber das kann ich nicht wissen. Weder weiß ich, was Du nicht verstehst (wenn Du nicht fragst) noch weiß ich, was Du probierst, und ich kriege es auch nicht mit, wenn Du eine Lösung ignorierst (vielleicht auch nur, weil Du sie übersehen hast).

Vielleicht wäre jetzt der richtige Zeitpunkt, einen Link zur Seite zu posten, damit wir sehen, was Du von den Tipps und Lösungen umgesetzt hast und was nicht.

Weil eigentlich ist das Thema nämlich nicht allzu schwer, aber wenn es konfus vorgetragen wird und man nicht zwangsläufig vom selben Code spricht, dann kann es sehr chaotisch werden.

Liebe Grüße,
-Efchen

#16

Hi,

PS: Ich habe ganz vergessen, das ich am Anfang in den
Quirksmodus schalte

warum? Dann musst Du zwangsläufig mit unterschiedlichen Darstellungen leben und diese können sich bei jeder neuen Browserversion ändern.

Gruß
Ingo

#17

Jau, danke für Eure Hilfe. Werde mal ein bisschen experimentieren und versuchen, Eure Ratschläge mit umzusetzen.

PS: Ich habe ganz vergessen, das ich am Anfang in den
Quirksmodus schalte

warum? Dann musst Du zwangsläufig mit unterschiedlichen
Darstellungen leben und diese können sich bei jeder neuen
Browserversion ändern.