<button> je nach Browser unterschiedlich groß

Stewa88 · 1. August 2022

Hallo zusammen,

am rechten Rand meiner Seite habe ich "LINKS" positioniert. Diese Links bestehen aus einem Bild mit einem Text darunter. Wenn man mit der Maus drüber fährt "leuchtet" das Ganze. Verwirklicht habe ich das ganze mit dem <button> Tag.

Wenn ich mir die Seite am Handy (oder in einem sehr kleinen Browser) ansehe, sind diese Buttons leider unterschiedlich groß. Ich vermute das hängt mir der unterschiedlichen Größe der Bilder in dem Button zusammen. Jemand eine Idee, wie man dafür sorgt, dass die Buttons (also diese rechteckigen Kästen) immer gleich groß angezeigt werden? Oder habe ich etwas falsch gemacht?

Link zur Seite: https://t1p.de/j6tt2

drmenzelit · 1. August 2022

So, als erstes, es ist semantisch nicht korrekt buttons und links zu vermischen (https://www.a11y-101.com/design/button-vs-link). Du kannst ein Link mit CSS so definieren, dass es wie ein Button aussieht. Ich würde mit display: flex oder display: grid arbeiten.

Stef · 1. August 2022

Hallo, bei mir sieht alles gleich gross oder ich habe die Frage nicht richtig verstanden.

drmenzelit · 1. August 2022

Nein, sie sind nicht gleich breit

Elwood · 1. August 2022

Ist das erste Mal bei >370px:

Stef · 1. August 2022

Ach ja, auf ein schmales Mobile ist es ok, grösser aber nicht.

christine2 · 1. August 2022

Hallo Stef,

Nö, schau mal:

dann gibt es hier:

diese paddings. Tue ich diese weg, würde es passen. Aber: Hat Auswirkungen auf andere Elemente.

Daher siehe drmenzelit Infos.

Liebe Grüße

Christine

Edit sagt: Zu spät, hab verschlafen, da mit F12 unterwegs etc. war.

Stewa88 · 2. August 2022

Zitat von drmenzelit

So, als erstes, es ist semantisch nicht korrekt buttons und links zu vermischen (https://www.a11y-101.com/design/button-vs-link). Du kannst ein Link mit CSS so definieren, dass es wie ein Button aussieht. Ich würde mit display: flex oder display: grid arbeiten.

Vielen Dank für den Tipp! Da ich leider kein Experte im "coden" mit CSS bin: Finde ich dazu irgendwo eine Vorlage, wie sich das realisieren lässt?