Ah, mega, das hilft schonmal extrem.
Jetzt ist aktueller Stand:
#socialfloat {
background-color: #000000;
position: fixed;
color: #ffffff;
border-bottom-right-radius: 0.8vw;
border-top-right-radius: 0.8vw;
top: 40vh;
left: 0vw;
width: 4vw;
height: 20vh;
}
#socialfloat ul {
padding-top: 0;
padding-left: 0.3vw;
padding-bottom: 0;
padding-right: 0;
}
#socialfloat ul li {
list-style-type: none;
padding: 0.8vh;
text-align: left;
text-decoration: none;
}
#facebook {
vertical-align: middle;
width: 2vw;
height: 4vh;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(img/facebook.png)
}
#twitter {
vertical-align: middle;
width: 2vw;
height: 4vh;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(img/twitter.png)
}
#insta {
vertical-align: middle;
width: 2vw;
height: 4vh;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url(img/insta.png)
}
<div id="socialfloat">
<ul>
<li><a href="https://"><div id="facebook"></div></a></li>
<li><a href="https://"><div id="insta"></div></a></li>
<li><a href="https://"><div id="twitter"></div></a></li>
</ul>
</div>
Jetzt habe ich noch das Problem, dass die Buttons vertikal nicht zentral bleiben. Bei Fullscreen sehen sie gut aus bei mir, aber wenn ich die Größe wechsel, dann schiebt es die Buttons unten aus der Box raus.
Gibt's ne Lösung, dass die trotzdem immer vertikal zentral bleiben?
Schöne Grüße