Hallo,
ich möchte in meinem Onlineshop mehrere Fotos/Bilder anzeigen, die alle jeweils mit einem Button versehen sein sollen. Auf dem Smartphone können diese untereinander sein, kein Problem. Aber auf Screens sollten die Bilder nebeneinander sein. Leider werden die aber untereinander angeordnet und ich krieg's einfach nicht hin - ich habe vor 10 Jahren mal einigermaßen html & css gekonnt, heute klappt das nicht mehr so gut.
Hat jemand einen Tipp?
ich möchte in meinem Onlineshop mehrere Fotos/Bilder anzeigen, die alle jeweils mit einem Button versehen sein sollen. Auf dem Smartphone können diese untereinander sein, kein Problem. Aber auf Screens sollten die Bilder nebeneinander sein. Leider werden die aber untereinander angeordnet und ich krieg's einfach nicht hin - ich habe vor 10 Jahren mal einigermaßen html & css gekonnt, heute klappt das nicht mehr so gut.
Hat jemand einen Tipp?
CSS:
/* Container holding the image and the text */
.nav_container {
position: relative;
text-align: center;
}
/* Navigations Button */
.nav_button {
background-color:#141414;
border:1px solid #ffffaf;
color:#fff000;
font-family:Armata;
font-size:12px;
padding:10px 10px;
text-decoration:none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav_button:hover {
background-color:#fff000;
color: #141414;
}
HTML:
<div class="nav_container">
<img src="bild1" width="33%">
<div class="nav_button">Button 1</div>
</div>
<div class="nav_container">
<img src="bild2" width="33%">
<div class="nav_button">Button 2</div>
</div>
<div class="nav_container">
<img src="bild3" width="33%">
<div class="nav_button">Button 3</div>
</div>