Buttons in Matrixanordnung mit Relativer Größe zum Brwoserfenster.

  • Hallo,

    für ich ist das Thema CSS noch recht neu und ich beschäftige mich gerade sehr intensiv damit.


    Trotzdem komme ich bei einen Problem gerade nicht weiter:

    Es sollen Buttons in einer Art Matrix angezeigt werden.

    Die Größe der Buttons sollen sich je nach Fenstergröße ändern und zwischen den Buttons sollte ein minimaler Abstand bestehen.


    Das ist zur Zeit mein Ansatz:


    Hat jemand eine Idee?


    Vielen Dank

  • dstar9091: Deine Informationen sind leider mager.


    Ich habe mal ein Beispiel erstellt. Je nach Bildschirmbreite 1, 2, 4, 5 oder 10 Spalten. Oder ist die Webseite nur für eine Seite mit einer bestimmten Bildschirmgröße gedacht? Wenn die 10 Spalten nebeneinander feststehen können die Buttons natürlich auch in der Höhe angepasst werden um das gesamte Fenster auszufüllen.


    Dann müssten aber auch die Beschriftungen der Buttons bekannt sein. Wenn die unterschiedlich lang sind und damit unterschiedlich umbrechen müsste der Quelltext geändert und das CSS angepasst werden.


  • Tut mir leid, aber Pixel für Break-Points sind richtig und zulässig. Das heißt nicht, das die Einheit "em" nicht funktioniert oder gar falsch ist. Beide Einheiten können gleichwertig verwendet werden.


    Zudem habe ich nur ein Beispiel für eine Lösung gegeben, die funktioniert. Damit habe ich andere Lösungen keineswegs ausgeschlossen. Wie zum Beispiel auch aus der Überschrift "Lösung 1:" hervorgeht. Wenn du eine Grid-Lösung hast die genau so funktioniert - gerne her damit. Einfach nur andere Lösungen ohne sachlichen Hintergrund schlecht zu machen finde ich jedenfalls nicht in Ordnung.

  • Tut mir leid, aber Pixel für Break-Points sind richtig und zulässig. Das heißt nicht, das die Einheit "em" nicht funktioniert oder gar falsch ist. Beide Einheiten können gleichwertig verwendet werden.

    Nein. Relevant für Break-Points sind nicht irgendwelche Bildschirmbreiten sondern die Inhalte der Seite - und die bemisst man eben in em, nicht in px.

    Zudem habe ich nur ein Beispiel für eine Lösung gegeben, die funktioniert.

    Ein Fan von fertigen "Lösungen" war ich noch nie - so lernt der OP garnichts.

    Wenn du eine Grid-Lösung hast die genau so funktioniert - gerne her damit.

    Ein kleines Beispiel:

    (das Javascript ist nur dazu da die Buttons zu erzeugen) Damit werden immer so viele Buttons in einer Zeile gezeigt wie eben rein passen wobei die Buttons mindestens 10em breit sein müssen. Ich muss dir allerdings recht geben: was der OP genau will ist nicht so ganz klar, evtl. sollen immer 8 Buttons untereinander stehen? Ist aber auch kein Problem: einfach in section mehrere Blöcke mit je 8 Buttons einfügen, dann werden die gemeinsam verteilt je nach Platzbedarf.

  • Danke für die vielen Antworten. :)

    Konkret suche ich nach einer Möglichkeit eine Matrix aus Buttons zu erzeugen. Es wäre schön diese einfach anpassen zu können.

    Es soll eine Art Lagersystem werden (jeder Button steht für ein Fach).

    Wichtig wäre mir, dass auf jedem Gerät die komplette Matrix auf einer Seite zu sehen ist und die Buttons auf jeder Seite die maximale Breite und Höhe haben.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!