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

<div> nebeneinander anordnen

c3po

Neues Mitglied
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?

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>
 
Werbung:
Werbung:
Das ist eine Aufgabe von 5 min., wenn du ein Grid einbindest.

Ich habe es jetzt auf dem Monitor nebeneinander hinbekommen. Allerdings ist es jetzt auch auf dem Smartphone nebeneinander. Hier sollte es aber untereinander dargestellt werden. Und die Buttons sind auf dem Smartphone auch falsch positioniert. Ich suche mir lieber jemanden dafür, da ging jetzt schon viel Zeit drauf.

Danke Euch trotzdem für die Hilfe!
 
Du kannst mit den col- Klassen festlegen, wieviel Bilder bei welcher Bildschirmbreite nebeneinander stehen sollen. Bei col-xs-12 sollten sie auf dem Smartphone untereinander angeordnet sein. Dein position: absolute mit top und left musst du natürlich löschen..
 
Werbung:
Zurück
Oben