InfoIcon in HTML mit Alternative Text

[m900]

Jetzt verstehe ich nur Bahnhof: Funktioniert es jetzt doch bei Ebay?

Das kannst Du leicht beheben, indem Du display:inline-flex statt display:flex verwendest.

Nee, vergiss es, das geht garnicht, da habe ich nur Gewirr auf der kompletten Seite. Ich bedanke mich bis hierhin und moechte dich nicht laenger damit belaestigen. Vielen Dank trotzdem fuer deine Hilfe, aber es geht nicht! display:inline-flex da habe ich eine ganze Seite voller Gewirr, Buchstaben, Zahlen, Zeichen, dazwischen irgendwo das InfoIcon. In a nutshell; es geht nicht. Sorry ...

 

[basti1012]

Wir helfen gerne.Fragen wir mal andersrum,können wir das irgendwo Online in Action sehen? Kannst du den Icon nehmen den du haben möchtest und den stellst du Online,und uns dann den Link geben ,wo wr das sehen können.

Aber nur wenn du möchtest ,nicht jeder möchte hier Links posten ,was ich auch voll kommen verstehen tue

 

[m900]

Wir helfen gerne.Fragen wir mal andersrum,können wir das irgendwo Online in Action sehen? Kannst du den Icon nehmen den du haben möchtest und den stellst du Online,und uns dann den Link geben ,wo wr das sehen können.

Aber nur wenn du möchtest ,nicht jeder möchte hier Links posten ,was ich auch voll kommen verstehen tue

Nicht boese sein, aber das moechte ich nicht. Aber so langsam komme ich der Sache immer naeher! DENN was in der einen Art. beschreibung ueberhaupt nicht funktioniert hatte, siehe meine Antwort an dich von heute Mittag, funktioniert jetzt aber in einer anderen Art. beschreibung direkt auf ebay wunderbar!!! Komisch !!! Ich probiere jetzt noch ein bisschen, und melde mich nachher nochmal bei dir. <i> ist ja schraeg gestellt, <b> bzw. <strong> steht fuer dick/ fett, aber wie bekomme ich einen Buchstaben sehr duenn?? Gibt es da auch einen tag? Und fuer was steht eigentlich font-weight??? Was genau sagt mir das? Bis nachher ...

 

[basti1012]

Alles mist in Ebay. Gibt es dafür eigentlich nee Bedinungsanleitung ,was für ein Code man benutzen darf?
Einen <tag> fürs dünn schreiben kenne ich nicht ,nur <small> aber damit schreibt man kleiner ,NICHT dünner.

Du bist aber auf den richtigen weg mit font-weight.

Es gibt einmal

• lighter = dünner als im Elternelement
• normal, = normale Strichstärke
• bold = fette schrift

Du kannst aber auch die Werte 100,200,300,400,500,600,700,800,900 dafür einsetzten.
100 gleich super dünn und 900 Fett.
Dünner als 100 geht nur wenn du eine andere Schriftart bei Google fonts raus suchst ,die von sich aus dünner als die normalen sind.
Ansonsten kenne ich keinen weg dünner zu schreiben als das .
Wenn das einer weiss bitte sagen,interesiert mich mal auch .

 

[m900]

Alles mist in Ebay. Gibt es dafür eigentlich nee Bedinungsanleitung ,was für ein Code man benutzen darf?
Einen <tag> fürs dünn schreiben kenne ich nicht ,nur <small> aber damit schreibt man kleiner ,NICHT dünner.

Du bist aber auf den richtigen weg mit font-weight.

Es gibt einmal

• lighter = dünner als im Elternelement
• normal, = normale Strichstärke
• bold = fette schrift

Du kannst aber auch die Werte 100,200,300,400,500,600,700,800,900 dafür einsetzten.
100 gleich super dünn und 900 Fett.
Dünner als 100 geht nur wenn du eine andere Schriftart bei Google fonts raus suchst ,die von sich aus dünner als die normalen sind.
Ansonsten kenne ich keinen weg dünner zu schreiben als das .
Wenn das einer weiss bitte sagen,interesiert mich mal auch .

Alles gut jetzt, es funktioniert!!!

<span style="width: 18px; height: 18px; border: 1px; border-radius: 50%; border-style: solid; display: inline-flex; align-items: center; justify-content: center; background-color: #d3d3d3; font-weight:50;" title="[Hier erscheinen die Details zum angeboteten Artikel!]"><font color="#000000" face="Helvetica Neue Fein"><i>i</i></font></span>

 

