• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

InfoIcon in HTML mit Alternative Text

Ist eigentlich nicht schwer

Habe alles rausgenommen was du eigentlich nicht brauchst . Notfalls änder’ ich es noch mal.
Beim ersten span kannst du die Position einstellen mit Top und Left,Beim 2 ten span kannst du mit Top und Left die Position des mittel Rings einstellen, falls er nicht mittig sein sollte.
Wichtig ist auch das der 2 span kleiner ist als der erste, damit der außen Ring entsteht.
Ja und den Rest kennst du ja.
Meld dich fals noch Änderungen notwendig sind.
 
Zuletzt bearbeitet:
Werbung:
Ist eigentlich nicht schwer https://jsfiddle.net/basti1012/7w6wv5xt/7/
Habe alles raus genommen was du eigentlich nicht brauchst .Notfalls änder ich es noch mal.
Beim ersten span kannst du die Position einstellen mit Top und Left,Beim 2 ten span kannst du mit Top und Left die Position des mittel Rings einstellen,falls er nicht mittig sein sollte.
Wichtig ist auch das der 2 span kleiner ist als der erste,damit der ausen Ring entsteht.
Ja und den rest kennst du ja.
Meld dich fals noch änderungen notwendig sind.


Basti, weiter oben hier im topic hattest du gesagt, dass so ein FarbIcon rechteckig mit doppelter border einfacher waere. Meine Frage an dich; wie wuerde da der code dazu aussehen, so dass zwischen den beiden borderlines der Hintergrund immer weiss ist? Ich bastele sehr viel herum, und moechte durch genau solche Sachen mich besser in HTML vertiefen, soll heissen, was bedeutet der tag, und was bedeutet dieser. Ich stehe da ganz am Anfang. Dennoch macht es irre viel Spass.
 
Werbung:
Ja ich glaube er meinte das hier

. Weil da habe ich nur ein span ,mit den Doppel border Effekt den er haben wollte. Das hatte ich mit outline gemacht. Das geht ja nur bei eckigen Formen und nicht bei runden. Da diese Variante nicht bei runden geht ,hatte ich es mit 2 spans gemacht.
@m900,zu deiner Frage, ob es zwischen den Border immer weiß ist .
Jein .Er nimmt nicht die Farbe des Icons an ,die Farbe dazwischen ist immer die Farbe, die dein Hintergrund hat.In der Fiddle habe ich den Hintergrund grün gemacht mit dem roten Icon. Wie du siehst, ist zwischen den Bordern auch Grün. Ich gehe mal davon aus das bei dir in Ebay der Hintergrund weiß ist und somit ist zwischen den Lienen auch weiß. Fals nicht must du wieder auf der 2 <span> Variante umsteigen,da kannst du de Farben selber wählen. Zur Information du kannst die Borderfarbe auch ändern, wenn nötig. Aber glaube das wolltest du ja auch nicht .
Na gut kuck mal und meld dich
 
Zuletzt bearbeitet:
Ja ich glaube er meinte das hier https://jsfiddle.net/basti1012/7w6wv5xt/8/ .Weil da habe ich nur ein span ,mit den doppel border effekt den er haben wollte.Das hatte ich mit outline gemacht.Das geht ja nur bei eckigen Formen und nicht bei runden.Da dese Variante nicht bei runden geht ,hatte ich es mit 2 spans gemacht.
@m900,zu deine Frage ob es zwischen den Border immer weiß ist .
Jein .Er nimmt nicht die Farbe des Icons an ,die Farbe dazwischen ist immer die Farbe die dein Hintergrund hat.In der Fiddle habe ich den Hintergrund grün gemacht mit den Roten Icon.Wie du siehst ist zwischen den Bordern auch Grün. Ich gehe mal davon aus das bei dir in Ebay der Hintergrund weiß ist und somit ist zwischen den Lienen auch weiß. Fals nicht must du wieder auf der 2 <span> Variante umsteigen,da kannst du de Farben selber wählen.Zur Info du kannst die Borderfarbe auch ändern wenn nötig.Aber glaube das wolltest du ja auch nicht .
Nagut kuck mal und meld dich


OK, danke. Wie ist dann der Code fuer ebay? Also hier https://jsfiddle.net/basti1012/7w6wv5xt/8/ ist ja nur der Style mit <div ...>, das funktioniert ja leider nicht in ebay. Aber so soll es aussehen, genauso. Die runden Icons funktionieren jetzt alle prima. Danke.
 
du kannst die <div> einfach mit <span> aus tauschen. Das hat bei diesen Code keine Negative auswirkung.
Aber schön das zumindest die Runden Icons jetzt funktionieren.
 
Werbung:
du kannst die <div> einfach mit <span> aus tauschen. Das hat bei diesen Code keine Negative auswirkung.
Aber schön das zumindest die Runden Icons jetzt funktionieren.


Ich habe noch eine Frage zur Ausrichtung. Wie ich gerade feststelle, ist das eines der groessten Probleme, also die Ausrichtung (horizontal, vertikal). Ich habe folgendes in ebay eingegeben:

• Text davor: <span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text";<font color="#000000" face="verdana" size="1">box 01</span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text";<font color="#000000" face="verdana" size="1">box 02</span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text";<font color="#000000" face="verdana" size="1">box 03</span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text";<font color="#000000" face="verdana" size="1">box 04</span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text";<font color="#000000" face="verdana" size="1">box 05</span>&nbsp;<sup>2)</sup><br><br>

Es ist aber so, dass IMMER die 2. Box, also wie in diesem Beispiel, IMMER die 2. Box aus der Reihe tanzt!!! Soll heissen, die 2. Box ist immer hoeher als der Rest, ausserdem ist die Schrift in dieser Box, also "box02" immer anders, groesser, anders eben!!! So, da dachte ich mir, ich loesche diese mal komplett rauss, so dass dann quasi die "box03" an die Stelle der 2. Box rueckt, oder anders ausgedrueckt, es nur noch insgesamt 4 Boxen sind, dann ist ja quasi die "box03" die neue "box02". ABER auch das funktioniert nicht!!! Denn, wie bereits erwaehnt, tanzt jedes Mal die 2. Box aus der Reihe, was die Ausrichtungen angeht!!! Sie ist immer hoeher als alle anderen, und das, obwohl es immer der gleiche Code ist (kopiert, nicht jedes Mal per Hand geschrieben!!!). Alle Code der fuenf Boxen sind exakt identisch. Was sich aendert, ist der title, und box01 heisst nicht box01 usw., sondern das sind dann andere Namen mit unterschiedlichen Laengen. Deshalb auch width: 100px;, da ich es sehr gern symmetrisch mag. width: auto; waere nichts fuer mich, sieht bloed aus!!! Kannst du oder jemand mir erklaeren, woran das liegen kann?

So sieht alles sehr gut aus, nur die bloede 2. Box tanzt IMMER aus der Reihe!!! Woran liegt das???
 
du kannst die <div> einfach mit <span> aus tauschen. Das hat bei diesen Code keine Negative auswirkung.
Aber schön das zumindest die Runden Icons jetzt funktionieren.

Bei mir wir da garnichts angezeigt, wenn ich laut https://jsfiddle.net/basti1012/7w6wv5xt/8/ nur links den HTML-tag:
<span style="position:absolute;top:10px;left:10px;width:20px;height:20px;background:red;border:1px solid black;outline: 1px solid black;outline-offset:2px;display: inline-flex; align-items: center; justify-content: center;"><i style="font-weight:900;">i</i></span> eingebe.
 
Das liegt wahrscheinlich an dein Code
Probier mal das
Code:
<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 01</font></span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 02</font></span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 03</font></span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 04</font></span>&nbsp;

<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 05</font></span>&nbsp;<sup>2)</sup><br><br>
Wenn das nicht geht weiß ich auch nicht
 
