Grid buttons mit veränderten Größen

Huby · #1 (**permalink**) 12.09.2020, 20:23

Hy,

ich versuche gerade so eine art Spiel in html zu erstellen.
Für die Steuerung hab ich ein D-Pad als png erstellt (420x420px) und das in ein div grid als Hintergrund gepackt.
Dieses div hab ich dann mit 9 untergeordneten div's versehen (3x3).
Dann hab ich das D-Pad png in 9 teile geteilt um einen hover effekt zu erzeugen.
Bis hier hin funktioniert auch alles, wenn man feste Pixelwerte für die grids verwendet.

so sieht der Spaß jetzt aus:

------------------
| game (flex 1) |
------------------
| d-pad | buttons |
| flex 2 | flex 3 |
-------------------

Jetzt zum Problem

Ich wollte es umfunktionieren, damit es im portrait und landscape modus funktioniert.
Wenn ich das Smartphone um 90° drehe, verändert sich die Anordnung vom grid (soll auch so sein).

--------------------------
| d-pad | game | buttons |
| flex 2 | flex 1 | flex 3 |
----------------------------

Nun hab ich links und rechts neben dem Spiel nicht mehr genügend Platz um mit festen Pixelgrößen arbeiten zu können.
Darum habe ich die grid container flexibel in der Größe gemacht.
Das D-Pad passt sich jetzt auch der Größe des grids an, leider sind die 9 untergrids des d-pads jetzt nicht mehr passend zum Hintergrundbild (logisch).
Ich suche also nach einer Möglichkeit die Grid-container größe an das verkleinerte d-pad Bild anzupassen um die einzelnen div's wieder mit einem hover ansprechen zu können.
Mit einem zusätzlichen div container in flex 2, wird das d-pad gar nicht mehr angezeigt.

Um die Verwirrung noch zu maximieren, würde ich einfach mal den jetzigen Code posten.

HTML-Code:

<head>
  <meta charset="ISO-8859-1">
  <meta name="viewport" content="user-scalable=no,user-scalable=0"/>

  <style>
 
  .medium {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
}
 
@media only screen and (orientation: landscape) {
    .flex1 { order: 2; width: 60% }
    .flex2 { order: 1; width: 20% }
    .flex3 { order: 3; width: 20% }
    #dpad_container {background-size: 100% auto;}
}

@media only screen and (orientation: portrait) {
    .flex1 { width: 100% }
    .flex2 { width: 50% }
    .flex3 { width: 50% }
    #dpad_container {background-size: 100% auto;}
}  
  </style>
 
  <script type="text/javascript" language="JavaScript">



function changebg (ids, nr, press){
    var fass = document.getElementById(ids);

    if (press === undefined) {
        press = '';
      }

    if (nr > 0){
        fass.style.backgroundImage = "url('" + ids + press + ".png')";
    } else {
        fass.style.backgroundImage = "none";
    }
}

</script>


</head>