[basti1012]

Schön das es jetzt geht
Aber

font-weight:50;

Gibt es meines wissens nicht ,die kleinste Zahl ist 100.Aber bin mir jetzt auch nicht sicher

 

[m900]

Alles gut jetzt, es funktioniert!!!

<span style="width: 18px; height: 18px; border: 1px; border-radius: 50%; border-style: solid; display: inline-flex; align-items: center; justify-content: center; background-color: #d3d3d3; font-weight:50;" title="[Hier erscheinen die Details zum angeboteten Artikel!]"><font color="#000000" face="Helvetica Neue Fein"><i>i</i></font></span>

Wenn ich jetzt noch das runde Icon fuer die Farbe so hinbekomme wie im Esprit Store:

https://www.esprit.de/sale/herren-sale/accessoires/2-paar-socken-mit-streifen-und-uni-17848_NUT

gleich oben rechts sind die kleinen, runden Icons fuer die verfuegbaren Farben. Das ist jetzt quasi das selbe wie mein InfoIcon, nur OHNE "i". Trotz border-style: double; zeigt er das mir aber nicht an. Aber das finde ich schon noch rauss. HTML macht echt irre viel Spass. Danke nochmal fuer deine Hilfe, das InfoIcon ist jetzt exakt so, wie ich es haben wollte. Warum es in der einen Art. beschreibung nun funktioniert, und in einer anderen nicht, ich vermute mal, weil ich es kopiert habe. Das kann manchmal die Ursache sein. Soll heissen, wirklich jedes Mal erneut per Hand eingeben. Ist zwar sehr aufwendig, besonders wenn man extrem viel verkauft, aber es soll ja schliesslich nahezu perfekt aussehen.

 

[m900]

Wenn ich jetzt noch das runde Icon fuer die Farbe so hinbekomme wie im Esprit Store:

https://www.esprit.de/sale/herren-sale/accessoires/2-paar-socken-mit-streifen-und-uni-17848_NUT

gleich oben rechts sind die kleinen, runden Icons fuer die verfuegbaren Farben. Das ist jetzt quasi das selbe wie mein InfoIcon, nur OHNE "i". Trotz border-style: double; zeigt er das mir aber nicht an. Aber das finde ich schon noch rauss. HTML macht echt irre viel Spass. Danke nochmal fuer deine Hilfe, das InfoIcon ist jetzt exakt so, wie ich es haben wollte. Warum es in der einen Art. beschreibung nun funktioniert, und in einer anderen nicht, ich vermute mal, weil ich es kopiert habe. Das kann manchmal die Ursache sein. Soll heissen, wirklich jedes Mal erneut per Hand eingeben. Ist zwar sehr aufwendig, besonders wenn man extrem viel verkauft, aber es soll ja schliesslich nahezu perfekt aussehen.

font-weight: 50; gibt es nicht. Hast recht. 100 - 900, oder dann eben bold, bolder, lighter, normal. Ich habe mich jetzt fuer lighter fuer das InfoIcon entschieden. Das sieht stark aus. Und schraeg natuerlich.

 

[basti1012]

Und hast du das Farb Icon jetzt auch hinbekommen?

 

[m900]

Und hast du das Farb Icon jetzt auch hinbekommen?

Das runde FarbIcon ist ja quasi der selbe Aufbau wie das InfoIcon, nur eben ohne Buchstaben inside. ABER, und das wird dann wohl definitiv nichts werden, es geht hier um die doppelte border, die ich im InfoIcon weggelassen habe. Dort habe ich mich jetzt fuer border: 1px; border-style: solid; entschieden. Sieht dort besser aus. Beim FarbIcon sieht die doppelte border einfach schoener aus. Das Problem ist, ich kann da nicht einfach sagen border-style: double; denn die Farbe, um die es beim verkauften Artikel geht, das ist ja eine Hintergrundfarbe, als Beispiel die Farbe (als Hintergrund) orange. Aber dann ist der komplette Hintergrund orange. Ich moechte das aber exakt so wie im Link, den ich dir geschickt hatte, vom Esprit Onlinestore. Da ist es so, dass in der Mitte die jeweilige Farbe zu sehen ist, und die border, also zwischen den beiden border-Linien ist immer der Hintergrund WEISS!!! Und eben das wird wohl hier nicht funktionieren. Vielleicht bekomme ich das mit einem runden Sonderzeichen hin, dem gebe ich dann die Farbe, stelle das ueber size ein, und passe das dann wieder mittig in den grossen Kreis an. Aber das wird nicht gehen. Auch der Befehl mouse.over funktioniert ja nicht, oder der kleine Pfeil von der Maus, wenn du ueber eine Box etc. faehrst. Ach da gibt es noch so viele Sachen, die mich brennend interessieren. Leider nicht in ebay! Gott sei Dank funktioniert wenigstens <marquee ...> und <span...>. Wenigstens etwas, oder besser als garnichts. Aber was das InfoIcon angeht, bin ich echt super zufrieden. Es ist besser geworden, als es zunaechst aussah. Schoene duenne border-Linie (lighter), schraeggestelltes "i" in der MItte, sieht klasse aus! Haette ich jetzt nicht gedacht. FarbIcon weiss ich jetzt nicht, wie es weitergeht, mal schauen. Dir einen schoenen "tag" :-)

 

[basti1012]

Wenn dein Farb-Icon die Hintergrundfarbe Orange hat ,wird bei( border-style: double; ) zwischen den Lienen auch Orange angezeigt? Aber du möchtest, dass sie aber weiß sind? Ich muss gerade mal selber überlegen, wie man das ändern kann, ohne dass Ebay meckert.

EDIT: Eine Möglichkeit gibt es zwischen den Border double weiß zu kriegen ,aber nur in eckiger Form. Runde Formen gibt es da wohl noch nicht. Zumindest habe ich noch nichts gefunden

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

 

[m900]

Wenn dein Farb-Icon die Hintergrundfarbe Orange hat ,wird bei( border-style: double; ) zwischen den Lienen auch Orange angezeigt? Aber du möchtest das sie aber weiß sind ? Ich muß gerade mal selber überlegen,wie man das ändern kann,ohne das Ebay meckert.

EDIT : Eine möglichkeit gibt es zwischen den Border double weiß zu kriegen ,aber nur in eckiger Form.Runde Formen gibt es da wohl noch nicht.Zumindest habe ich nch nix gefunden

https://jsfiddle.net/basti1012/7w6wv5xt/


EDIT: Du könntest auch 2 <span>'s übereinander legen.Weiss ja nicht ob das bei Ebay geht .Teste doch mal bitte https://jsfiddle.net/basti1012/7w6wv5xt/3/

Also angezeigt wird es, aber es ist viel zu gross?? Und mit position kann man es dann nicht so wie jetzt, Gott sei dank, das runde Icon direkt hinter den Text platzieren, oder geht das? Was das FarbIcon angeht, da koennte ich auch mit einem quadratischem Icon leben, mit zwei border (lighter) und nur die Farbe als Inhalt, wobei halt zwischen den beiden borderlines die Farbe immer weiss sein muss, so wie im Esprit-Link (weiter oben). Rund sieht edler aus, mit border:1px; border-style:double; und font-weight:lighter;

 

[basti1012]

Ich verstehe dein Satzbau gerade irgendwie nicht

Also angezeigt wird es, aber es ist viel zu gross?? Und mit position kann man es dann nicht so wie jetzt, Gott sei dank, das runde Icon direkt hinter den Text platzieren, oder geht das?

Bitte um etwas genauere Erklärung. Positionieren kann man das auch . Die größte hatte ich extra groß gemacht, damit man das besser sehen kann. Man könnte auch mit before und after was machen. nur weiß ich nicht wie man den Befehl ins HTML schreiben kann. Weiß das wer anderes hier ,wie das geht, weil in style=":before{blabla}" geht wohl nicht.

In klein sieht es so aus

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

 

[m900]

Ich verstehe dein Satzbau gerade irgendwie nicht


Bitte um etwas genauere erklärung. positionieren kann man das auch . Die grösse hatte ich extra gross gemacht damit man das besser sehen kann. Man könnte auch mit before und after was machen .nur weiss ich nicht wie man den Befel ins Html schreiben kann.Weiss das wer anderes hier ,wie das geht weil in style=":before{blabla}" geht wohl nicht.

In klein sieht es so aus https://jsfiddle.net/basti1012/7w6wv5xt/4/

