|
|||
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> thx |
Sponsored Links |
|
|||
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> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |