InfoIcon in HTML mit Alternative Text

[basti1012]

Das das "I" daraus verschwindet ist in diesen Fall leider so .Mann kann das aber noch ändern /anpassen wie du möchtest. Kannst du den erstmal testen ob Ebay den Code überhaupt so annimmt.Wenn nein hat das ändern auch kein sinn. Wäre den überhaupt einer von den vorgeschlagenen möglichkeiten was für dich. Wenn du das mit den normalen title="" machen willst und keins von meinen Vorschlägen haben möchtest dann kannst du ja das von @Sailor aus Post #8 nehmen . Egal was,sag einfach wie du es haben willst,und teste wenn möglich bei Ebay den Code,damit wir wissen was bei ebay möglich ist . Ich hatte bei Fiddle ja eine Version mit Verlinkung gemacht.Verlinkungen geht nicht hattest du gesagt ,richtig? Ich lasse mir gleich nochmal was einfallen.

 

[m900]

Das das "I" daraus verschwindet ist in diesen Fall leider so .Mann kann das aber noch ändern /anpassen wie du möchtest. Kannst du den erstmal testen ob Ebay den Code überhaupt so annimmt.Wenn nein hat das ändern auch kein sinn. Wäre den überhaupt einer von den vorgeschlagenen möglichkeiten was für dich. Wenn du das mit den normalen title="" machen willst und keins von meinen Vorschlägen haben möchtest dann kannst du ja das von @Sailor aus Post #8 nehmen . Egal was,sag einfach wie du es haben willst,und teste wenn möglich bei Ebay den Code,damit wir wissen was bei ebay möglich ist . Ich hatte bei Fiddle ja eine Version mit Verlinkung gemacht.Verlinkungen geht nicht hattest du gesagt ,richtig? Ich lasse mir gleich nochmal was einfallen.

Hallo Basti, wenn ich es morgen schaffe, teste ich das gleich mal in ebay und gebe dir/ euch dann hier bescheid. Interessiert mich jetzt selber brennend, ob es ueberhaupt funktioniert. Mein persoenlicher Traum waere das InfoIcon hier: ⓘ fuer die Infobox mit Alternativ-Text beim Herueberscrollen mit der Maus. Also vom Aussehen her. Aber dein Vorschlag gefaellt mir auch sehr gut, geht beides. Etwas einfacher duerfte es werden bei nur Farbe, also ohne Buchstaben drin. Soll heissen, wenn ich das Kreisrund als Farbangabe, z. B. bei einem T-Shirt nehmen moechte. Da hatte ich ja gestern im Esprit Onlineshop etwas angegeben, also so, wie es aussehen soll; kreisrund/ doppelte border und ausgefuellt ist es halt mit der Farbe vom Artikel, den ich verkaufen moechte. Beim herueuberscrollen erscheint als Text der Farbname, quasi exakt so wie bei Esprit. Ich persoenlich finde ja, dass das das Einerlei bei ebay etwas aufhuebscht. Klar reicht es aus, wenn du als Farbe schwarz zum Beispiel hinschreibst. Hhm, aber das macht dort jeder. Wenn aber so ein kleines InfoIcon dort erscheint, sieht es irgendwie freundlicher aus. Wozu gibt es dann HTML & Co., vorausgesetzt es laeuft bei ebay ...

 

[m900]

Das das "I" daraus verschwindet ist in diesen Fall leider so .Mann kann das aber noch ändern /anpassen wie du möchtest. Kannst du den erstmal testen ob Ebay den Code überhaupt so annimmt.Wenn nein hat das ändern auch kein sinn. Wäre den überhaupt einer von den vorgeschlagenen möglichkeiten was für dich. Wenn du das mit den normalen title="" machen willst und keins von meinen Vorschlägen haben möchtest dann kannst du ja das von @Sailor aus Post #8 nehmen . Egal was,sag einfach wie du es haben willst,und teste wenn möglich bei Ebay den Code,damit wir wissen was bei ebay möglich ist . Ich hatte bei Fiddle ja eine Version mit Verlinkung gemacht.Verlinkungen geht nicht hattest du gesagt ,richtig? Ich lasse mir gleich nochmal was einfallen.

Hallo, also deine Sachen laufen in ebay nicht! Habe es eben versucht, dann kommt diese Meldung:

"Wir haben folgende aktive Inhalte in Ihrem Angebot gefunden: Javascript. Um eBay als Marktplatz noch sicherer zu machen, werden ab Juni 2017 alle aktiven Inhalte nicht mehr für Käufer angezeigt."

War klar. ABER <span ...> alleine laeuft ja. Zum Beispiel das hier:

<span style="background-color: #FFA500; color: white; display: inline-block; width: 30px; text-align: center; margin-top: 2px; border-radius: 4px; font-weight: normal;"><font face="Verdana" size="1"><strong>neu</strong></font></span>

Habe ich mal gebastelt. Das Problem bei diesem Teil ist auch die Zentrierung der Schrift in der Mitte der Box, also genau wie bei dem runden InfoIcon. Das "neu" in diesem Fall steht NIE direkt in der Mitte ausgerichtet, genau wie bei dem "i" beim runden InfoIcon. Das aergert mich am allermeisten, da es ja als "einfach" scheinbar laeuft. Mit "einfach" meine ich das hier:

<span title="Text" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;"><font color="#000000">i</font></span>

Das habe ich mal gebaucht, aber leider ist das "i" nie mittig!!! Bekommst du das irgendwie hin?

 

[Sailor]

OK ... noch ein Versuch!

<span title="Text" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;">
<span style="color: #000; position: absolute; margin-top: 0px; margin-left: 0px;">i</span>

</span>

Mit den 'margin-Werten' solltest du in der Lage sein das 'i' pixelgenau zu positionieren.
Es gehen auch negative Werte.

 

[m900]

OK ... noch ein Versuch!

<span title="Text" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;">
<span style="color: #000; position: absolute; margin-top: 0px; margin-left: 0px;">i</span>

</span>

Mit den 'margin-Werten' solltest du in der Lage sein das 'i' pixelgenau zu positionieren.
Es gehen auch negative Werte.

Ah super, versuche ich nachher gleich mal. Mit der border probiere ich dann selber mal aus, das gefaellt mir so noch nicht, da es schon zwei DUENNE symmetrische Borderlinien sein sollen, also border-style: double; Aber das schaffe ich, glaube ich, alleine. Ich melde mich dann nachher nochmal. Schade nur, dass deine Sachen in shops wie ebay & Co. nicht (mehr) laufen. Besonders die mouseover-Geschichten. Das geht dann wohl doch zu weit (fuer ebay). Auch div laeuft leider nicht.

 

[m900]

Ah super, versuche ich nachher gleich mal. Mit der border probiere ich dann selber mal aus, das gefaellt mir so noch nicht, da es schon zwei DUENNE symmetrische Borderlinien sein sollen, also border-style: double; Aber das schaffe ich, glaube ich, alleine. Ich melde mich dann nachher nochmal. Schade nur, dass deine Sachen in shops wie ebay & Co. nicht (mehr) laufen. Besonders die mouseover-Geschichten. Das geht dann wohl doch zu weit (fuer ebay). Auch div laeuft leider nicht.

Also das "i" ist irgendwo rechts oben, aber nicht mittig. Habe es eben mal in ebay getestet. Dafuer stimmt der Rest aber; border schoen symmetrisch und auch der Text stimmt, nur das "i" leider nicht. Wie bekomme ich das exakt mittig??

 

[Sailor]

Kannst du mit Veränderungen an den Werten.
margin-top
margin-left
im inneren <span> das 'i' positionieren?

 

[m900]

Mit diesem CSS:

display: flex;
align-items: center;
justify-content: center;

https://jsfiddle.net/Sempervivum/wd4d2d1r/1/

CSS geht auch nicht. Also, hhm, wie erklaere ich das jetzt; es geht nur einfaches HTML, also ganz unterste Schublade. So mit extra CSS, vergiss es . Du hast dort einen HTML-Block, dort muss alles rein. Ich kann es versuchen, glauche ich aber nicht, dass das funzt ...

Man muesste das HTML und CSS irgendwie auf einen Nenner bringen, also alles in einen span reinbringen.

 

[m900]

Geht nicht, solltest Du erst sagen, nachdem Du es versucht hast. Du kannst das CSS auch inline notieren:
https://jsfiddle.net/Sempervivum/wd4d2d1r/2/

Ich geh kaputt, jetzt gehts!!! Also das "i" ist jetzt schoen mittig. Klar, jetzt noch der alt-Text und die double border, aber so soll es aussehen, wow! Mit dem "Geht nicht ..." hast du natuerlich recht; Ich gebe ziemlich schnell auf, so am I ...

 

[m900]

Ich geh kaputt, jetzt gehts!!! Also das "i" ist jetzt schoen mittig. Klar, jetzt noch der alt-Text und die double border, aber so soll es aussehen, wow! Mit dem "Geht nicht ..." hast du natuerlich recht; Ich gebe ziemlich schnell auf, so am I ...

Jetzt muss ich nur noch aus


<span title="Text" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;">

und


<span style="width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;">
i
</span>

irgendwie eins machen.

 

[m900]

Jetzt muss ich nur noch aus


<span title="Text" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;">

und


<span style="width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;">
i
</span>

irgendwie eins machen.

<span title="Danke :-)" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;">
<span style="width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #808080;">
<strong> i</strong>
</span>

 

[basti1012]

Bin jetzt erst wach geworden .Sorry.Aber schön das es jetzt geht .
Mal ne frage .Oben hast du noch <font>benutzt. Muss das bei ebay sein ?
Weil im aktuellen html5 wird das meines wissens nicht mehr benutzt.

 

[m900]

Bin jetzt erst wach geworden .Sorry.Aber schön das es jetzt geht .
Mal ne frage .Oben hast du noch <font>benutzt. Muss das bei ebay sein ?
Weil im aktuellen html5 wird das meines wissens nicht mehr benutzt.

Das mit dem font muss ich heute Abend mal checken, aber m. E. funktioniert das noch. Wieso, was nimmt man denn heute anstatt font?

