InfoIcon in HTML mit Alternative Text
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 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.
2.) Weiterhin brauche ich außerdem ein ebenfalls rundes Icon, aber mit border: double, also doppelter Borderline und auch mit Alternative Text. ABER halt eben nur in und mit HTML!!! Kein CSS!
Wenn das irgendwie funktioniert, freue ich mich sehr über eure Hilfe, ich komme leider nicht weiter. Vielen Dank.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
span{
display:inline-block;
width:25px;
height:25px;
background:grey;
border-radius:50%;
border:2px solid black;
cursor:pointer;
}
span:before{
margin-top:-7px;
margin-left:-7px;
content:'';
display:inline-block;
width:35px;
height:35px;
border-radius:50%;
border:2px solid black;
}
i{
display:none;
}
span:hover>i{
conntent:'';
display:block;
width:200px;
height:auto;
background:#CFB57C;
border:2px solid #cfb9aa;
box-shadow:5px 5px 15px black;
}
p{
font-size:18px;
font-weight:600;
margin-bottom:-2px;
margin-top:-1px;
text-align:center;
text-decoration:underline;
}
</style>
<span id="icon"><i><p>Titelbeschreibung</p>Diesen Artikel gibt es in blau,gelb und in Natur rot gestreift</i></span>