Werbung:
Bei mir wir da garnichts angezeigt, wenn ich laut https://jsfiddle.net/basti1012/7w6wv5xt/8/ nur links den HTML-tag:
<span style="position:absolute;top:10px;left:10px;width:20px;height:20px;background:red;border:1px solid black;outline: 1px solid black;outline-offset:2px;display: inline-flex; align-items: center; justify-content: center;"><i style="font-weight:900;">i</i></span> eingebe.
He was? Wo gibst du das den ein? Du siehst doch fiddle geht doch
hier hast du fiddle von mein vorherigen #post



EDIT: Mir fällt aber noch auf ,wenn du jetzt einen Text eingibst der 2-zeilig wird ,wird die Box auch verschoben. Das müsste man dann wieder anders klären. Nur die Box ist so klein, das passt ja nix 2-zeiliges rein. Wie sieht den aus, bleibt es bei einer Zeile oder brauchst du 2 Zeilen?
 
Zuletzt bearbeitet:
he was ? Wo gibst du das den ein? Du siehst doch fiddle geht doch
hier hast du fiddle von mein vorherigen #post
https://jsfiddle.net/basti1012/au13x0eg/1/


EDIT: Mir fällt aber noch auf ,wenn du jetzt einen Text eingibst der 2 Zeilig wird ,wird die Box auch verschoben.Das müsste man dann wieder anders klären.Nur die Box ist so klein das passt ja nx 2 Zeiliges rein.Wie siehts den aus,bleibt es bei einer Zeile oder brauchst du 2 Zeilen ?


Nee, daran liegt es nicht. OK, es sind bei Weitem mehr als 2.000 Zeichen, also im title, aber bei der 1., der 3., der 4. und der 5. Box steht auch super viel Infotext drin, also jedes Mal im title, nicht der Boxname, wie box01 etc., aber bei den vier Boxen funktioniert es, sie sind schoen symmetrisch, NUR die bloede 2. Box tanzt jedes Mal aus der Reihe; in der Ausrichtung und von der Schrift, also die Schrift aendert sich, aber eben NUR in dieser 2. Box. Loesche ich sie komplett, tritt automatisch box03 an ihre Stelle, selbes Problem!!!
 
Das liegt wahrscheinlich an dein Code
Probier mal das
Code:
<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 01</font></span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 02</font></span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 03</font></span>&nbsp;<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 04</font></span>&nbsp;

<span style="background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; height: 20px; width: 100px; text-align: center; border-color: black; border-radius: 2px; border-style: solid; border-width: 1px; font-weight: normal;" title="text"><font color="#000000" face="verdana" size="1">box 05</font></span>&nbsp;<sup>2)</sup><br><br>
Wenn das nicht geht weiß ich auch nicht
 
Werbung:


Ja, es geht. Ich hatte den Fehler beim title und habe das auch verstanden. Ein Zeichenproblem! Ich hatte mich schon gewundert, da eine Klammer gefehlt hat. Naemlich diese hier > . Super, funzt. Danke dir.
 
he was ? Wo gibst du das den ein? Du siehst doch fiddle geht doch
hier hast du fiddle von mein vorherigen #post
https://jsfiddle.net/basti1012/au13x0eg/1/


EDIT: Mir fällt aber noch auf ,wenn du jetzt einen Text eingibst der 2 Zeilig wird ,wird die Box auch verschoben.Das müsste man dann wieder anders klären.Nur die Box ist so klein das passt ja nx 2 Zeiliges rein.Wie siehts den aus,bleibt es bei einer Zeile oder brauchst du 2 Zeilen ?

Wo muss ich das hier
body{
background:green;
}
platzieren? Denk dran, wir sind in ebay, nicht im Dreamweaver!

Hhm, es wird angezeigt, aber irgendwo ganz oben. Das habe ich jetzt erst bemerkt. Also ist dieses FarbIcon nicht flexibel?

Im Prinzip soll es genauso platziert werden wie die Boxen;

• Text davor: FarbIcon
 
Ähmmm, mal dumm gefragt: es geht hier um eine eBay-Seite, also um eine kommerzielle Angelegenheit. Da kein privater Verkäufer soviel Aufwand rein stecken würde, dürfte das ja klar sein. Jetzt stellt sich mir die Frage, warum du das hier nicht in der Jobbörse des Forums postest, denn es ist ja nur fair, wenn die Hilfe auch entsprechend bezahlt wird. Und wenn ich sehe, dass wir hier schon bei Posting Nr. 82 sind, wäre das in meinen Augen nur fair, wenn du damit verdienst, andere für ihre Hilfe ebenfalls zu entlohnen.
 
Werbung:
@m900 Du hast jetzt 3 mal hintereinander was verschiedenes geschrieben. Kannst du mir jetzt nochmal in einer kurzen erklärung erklären was du jetzt noch brauchst ?

wozu brauchst du das ?
Code:
body{
background:green;
}
Das wahr in meiner Fiddle nur zur Demo weil der Fiddle Hintergrund ja weiß ist.Oder soll dein Icon grün sein?
Wenn ja dann
Code:
background:green;
am Anfang von style=" rein schreiben.
Was meinst du mit plazieren?
Die anderen hatten eben auch keine positions Angaben.
Aber wenn du welche brauchst dann
Code:
position:absolute;top:5px;left:5px;
Am anfang von style=" Rein kopieren.

Dein Problem mit der 2ten Box hat sich jetzt erledigt? Habe ich das richtig verstanden?
 
Wo muss ich das hier
body{
background:green;
}
platzieren? Denk dran, wir sind in ebay, nicht im Dreamweaver!
Ähmmm, mal dumm gefragt: es geht hier um eine eBay-Seite, also um eine kommerzielle Angelegenheit. Da kein privater Verkäufer soviel Aufwand rein stecken würde, dürfte das ja klar sein. Jetzt stellt sich mir die Frage, warum du das hier nicht in der Jobbörse des Forums postest, denn es ist ja nur fair, wenn die Hilfe auch entsprechend bezahlt wird. Und wenn ich sehe, dass wir hier schon bei Posting Nr. 82 sind, wäre das in meinen Augen nur fair, wenn du damit verdienst, andere für ihre Hilfe ebenfalls zu entlohnen.


Tut mir leid, ich frage so etwas hier nicht nochmal. Ich komme irgendwie alleine zurecht. Nur dachte ich halt, das Foren dazu da sind, wenn man nicht weiter kommt. Und ja, es sind noch zig Dinge, die ich dringend benoetige, wie zum Beispiel "Weiterlesen ...", also den tag mit dem Anker, und und und, aber wenn das hier solche neg. Reaktionen hervorruft, schade. Was ist dabei, wenn ich das bei ebay so mache? Ich gehoere halt nicht zu der Klientel, die da einfach was an Text "reinschmiert, quasi reinklatscht" - und fertig. Das ist nun mal nicht mein Niveau. Aber gut, ich komme irgendwie alleine klar. Sorry, ich wusste nicht, dass das hier so laeuft!
 
@m900 Du hast jetzt 3 mal hintereinander was verschiedenes geschrieben. Kannst du mir jetzt nochmal in einer kurzen erklärung erklären was du jetzt noch brauchst ?

wozu brauchst du das ?
Code:
body{
background:green;
}
Das wahr in meiner Fiddle nur zur Demo weil der Fiddle Hintergrund ja weiß ist.Oder soll dein Icon grün sein?
Wenn ja dann
Code:
background:green;
am Anfang von style=" rein schreiben.
Was meinst du mit plazieren?
Die anderen hatten eben auch keine positions Angaben.
Aber wenn du welche brauchst dann
Code:
position:absolute;top:5px;left:5px;
Am anfang von style=" Rein kopieren.

Dein Problem mit der 2ten Box hat sich jetzt erledigt? Habe ich das richtig verstanden?


War etwas unverstaendlich beantwortet. Also das FarbIcon erscheint, aber jedes Mal ganz ganz oben links auf der Seite, und da brauche ich es nicht. Es soll halt flexibel sein, genauso wie die Boxen.

Aussehen soll es wie folgt:

• Farbe: FarbIcon (aber ohne Buchstaben, nur mit title und der dementsprechenden Farbe)