Sorry, war meine Schuld. Ich dachte, das bleibt so. Also wie bereits erwaehnt, funktioniert es in ebay. Wusste ich selber auch nicht, dass 2 spans da funktionieren. Nur <div ...> geht nicht. Denn ich habe mal aus Spass den Liveticker aus dem Fernsehen aus n-TV nachgebaut, und das geht leider in ebay nicht! Schade.

 

[basti1012]

Beim Live Ticker wird ja üblicher weise ein Fremd Link mit eingebunden,konnte mir vorstellen das da ebay schon dicht macht.

Aber zu dein Icon ,funktioniert jetzt alles nach deinen wünschen,oder brauchst du noch änderungen?

 

[m900]

Beim Live Ticker wird ja üblicher weise ein Fremd Link mit eingebunden,konnte mir vorstellen das da ebay schon dicht macht.

Aber zu dein Icon ,funktioniert jetzt alles nach deinen wünschen,oder brauchst du noch änderungen?

Zum LiveTicker, also bei meinem Ticker habe ich keinen Link; nur 2 Boxen; in der vorderen steht z. B. "Breaking News", das ist unbeweglich, dann kommt ein Leerzeichen, und dann kommt eine laengere Box, und in der habe ich jetzt via <marquee ...> einen Lauftext. Es geht auch rotate, da gibt es jetzt mehrere Moeglichkeiten. Ich habe ganz aussen <marquee ...> genommen, und innen 2 divs - fertig. Laeuft auch alles super, NUR nicht in ebay! Schade.

Zu meinen Sachen; also das InfoIcon rockt, aber sowas von. Vielen vielen Dank nochmal an dich, aber auch an alle anderen, die mir hier gute Tipps diesbezueglich gegeben haben. Super. Danke. Zum FarbIcon schaue und sammle ich mal, was noch fehlt. Da melde ich mich die Tage nochmal hier. Du sagtest doch gestern, dass das mit der border:double wohl im Quadrat geht?? Also so das in dem Zwischenraum der beiden borderlines immer weiss ist. Da kannst du mir mal den Code schicken. Ich habe da halt das Problem, dass ich zwar die border double habe, sie wird mir auch angezeigt, aber wenn du eine Hintergrundfarbe hast, ist diese Farbe halt ueberall; auch zwischen den beiden borderlines. So, und jetzt kommt Pokal, die Bayern habe ja schon gewonnen, Schoenen Abend fuer dich, fuer alle ...

 

[basti1012]

Was ist denn mit den hier

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

Wo es 2 <spans> wahren ,da ist ja auch weiser Raum zwischen den borders ,ging das nicht? Oder hast du den Beitrag übersehen. Das wäre ja genau das, was du für dein Farb Icon haben wolltest, und sogar in rund.

Das wäre der Eckige in klein mit Doppel border mit Weißen zwischen Raum.

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

 

[m900]

Was ist den mit den hier https://jsfiddle.net/basti1012/7w6wv5xt/6/ wo es 2 <spans> wahren ,da ist ja auch weiser raum zwischen den borders ,ging das nicht ? Oder hast du den Beitrag übersehen. Das währe ja genau das was du für dein Farb Icon haben wolltest,und sogar in rund.

Das währe der Eckige in klein mit Doppel border mit Weissen zwischen Raum.
https://jsfiddle.net/basti1012/7w6wv5xt/5/

Das habe ich aus Versehen uebersehen. Sorry. Nee, das funktioniert, abgesehen von der Groesse. Wenn das hier das FarbIcon werden soll, halt ohne Buchstaben in der Mitte, und viel kleiner, sagen wir max. 25px height und weight, border:1px; font-weight:lighter; Aber allg. funktioniert es in ebay, haette ich jetzt auch nicht gedacht, weil es doch 2 spans sind.

 

[basti1012]

Das font-weight:lighter; kannst du bei den Farb Icon weg lassen ,da du ja kein Buchstaben brauchst.Das wird nur auf schrift angewendet.

 

[m900]

Das font-weight:lighter; kannst du bei den Farb Icon weg lassen ,da du ja kein Buchstaben brauchst.Das wird nur auf schrift angewendet.

Ok, kannst du mir dieses Icon noch kleiner machen, von der Groesse her so gross wie das InfoIcon? Ich blicke da nicht so durch, weil das ja dieses Mal 2 spans sind, mit position usw. Das blicke ich nicht. Danke.