Wie bekomme ich diese Buttons in eine Reihe?
Abend,
ich habe mich gestern noch einiges mit CSS gespielt, habe aber keine gscheite Lösung gefunden um diese Buttons in eine Reihe zu bekommen :/ Die verschieben sich immer Anhand der Textlayout was sich ja mit der Displaygröße verändert.
Hier der Source: https://git.thiemoo.at/Givou/Thiemoo.at
Vielen Dank!
1 Antwort
Für die Anordnung der Elemente könntest du ein Grid verwenden.
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout
Dies setzt eine Markupänderung voraus. Um die Links mit den jeweiligen Texten trotzdem richtig zu assoziieren, gibt es das aria-labelledby-Attribut.
Beispiel (nur auf die wichtigsten Elemente reduziert):
<p id="github-projects">Auf meiner Git-Page ...</p>
<!-- ... -->
<a aria-labelledby="github-projects"><!-- ... --></a>
Zusatz: In deinem Markup und dem CSS sind mir übrigens Fehler aufgefallen.
1) Der p-Tag ist kein void-Element. Er besitzt einen expliziten Start- und einen expliziten Endtag. Anders verhält es sich beim br-Element. Wenn du Zeilenumbrüche im Text erzeugen möchtest, nutze dieses und für Abstände zwischen Elementen am besten CSS (margin, padding).
2) Buttons dürfen nicht in a-Tags geschachtelt werden und dasselbe gilt andersherum genauso. Da ich diesen Fehler nun schon öfter gesehen habe, frage ich mich fast, ob es da schon wieder irgendein miserables Internettutorial gibt, welches so etwas als Lösung vorstellt.
Fasse deine Links so zusammen:
<a class="button" target="_blank" href="https://git.thiemoo.at/Givou">Aufrufen</a>
3) Es gibt kein CSS-Property align.
Wow danke für die Aufschlussreiche Antwort!! Hilft mir echt weiter :) LG