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

Flexbox Items verlinken ohne das Design zu zerstören

Prgrmmrgrl

Neues Mitglied
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
 
Werbung:
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
 
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:
Zurück
Oben