Flexbox Items verlinken ohne das Design zu zerstören

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

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Hallo zusammen,

ich habe vor kurzem eine Bildergalerie die als "Buttons" dienen soll gebaut dazu habe ich flex-container verwendet. Es sollen immer vier Bilder nebeneinander angezeigt werden mit einer Unterschrift, das funktioniert auch super, jedoch möchte ich einen Link hinzufügen zu jedem einzelnen item, zerschiesst es mir das Design/Aussehen meines containers, Hat jemadn von euch eine Lösung?

Html:

<div class="flex-container">
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Events">EVENTS</div>
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Weihnachten">WEIHNACHTEN</div>
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Marketing">MARKETING</div>
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Messeeinladung">MESSEEINLADUNG</div>
</div>


CSS:

.flex-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.flex-container > div {

width: 270px;
margin: 10px;
text-align: center;
line-height: 25px;
font-size: 15px;
}



Ich bedanke mich im Voraus!
Grüße
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.017
200
63
17
Ich empfehle dir, die Grundlagen von HTML und CSS sich anzuschauen oder zu wiederholen. Es scheint mir doch so, als wenn da noch Lernbedarf besteht. Ich bin mir sicher, dass du danach verstehen wirst, woran es hier hapert und du nicht mehr auf unsere Hilfe (zumindest bei solchen Fragen) angewiesen bist.
kann man da so als Bibel für Anfänger sehen.

Ich kann aus deinem Code nicht entnehmen, warum die Bilder nun untereinander sind. Ich gehe mal davon aus, dass dein Layout nicht mehr greift, dass du mit folgendem beschrieben hast:
CSS:
.flex-container > div {
  width: 270px;
  margin: 10px;
  text-align: center;
  line-height: 25px;
  font-size: 15px;
}
Hier hast du einen typischen Selector benutzt.
Der > Selektor sagt, dass direkte child-Elemente des Containers mit der Klasse flex-container angesprochen werden sollen, also:
HTML:
<div class="flex-container">
    <div>Flex-Element</div> <-- Das Element -->
    <div>Flex-Element</div> <-- Das Element -->
    <div>Flex-Element</div> <-- Das Element -->
</div>
Wenn du jetzt aber links setzt, wrappst du die Flex-Elemente mit a tags. Ab diesem Zeitpunkt sind nicht mehr die div Elemente die child-Elemente, sondern die a tags. In diesem Falle müsstest du also folgendes schreiben:
CSS:
.flex-container > a {
  width: 270px;
  margin: 10px;
  text-align: center;
  line-height: 25px;
  font-size: 15px;
}
Alles weitere findest du im Link den ich geschickt habe. Falls das jetzt nicht funktioniert, möchte ich erst, dass du die Grundlagen durcharbeitest und dich dann bei weiteren Fragen meldest. Wie gesagt, ich kann nur mit dem arbeiten, was du mir schickst und es ist mir bewusst, dass meine Lösung evtl. nicht funktioniert weil es auch noch andere Gründe gibt.

Viel Glück
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Das Problem habe ich schon selbst behoben, sorry und danke für deine Zeit.
Ich denke manchmal zu kompliziert und vergesse die einfachen Dinge.

Danke
 
Werbung:

Latest posts