zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grid buttons mit veränderten Größen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.09.2020, 20:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2020
Beiträge: 1
Huby befindet sich auf einem aufstrebenden Ast
Standard Grid buttons mit veränderten Größen

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2020, 08:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.073
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:44 Uhr.