Und noch eine Frage an dich;

Kann man diese beiden span irgendwie in ein span machen?

Also so hier in etwa:

<span style="width: 24px; height: 24px; border-radius: 50%; border-style: double; display: flex; align-items: center; justify-content: center; background-color: #808080;" title="Text" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;"<font face="Verdana" size="1"><strong>i</strong></font></span>

Aber sind dann nicht verschiedene Sachen doppelt? So wuerde es funktionieren. Das einzige Problem ist, dass sich jetzt die Schrift, die nach dem InfoIcon erscheint, also der weitere normale Text, komplett veraendert! Und eine ziemlich grosse Luecke nach dem InfoIcon ist jetzt ausserdem entstanden, warum auch immer.

<span title="Text" style="background-color: #808080; color: white; display: inline-block; height: 24px; width: 24px; text-align: center; border-style: double; border-radius: 50%; font-weight: normal;">
<span style="width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #808080;">
<strong> i</strong>
</span>

 

[Gelöschtes Mitglied 36401]

Das mit dem font muss ich heute Abend mal checken, aber m. E. funktioniert das noch.

Es funktionieren noch alle veralteten HTML-Tags, trotzdem sollte man sie nicht mehr benutzen

Wieso, was nimmt man denn heute anstatt font?

CSS, siehe https://www.w3schools.com/

 

[m900]

Es funktionieren noch alle veralteten HTML-Tags, trotzdem sollte man sie nicht mehr benutzen

CSS, siehe https://www.w3schools.com/

Kann man denn die beiden span in ein span zusammenbringen? Geht das?

 

[m900]

Das hängt vom Zusammenhang ab. Eingangs war, glaube ich, die Rede von einem runden Info-Icon, wo beim Hover ein erweiterter Text erscheint? Und was versprichst Du dir davon, die beiden spans zusammenzubringen?

Weil es so nicht funktioniert. Also 2 spans hintereinander.

 

[m900]

Wie soll es denn funktionieren? So wie eingangs beschrieben mit erweitertem Text bei Hover?

Es funktioniert alles, was du geschickt hast, nur in ebay funktioniert es nicht.

 

[m900]

Posting #33 hatte ich so verstanden, dass es auch in Ebay funktioniert?

Ja, das dachte ich auch, geht aber doch nicht. Das wird wohl nichts mit dem Icon, weil du halt extream eingeschraenkt bist in ebay. 0815 sage ich da nur, irgendwann wird es wahrscheinlich mal so wie in quoka; Da schreibst du einen Anzeigentext, so wie du ihn haben moechtest, und quoka kuerzt einfach alles so wie die es fuer richtig halten. Da funktioniert HTML garnicht! Schade.

 

[basti1012]

Ich verstehe jetzt bald nur noch Bahnhof. Was spricht den jetzt gegen dieses hier.

<span style="width: 24px; height: 24px; border-radius: 50%; border-style: double; display: flex; align-items: center; justify-content: center; background-color: #808080;font-weight:900;" title="Text der so lang ist wie du möchtest,da wird sich auch nix dran verschieben" >  i </span>

Hier ist ein <span> drinne,das "i" in der Mitte, und du kannst einen langen Text eingeben.Verschieben sollte sich da auch nix.

 

[m900]

Ich verstehe jetzt bald nur noch Bahnhof. Was spricht den jetzt gegen dieses hier.

<span style="width: 24px; height: 24px; border-radius: 50%; border-style: double; display: flex; align-items: center; justify-content: center; background-color: #808080;font-weight:900;" title="Text der so lang ist wie du möchtest,da wird sich auch nix dran verschieben" >  i </span>

Hier ist ein <span> drinne,das "i" in der Mitte, und du kannst einen langen Text eingeben.Verschieben sollte sich da auch nix.

Also ich habe es eben nochmal getestet. So soll es aussehen - prima. Dennoch ein "aber"; denn es verschiebt sich leider doch.

Stell´ dir folgende Art. beschreibung vor:

- 1 'adidas' T-Shirt <span style="width: 24px; height: 24px; border-radius: 50%; border-style: double; display: flex; align-items: center; justify-content: center; background-color: #808080;font-weight:900;" title="Text der so lang ist wie du möchtest, da wird sich auch nix dran verschieben">i</span><br><br>

Also meine kurze Beschreibung, dann ein Leerzeichen und dann kommt das kleine InfoIcon, ABER es faengt jedes Mal vorne in einer neuen Zeile an und steht nie exakt dahinter, in meinem eben genannten Beispiel quasi hinter T-Shirt, bzw. hinter der einen Leerstelle, verstehst du mich? Es steht jedes Mal am Anfang der neuen Zeile, egal, ob ich ein <br> zwei <br> oder gar kein <br> nehme. Liegt also nicht am <br>! Aber woran liegt es dann bzw. wie bekomme ich es direkt hinter den Text in die selbe Zeile? Sonst ist alles super, wie bereits erwaehnt, aber in der naechsten Zeile bringt mir das nichts! Es muss direkt hinter dem Text stehen. Wenn das jetzt noch machbar waere, dann ist es perfekt.