Hallo ich arbeite aus Spaß an einer Website und habe mich die tage mit CSS auseinander gesetzt habe auch was schönes zusammen gebastelt jedoch ist ein Problem aufgetaucht wobei ich nicht weiß wie ich es wieder beheben kann Problem folgendes:
Ich habe ein Bild rechts daneben der Name daneben ein kleines YouTube Icon und daneben ein kleines Twitch Icon ich habe auf beiden Icons ein link allerdings funktioniert der link nur bei Twitch das YouTube Icon wird auch angezeigt jedoch hat es keinen link hinterlegt keine Ahnung warum.
Hier ist der HTML Code:
--------------------------------------------------------------------------------------------------------------------------
<div class="teilnehmer-profile">
<div class="item-1"><img src="castcrafter.jpg" width="100" height="100"></div>
<div class="item-2"><span class="name">CastCrafter</span></div>
<div class="item-3"><a href="https://www.youtube.com/c/CastCrafter"> <img src="youtubeicon.jpg" width="30" height="30"> </a></div>
<div class="item-4"><a href="https://www.twitch.tv/castcrafter"> <img src="twitchicon.jpg" width="30" height="30"> </a></div>
</div>
<br>
</br>
------------------------------------------------------------------------------------
So sind die CSS codes:
------------------------------------------------------------------------------------
.teilnehmer-profile {
display: grid;
grid-template-columns: 100px 140px 0px 100px;
grid-auto-rows: minmax(80px, auto);
grid-template-rows: 100px;
grid-auto-rows: 100px;
grid-auto-flow: column;
grid-auto-columns: 200px;
justify-content: center;
grid-template-areas:
"bild name youtube twitch";
}
span.name {
font-size: 1,5em;
font-family: sArial,'Arial Unicode MS',Helvetica,Sans-Serif;;
text-shadow: -1px 1px 20px black;
}
.item-1 {
grid-area: bild;
}
.item-2 {
grid-area: name;
}
.item-3 {
grid-area: youtube;
}
.item-4 {
grid-area: twitch;
}
Ich danke schonmal im Voraus und bedanke mich ebenfalls für allgemeine Code Verbesserungen da ich die Website für die schule mache (Informatik) und in dem Thema relativ neu bin.
LG Benji & Danke