Flexbox Items verlinken ohne das Design zu zerstören

[Prgrmmrgrl]

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]

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.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

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:

.flex-container > div {
  width: 270px;
  margin: 10px;
  text-align: center;
  line-height: 25px;
  font-size: 15px;
}

Hier hast du einen typischen Selector benutzt.

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Der > Selektor sagt, dass direkte child-Elemente des Containers mit der Klasse flex-container angesprochen werden sollen, also:

<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:

.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]

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