Und das soll halt irgendwo in der Mitte der Seite passieren. Dein tag erscheint aber permanent ganz ganz oben links auf der Seite. Womit das zu tun hat, ich weiss es nicht. Ich kenne mich mit HTML (leider) nicht aus.

Aber ich merke schon, dass hier alle sauer auf mich sind. Dafuer entschuldige ich mich in aller Form. Es kommt nicht mehr vor, dass ich hier Fragen zu meinen Problemen mit HTML stellen werde. Irgendwie komme ich alleine klar. Ich dachte halt nur, dass Foren dazu da sind, egal was man und vor allem wo vor hat. Auch in ebay! Naja, danke trotzdem fuer deine Hilfe.

Das mit dem Hintergrund gruen habe ich jetzt kapiert. Es diente nur zur Veranschaulichung. Alles klar. In ebay ist der Hintergrund IMMER weiss.
 
Werbung:
Nur dachte ich halt, das Foren dazu da sind, wenn man nicht weiter kommt.
Das sind sie auch. Aber wenn es um kommerzielle Dinge geht, sollte man das auch im ersten Beitrag erwähnen. Dann ist jedem selbst überlassen, ob er hilft oder nicht. Nur weil die Technik und Foren es ermöglichen, kostenlose Hilfe zu bekommen, ist es in meinen Augen nicht besonders fair, wenn man kostenlose Hilfe in Anspruch nimmt, um dann hinterher damit Geld zu verdienen. Wenn dein Firmenfahrzeug kaputt ist, erwartest du ja auch nicht, dass dir jemand das Auto kostenlos repariert.
 

Hiermit änderst du die Positionen. Damit verschiebst du das ganze Icon der X und Y Achse. Das sollte auch bei Ebay gehen.
Code:
position:absolute;top:100px;left:100px;
Falls nicht teste mal position:relative;

Zu dem anderen:

Ja ein Forum ist für Hilfe da,da hast du vollkommen recht. Die Leute, die hier täglich den Leuten helfen, machen das auch gerne (ich auch).
Es kann sein das einige Leute den Stress auf den anderen Forums mitbekommen haben ( Ich sage mal Stress ). Da wahr einer ,der hatte auch Probleme mit Ebay,der wollte aber die ganze Seite gestylt haben.Der fragt fast jeden Tag nach was anderen . Kannst du da Farbe wechseln, kannst du da Ein Rand herummachen und so weiter und sofort. Da ist einer, der so doof ist und das immer macht. Für die anderen sieht es so aus das der Ebayer den armen Jungen einfach verarschen will, weil er immer wieder das Gleiche will ,( zb Farbe wechseln). Die anderen denken, wenn man zb die Farbe schon 20 mal geändert bekommen hat ,sollte man langsam wissen wie es geht.

Ich will damit eigentlich nur sagen, wenn man dieses Thema von Anfang an liest ,sollte man wissen wie man zb Farbe wechselt oder positions wechsel macht und so weiter.
Am besten ist erst immer selber testen,wenn du wirklich gar nicht weiter weißt, dann kannst du auch fragen,da hat keiner was dagegen.
Also teste jetzt mal den Code und meld dich .

Kleiner Hinweis. Du kannst in der Fiddle Seite den Code auch selber ändern und da testen,das Ergebnis kannst du da sofort sehen,du brauchst nicht jedes mal den Code bei Ebay reinsetzten um zu Testen. Für so kleine Spielereien wie ein Icon erstellen ,ist der Fiddle Editor Ok. Für größere sachen sollte man was anderes nehmen.

Wenn deine Änderungen in der Fiddle deine Wünsche erfüllen,stellst du es bei Ebay rein. Fals bei Ebay was anderes angezeigt wird als wie im Fiddle, dann meldet du dich und sagst Bescheid,dann müssen wir den Fehler wo anders suchen.

So das wahr es. Keine sorge ,ich hab nichts dagegen, wenn du deine Probleme weiter postest ( Notfalls über Pn ). Aber versuche erst was ich dir hier schrieb ,damit man einige Fehler von Anfang an schon ausschließen kann,dann brauch man auch nicht so viel #Postet zu machen.
 
Zuletzt bearbeitet:
Zurück
Oben