<body bgcolor="darkgrey">

  <div align="center">
    <div class="medium">
        <div align="center" class="flex1">GAME</div>
       
          <div align="center" class="flex2" id="dpad_container" style="background-image: url(dpad.png); background-repeat: no-repeat; background-position: 50% 50%;">
            <div class="grid-container" style="display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; width:auto;height:auto;">
                  <div class="grid-item" onmousedown="changebg('dpad_up',1);changebg('dpad_left',1);" onmouseup="changebg('dpad_up',0);changebg('dpad_left',0);" ontouchstart="changebg('dpad_up',1);changebg('dpad_left',1);" ontouchend="changebg('dpad_up',0);changebg('dpad_left',0);"></div>
                  <div id="dpad_up" class="grid-item" onmousedown="changebg('dpad_up',1);" onmouseup="changebg('dpad_up',0);" ontouchstart="changebg('dpad_up',1);" ontouchend="changebg('dpad_up',0);"></div>
                  <div class="grid-item" onmousedown="changebg('dpad_up',1);changebg('dpad_right',1);" onmouseup="changebg('dpad_up',0);changebg('dpad_right',0);" ontouchstart="changebg('dpad_up',1);changebg('dpad_right',1);" ontouchend="changebg('dpad_up',0);changebg('dpad_right',0);"></div>
                  <div id="dpad_left" class="grid-item" onmousedown="changebg('dpad_left',1);" onmouseup="changebg('dpad_left',0);" ontouchstart="changebg('dpad_left',1);" ontouchend="changebg('dpad_left',0);"></div>
                  <div class="grid-item"></div>
                  <div id="dpad_right" class="grid-item" onmousedown="changebg('dpad_right',1);" onmouseup="changebg('dpad_right',0);" ontouchstart="changebg('dpad_right',1);" ontouchend="changebg('dpad_right',0);"></div>
                  <div class="grid-item" onmousedown="changebg('dpad_down',1);changebg('dpad_left',1);" onmouseup="changebg('dpad_down',0);changebg('dpad_left',0);" ontouchstart="changebg('dpad_down',1);changebg('dpad_left',1);" ontouchend="changebg('dpad_down',0);changebg('dpad_left',0);"></div>
                  <div id="dpad_down" class="grid-item" onmousedown="changebg('dpad_down',1);" onmouseup="changebg('dpad_down',0);" ontouchstart="changebg('dpad_down',1);" ontouchend="changebg('dpad_down',0);"></div>
                  <div class="grid-item" onmousedown="changebg('dpad_down',1);changebg('dpad_right',1);" onmouseup="changebg('dpad_down',0);changebg('dpad_right',0);" ontouchstart="changebg('dpad_down',1);changebg('dpad_right',1);" ontouchend="changebg('dpad_down',0);changebg('dpad_right',0);"></div>
            </div>
        </div>

        <div align="center" width="auto" height="auto" class="flex3" id="btn_container">
            <div class="grid-container" style="display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; width:auto;height:auto;">
                  <div class="grid-item" id="enter" style="background-image: url(enter.png); width:140px;height:140px;" onmousedown="changebg('enter',1,'_press');" onmouseup="changebg('enter',1);" ontouchstart="changebg('enter',1,'_press');" ontouchend="changebg('enter',1);"></div>
                  <div class="grid-item" id="btn_gruen" style="background-image: url(btn_gruen.png); width:140px;height:140px;" onmousedown="changebg('btn_gruen',1,'_press');" onmouseup="changebg('btn_gruen',1);" ontouchstart="changebg('btn_guen',1,'_press');" ontouchend="changebg('btn_gruen',1);">A</div>
                  <div class="grid-item" id="esc" style="background-image: url(esc.png); width:140px;height:140px;" onmousedown="changebg('esc',1,'_press');" onmouseup="changebg('esc',1);" ontouchstart="changebg('esc',1,'_press');" ontouchend="changebg('esc',1);"></div>
                  <div class="grid-item" id="btn_rot" style="background-image: url(btn_rot.png); width:140px;height:140px;" onmousedown="changebg('btn_rot',1,'_press');" onmouseup="changebg('btn_rot',1);" ontouchstart="changebg('btn_rot',1,'_press');" ontouchend="changebg('btn_rot',1);">B</div>
                  <div class="grid-item"></div>
                  <div class="grid-item" id="btn_gelb" style="background-image: url(btn_gelb.png); width:140px;height:140px;" onmousedown="changebg('btn_gelb',1,'_press');" onmouseup="changebg('btn_gelb',1);" ontouchstart="changebg('btn_gelb',1,'_press');" ontouchend="changebg('btn_gelb',1);">X</div>
                  <div class="grid-item"></div>
                  <div class="grid-item" id="btn_blau" style="background-image: url(btn_blau.png); width:140px;height:140px;" onmousedown="changebg('btn_blau',1,'_press');" onmouseup="changebg('btn_blau',1);" ontouchstart="changebg('btn_blau',1,'_press');" ontouchend="changebg('btn_blau',1);">Y</div>
                  <div class="grid-item"></div>
            </div>
        </div>
    </div>
  <br><br>



</div>

</body>

Vielleicht blickt ja Jemand durch, oder hat eine bessere Idee.

thx

cloned · #2 (**permalink**) 14.09.2020, 08:42

Ich weiß du hörst das jetzt bestimmt nicht gerne, aber schmeiß den Code weg, der ist doch nicht zu gebrauchen.

Erstens, es gibt im HTML noch mehr Elemente als divs. Ein div ist dazu da um eine Seite zu unterteilen, hat aber keine semantische Bedeutung. Elemente mit semantischer Bedeutung sind zB links, Überschriften, und auch buttons. Dein d-pad sind im Prinzip mehrere Buttons, also verwende auch buttons. Dann hast du auch schon von Haus aus Dinge wie click, touch, etc, darauf.

Auch ist es wirklich nicht nötig dass du onmousedown, onmouseup, etc. definierst. Verwende statt dessen JS Events, dann bist du hier viel unabhängiger und flexibler.

Verwende auch kein einzelnes Bild als HG Bild und teile das dann noch einmal auf, verwende wirklich für jeden Button ein eigenes Bild, egal ob hover zustand oder nicht. Vielleicht brauchst du auch keine Bilder, je nach Design.

Letztens: align attribut wurde nur im letzten Jahrtausend verwendet, als CSS noch nicht wirklich einheitlich unterstützt wurde.

Bezüglich styling: Du kannst jedes Element so stylen wie du willst, auch einen button.

Kurz gesagt, so in etwa macht dein HTML Aufbau sinn:

Code:

<div class="button_container">
  <button class="pad-top"> Top </button>
  <button class="pad-right">Right </button>
  <button class="pad-bottom">Bottom </button>
  <button class="pad-left">Left </button>
</div>

Mehr sollte im HTML nicht stehen, der rest ist dann im CSS und im JS file zu finden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Responsive: 4 klickbare Buttons und Höhe	ChOpSueY!	CSS	1	20.03.2015 15:42
Buttons für externe Stylesheets: Druck & Schriftvergrößerung	Magnetic	CSS	4	02.06.2006 21:30
table fixe größen und doch variabel	DieLiLLy	CSS	7	10.02.2006 13:25
Problem mit dem Menü [erledigt]	Julian	CSS	2	15.01.2006 23:27
Problem mit Buttons / Hintergrund - Felder verschieben!?	Hisky	CSS	3	10.05.2005 20:42