InfoIcon in HTML mit Alternative Text

[m900]

Hallo,

ich habe zwei grosse Probleme.

1.) Ich moechte gern und NUR in HTML (also nicht in oder mit CSS!) ein rundes InfoIcon &#9432; erstellen, was ich aber mit einem Alternative Text versehen moechte. Kann ich das mit <span ... > machen? Ich habe es versucht, klappt aber nicht! Alternativ habe ich ein normales <span ...> gebaucht und habe dann die border-Ecken so hinbekommen, dass das auch ein rundes Icon geworden ist. Den Buchstaben "i" fuer Information habe ich auch reinbekommen, auch der Alternative Text hat funktioniert, nur auf der Homepage, wo das dann erscheinen soll, da war alles total verschoben! Klappt also nicht so, wie ich mir das so vorstelle. So soll das InfoIcon im Endeffekt aussehen, aber halt mit einem (laengeren) Alternative Text! &#9432;

2.) Weiterhin brauche ich ausserdem ein ebenfalls rundes Icon, aber mit border: double, also doppelter Borderlinie und auch mit Alternative Text. Meine Vorstellung ist folgende; gebt bitte im Esprit Onlineshop in der Suche oben rechts folgende Art. nr. 17848 ein, das sind Struempfe, und dort seht ihr dann oben rechts die verfuegbaren Farben in runden Icons und mit doppelter Border und Alternative Text. Und genau das brauche ich, ABER halt eben nur in und mit HTML!!! Kein CSS!

Wenn das irgendwie funktioniert, freue ich mich sehr ueber eure Hilfe, ich komme leider nicht weiter. Vielen Dank.

 

[threadi]

Das title-Attribut für solche "Hinweistexte" kann man nahezu jedem Element hinzufügen. Siehe:
http://wiki.selfhtml.org/wiki/HTML/Universalattribute#title
Beachte dazu auch die Hinweise zu den unterschiedlichen Darstellungen in den Browsern.

Das zweite geht denke ich nicht mir reinem HTML. Wieso auch. HTML ist eine Auszeichnungssprache und dient nicht der Gestaltung.

 

[Sailor]

Erstelle dir doch einfach die benötigten Icons als png (mit transparentem Hintergrund) und füge das dann (mit HTML) an der richtigen Stelle ein.
Und... wie @threadi schon anmerkte, nutze im img-Tag die Erweiterung title="Text".

 

[m900]

Das Problem ist, dass ich Sachen wie CSS, img, src etc. dort wo ich das einstellen moechte, leider nicht nutzen kann! Auch div geht nicht! Das ist ja die Schei..e! Ich brauche so ein InfoIcon &#9432; aber mit Text; egal ob nun alt oder title, Hauptsache ich kann dort viel Text reinschreiben, 3 Worte reichen da nicht aus! Wie bereits erwaehnt, habe ich versucht, mir selber ein InfoIcon zu bauen, und habe das dann ausprobiert, was dann so hier aussieht:

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


Leider sieht es dann aber im Endeffekt so leider nicht mehr aus, da alles total verzerrt und verschoben ist!

Wenn es rund nicht geht, nehme ich auch eckig, wenn auch ungern! Ich brauche das runde InfoIcon. Aber wenn das halt mit HTML nicht geht, schade ...

 

[threadi]

Wo soll das denn ausgegeben werden? ebay?

 

[Felixprogram]

Das Problem ist, dass ich Sachen wie CSS, img, src etc. dort wo ich das einstellen moechte, leider nicht nutzen kann! Auch div geht nicht! Das ist ja die Schei..e!

Anstatt aber dann mit solchen Ausweichmethoden zu arbeiten sollte man lieber den Hoster, die Serversoftware wechseln. Oder ist das Teil eines Programms oder eines Projekts für ein Programm, das diese Dinge nicht unterstützt?
Edit: Ups, threadi war schneller beim Fragen
Grüße,
Felixprogram

 

[m900]

Ja, u. a. auch fuer ebay. Und solche Shops unterstuetzen leider kein CSS & Co. Sonst waere alles einfacher. Es gibt aber noch andere Shops, wo leider nur HTML funktioniert!

 

[Sailor]

Sagtest du nicht, du kannst kein CSS nutzen? Was ist denn dieser style="..." in deinem <span...>?
Pures CSS - oder?
Wenn das geht, dann bastel mal an sowas rum - ist zwar auch nicht ideal, aber man kann das vielleicht schön hinfummeln!
<a title="Hier steht jede Menge Text, um eine Beschreibung abzugeben..." style="display: inline-block; border-style: double; border-radius: 50%; width: 24px; height: 24px; padding: 5px; font-size: 1.5rem; text-align: center;">i</a>

 

[basti1012]

Man könnte auch ein bunten Title Text nehmen mit Gelben Hintergrund und so weiter ,mit mouseover und mouseout . Aber ich weiss ja nicht wie weit Ebay da mit spielt

<div id="logo" onmouseover='document.getElementById("da").style.display="blocK";'onmouseout='document.getElementById("da").style.display="none";'     style="width:24px;height:24px;background-color: #808080;border-radius:50%;border:3px double black;color:black;font-size:20px;font-weight:900;text-align:center;cursor:help;"><div id="da" style="display:none;width:100px;height:100px;background:yellow;color:red;font-size:16px;font-color:black;" >hallo das ist der text der lang sein darf</div>i</div>

 

[m900]

Hallo Sailor, ja, du hast recht. <span ...> ist CSS, aber das wird auf Seiten wie ebay und anderen solcher Shops irgendwie akzeptiert. Mit CSS meinte ich eigentlich die "Auslagerei", also .css-Datei etc. Das funktioniert dort leider nicht. Du hast auf solchen Seiten leider nur normales HTML zur Verfuegung.

Zu deinem:

<a title="Hier steht jede Menge Text, um eine Beschreibung abzugeben..." style="display: inline-block; border-style: double; border-radius: 50%; width: 24px; height: 24px; padding: 5px; font-size: 1.5rem; text-align: center;">i</a>

Das habe ich bei mir ausprobiert, sieht in etwa so aus, wie ich es mir vorgestellt habe. Gut die Hintergrundfarbe, aber das bekomme ich noch hin. Nur das "i" steht leider nicht mittig, also zentral im rund. Das ist ja das Problem, was ich habe. Ich hatte das ja schon so weit fertig, mit einfachem HTML, nur das bloede "i" steht nie mittig/ zentral! Mit welchem Befehlt bekommt man das mittig/ zentral? middle? center? I really don´ t know! Das Zentrieren des Buchstaben, das ist das grosse Problem. Auch wenn du ein kleines Icon fuer "neu" baust, das selbe in gruen. Nie steht die Schrift exakt in der Mitte des Blocks, in meinem Fall des runden Kreises! padding? margin? middle? center? Danke dir bis hierhin. Schoenen Tag ...

 

[m900]

Man könnte auch ein bunten Title Text nehmen mit Gelben Hintergrund und so weiter ,mit mouseover und mouseout . Aber ich weiss ja nicht wie weit Ebay da mit spielt

<div id="logo" onmouseover='document.getElementById("da").style.display="blocK";'onmouseout='document.getElementById("da").style.display="none";'     style="width:24px;height:24px;background-color: #808080;border-radius:50%;border:3px double black;color:black;font-size:20px;font-weight:900;text-align:center;cursor:help;"><div id="da" style="display:none;width:100px;height:100px;background:yellow;color:red;font-size:16px;font-color:black;" >hallo das ist der text der lang sein darf</div>i</div>

Hallo Basti1012, naja, das waere ja schon die Edelvariante. Eigentlich, um ganz ehrlich zu sein, soll mein InfoIcon rund mit doppelter Border sein, und wenn man mit der Maus drueberfaehrt, dann oeffnet sich eben das kleine Infofenster, wobei man da ja auch einstellen kann, ob sich das Fenster dann links, rechts, oben, unten oeffnen soll. Auch der standartisierte graue Hintergrund des sich oeffnenden Infofensters finde ich total langweilig. Aber da bin ich zu sehr Anfaenger. Sicher geht das alles, aber ihr seit hier dir Profis, nicht ich. Sonst wuerde ich nicht fragen. :-)

 

[Felixprogram]

Sonst wuerde ich nicht fragen. :)

In deinem letzten Post war garkeine Frage enthalten. Welches Problem hast du denn noch bezüglich der Lösung von Basti?
Grüße,
Felixprogram

 

[basti1012]

Normalerweise ist

vertical-align:midle;

für Horizontale Zentrierung da. Das geht aber bei @Sailor seine Lösung irgendwie nicht so. Du kannst aber

line-height:23px;

nehmen ,damit bekommst du es mittig.

padding-bottom:8px;

Würde auch gehen

Bei meiner Version könntest du natürlich auch noch alles anpassen wie du möchtest, Farben, Größe, Border ,ist ja alles anpassbar. Und heißt es bei Ebay nicht immer, dass man auffallen soll gegenüber anderen. Das wäre doch mal was anderes außer den Standard title="".

EDIT: habe meine Version mal anders gemacht ,die dir vielleicht besser gefällt.

InfoIcon in HTML mit Alternative Text lösung 2

InfoIcon in HTML mit Alternative Text lösung 2 ich habe zwei grosse Probleme. 1.) Ich moechte gern und NUR in HTML (also nicht in oder mit CSS!) ein rundes Info Icon ⓘ erstellen, was ich aber mit einem Alternative-Text versehen möchte. Den Buchstaben "i" fuer Information habe ich auch...

basti1012.bplaced.net

 

[basti1012]

Das benutzt aber Javascript. Fraglich, ob das bei Ebay geht.

Das stimmt wohl.
Aber.

Hallo Sailor, ja, du hast recht. <span ...> ist CSS, aber das wird auf Seiten wie ebay und anderen solcher Shops irgendwie akzeptiert. Mit CSS meinte ich eigentlich die "Auslagerei", also .css-Datei etc. Das funktioniert dort leider nicht. Du hast auf solchen Seiten leider nur normales HTML zur Verfuegung.

Wenn es nur um die Auslagerung geht,könnte es ja klappen.
Das kann uns aber bestimmt der Themen ersteller sagen ,wie weit Ebay da mit spielt.

 

[m900]

Normalerweise ist

vertical-align:midle;

für Horizontale zentrierung da. Das get aber bei @Sailor seine Lösung Irgendwie nicht so. Du kannst aber

line-height:23px;

nehmen ,damit bekommst du es mittig.

padding-bottom:8px;

würde auch gehen

Bei meiner Version könntest du natürlich auch noch alles anpassen wie du möchtest Farben, grösse, Border ,ist ja alles anpassbar.Und heist es bei Ebay nicht immer,das man auffallen soll gegenüber anderen.Das wäre doch mal was anderes auser den Standard title="".

EDIT: habe meine Version mal anders gemacht ,die dir vieleicht besser gefällt.
https://jsfiddle.net/basti1012/wwxefet6/6/

Vielen Dank. Ich komme gerade von der Arbeit. Sorry fuer die verspaetete Antwort. Das probiere ich alles am Wochenende aus, und hoffe, dass ich mein rundes InfoIcon mit "i" in der Mitte (mittig/ zentriert) hinbekomme. Ein weiteres Problem; vor dem runden InfoIcon steht ja noch • Farbe: und danach kommt dann halt das runde InfoIcon mit dem "i" drin und Alternativ-Text. So ist der Plan. Was ich aber auch irgendwie nie hinbekomme, ist, dass das Wort "• Farbe:" und dahinter eben das runde InfoIcon nie buendig hinbekomme! Gerade in ebay! Entweder ist der <span ...> tag weiter unten, oder weiter oben, aber NIE buendig mit dem Wort: • Farbe: ! Ich habe schon alles ausprobiert.

 

[m900]

Wenn nur das Auslagern in eine Datei das Problem ist, könnte man dieses versuchen:
https://jsfiddle.net/Sempervivum/838u1uk0/1/

Ich kenne "Auslagern" vom Dreamweaver, wenn du eine Homepage baust. Also ich habe das so gelernt, dass man dann eine .css-Datei anlegt und dort vieles (nicht alles) auslagert. Muss man aber nicht! Es ist halb uebersichtlicher. Was ebay und Co. angehen, dort funktioniert kein div! Also <div ...>. Das geht dort leider nicht! <span ...> geht und funktioniert. Naja und als normaler Verkaeufer, also kein gewerblicher Verkaeufer gehen auch leider keine Links mehr, selbst _blank nicht! Als gewerblicher Verkaeufer werden Links sicher noch funktionieren. Was ich damit sagen will, ist, es wurde sehr viel gestrichen! Also an Funktionen etc. HTML (Farbe, Groesse etc.) das geht alles noch in ebay, aber sobald du mit HTML etwas mehr machen moechtest, wie ich jetzt mit meinem InfoIcon, tja, dann hast du ein Problem. Es geht, ja, aber gerade was die Ausrichtungen angeht, das ist das grosse Problem, also die Buendigkeit, wenn das "i" im runden Kreis exakt in der Mitte sein soll, oder wenn das runde InfoIcon buendig mit einem Wort davor sein soll. Die Feinheiten eben, und ich stehe nun mal sehr auf Feinheiten ...

 

[m900]

Das benutzt aber Javascript. Fraglich, ob das bei Ebay geht.

Bei ebay geht leider so einiges nicht mehr, z. B. Links. Also wenn du einen Artikel verkaufst, und auf einen anderen weiteren Artikel von dir verweisen moechtest, was machst du da? <a href ...>, klar, du nimmst einen Link, wo Kaufinteressenten draufklicken, um deine weiteren Artikel sehen koennen. Das wurde letztes Jahr leider abgeschafft! Bei gewerblichen Verkaeufern mit eigenem Shop bin ich nicht sicher; da wird es sicher noch funktionieren, da die dann Links zu Ihrem eigenen Onlineshop, ausserhalb von ebay, legen koennen. Privat geht nicht mehr! ebay hat sowieso total nachgelassen.

 

[m900]

Normalerweise ist

vertical-align:midle;

für Horizontale zentrierung da. Das get aber bei @Sailor seine Lösung Irgendwie nicht so. Du kannst aber

line-height:23px;

nehmen ,damit bekommst du es mittig.

padding-bottom:8px;

würde auch gehen

Bei meiner Version könntest du natürlich auch noch alles anpassen wie du möchtest Farben, grösse, Border ,ist ja alles anpassbar.Und heist es bei Ebay nicht immer,das man auffallen soll gegenüber anderen.Das wäre doch mal was anderes auser den Standard title="".

EDIT: habe meine Version mal anders gemacht ,die dir vieleicht besser gefällt.
https://jsfiddle.net/basti1012/wwxefet6/6/

Danke fuer deine Loesungen. Ich komme gerade von Arbeit und habe mich sehr ueber deine Tipps hier gefreut. Am Wochenende probiere ich das alles mal aus und hoffe, dass es irgendwie klappt.

 

[m900]

In deinem letzten Post war garkeine Frage enthalten. Welches Problem hast du denn noch bezüglich der Lösung von Basti?
Grüße,
Felixprogram

Oh, sorry, war keine Absicht.

 

[m900]

Normalerweise ist

vertical-align:midle;

für Horizontale zentrierung da. Das get aber bei @Sailor seine Lösung Irgendwie nicht so. Du kannst aber

line-height:23px;

nehmen ,damit bekommst du es mittig.

padding-bottom:8px;

würde auch gehen

Bei meiner Version könntest du natürlich auch noch alles anpassen wie du möchtest Farben, grösse, Border ,ist ja alles anpassbar.Und heist es bei Ebay nicht immer,das man auffallen soll gegenüber anderen.Das wäre doch mal was anderes auser den Standard title="".

EDIT: habe meine Version mal anders gemacht ,die dir vieleicht besser gefällt.
https://jsfiddle.net/basti1012/wwxefet6/6/

Das sieht doch schon super aus. Ist dir aber aufgefallen, dass wenn du mit der Maus auf das InfoIcon faehrst, dass dann das "i" darin aus dem Rund verschwindet, und irgendwo ganz weit unten erscheint?? Das InfoIcon soll so bleiben wie es ist; rund/ grauer background/ doppelte duenne border/ weisses fettes "i". Daran soll sich beim Darueberfahren nichts aendern. Warum verschwindet das "i" darin immer, wenn man darueber faehrt? Aber ob das auch in ebay funzt, I don´ t think so, I´ m no sure, I have 2 try it @ the weekend ...