Wie sehen denn deine Buttons aus? Wenn Du ein <button> Element genommen hast ist der Defaulttype "submit". Versuche, explizit type="button" anzugeben.
Beiträge von Sempervivum
-
-
Die body-Befehle des 2. Videos dienen dazu, die Buttons im Browserfenster mittig anzuordnen und ich denke mal, das ist nur bei der Demo wichtig. Also am besten weg lassen. Du hast ja wahrscheinlich andere Wünsche wo Du die Buttons hinlegen willst.
Auch in der ersten Demo kannst Du die Bilder mit den Containern darum herum dort anordnen, wo Du es brauchst.
-
Die Erklärung und die Lösung ist relativ einfach: Durch den z-index hier:
Code#text { position: absolute; right: -350px; color: #fff; white-space: nowrap; font-size: 7.5vw; /* z-index: 9; */ overflow: hidden; }wird die Schrift in den Vordergrund geholt. Deaktiviere ich das, wird sie wie gewünscht angeordnet, d. h. sie verschwindet hinter den Bergen im Vordergrund. Die Elemente werden so aufeinander gestapelt wie sie im HTML notiert sind, d. h. das letzte überdeckt die davor wo es nicht transparent ist. Jedenfalls dann wenn man diese Anordnung nicht durch z-index ändert.
-
Genau, darauf wolle ich hinaus!
-
Keine Screenshots hoch laden sondern die Einzelbilder, die hier in die img-Tags geladen werden:
Code<section> <img src="stars.png" id="stars"> <img src="moon.png" id="moon"> <img src="mountains_behind.png" id="mountains_behind"> <h2 id="text">Moon Light</h2> <a href="#sec" id="btn">Explore</a> <img src="mountains_front.png" id="mountains_front"> </section> -
Eher nicht, man braucht schon die Einzelbilder. Vor allem die Felsen vorn müssen ja passen mit dem Ausschnitt in der Mitte und man kann nicht irgend ein Tesbild nehmen.
-
Um das untersuchen zu können, fehlen die Bilder. Kannst Du die vielleicht auch noch irgend wie zur Verfügung stellen?
-
Selber habe ich mit dem Einbinden von Fonts keine Erfahrung. Versuche, ob diese Seite dir weiter hilft:
-
Was meinst Du jetzt mit Highscore-Seite? Die mit den Automaten oder die mit dem Spiel?
-
Hast Du überhaupt das jQuery auch auf der neuen Seite ausgeführt? Es wirkt natürlich immer nur auf die aktuelle Seite.
-
Wenn Du schreibst, sie funktionieren gar nicht ist das sicher so zu verstehen, dass überhaupt nichts passiert beim Klick. Mache ich eine einfache Testdatei, funktioniert alles einwandfrei.
HTML
Alles anzeigen<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <title> Arcade </title> <script> $(document).ready(function () { $('.liste').on('click', '.entfernenbutton', function () { $('.liste').load('testpost.php', { nummerElement: $(this).val() }); }); }); </script> </head> <body> <div class="liste"> <input class="entfernenbutton" value="btn 1"> <input class="entfernenbutton" value="btn 2"> </div> </body> </html>Ich vermute, dass der Fehler anderswo liegt.
-
Das Javascript brauchen wir gar nicht mehr, da das Spiel sich selber anpasst. Leider geistert auf deiner Seite immer noch ein float herum. Am besten das Layout von der Seite mit den Automaten nehmen und statt der Automaten das Spiel einbauen.
-
... ein wenig herumprobiert: Wenn ich die feste Breite und Höhe des Unity-Containers deaktiviere passt sich das Spiel wunderbar an, wenn ich das Browserfenster größer und kleiner ziehe.
-
Ja, so ungefähr. Das ganze müsste aber dynamisch sein, so wie ich es bei den Automaten mit Javascript gemacht habe. Es wäre ja wenig zielführend, wenn es nur bei genau 800x600 vernünftig aussieht.
Alternativ könntest Du nachforschen, ob Du bei Unity auch die Größe einstellen kannst, u. U. auch dynamisch durch Javascript gesteuert.
-
Geht nicht gibt's nicht. Man könnte versuchen, das Spiel mit CSS-scale zu verkleinern und an den freien Raum anzupassen, ähnlich wie wir das mit den Automaten gemacht haben.
-
Danke, eine Möglichkeit könnte sein, das Spiel fensterfüllend laufen zu lassen und die Anleitung vor dem Starten anzuzeigen. Dann eine Taste "Verstanden, starte jetzt" und das Spiel starten.
-
Dann musst Du schon die URL solch einer Seite posten. Das wäre ja dann eine ganz andere Baustelle.
-
Ich habe mal meine Testseite auf 800x600 eingestellt und dann sieht sie so aus:
html-seminar.de/woltlab/attachment/3153/
Erste Maßnahme: Die Schriftgröße bei den japanischen Zeichen rechts halbieren. Aber meinst Du jetzt überhaupt noch diese Seite mit den Automaten?
-
Um das mit den Bildern zu bereinigen musst Du zunächst die feste Breite entfernen, denn die Abmessungen werden jetzt vom Script gesetzt. Und dann overflow:hidden; setzen:
Code
Alles anzeigen#ani-wrap-1 { /* Breite auf die der Einzelbilder setzen: */ /* width: 348px; */ } #ani-wrap-2 { /* Breite auf die der Einzelbilder setzen: */ /* width: 348px; */ } #ani-wrap-3 { /* Breite auf die der Einzelbilder setzen: */ /* width: 348px; */ } .ani-wrap{ /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */ display: flex; overflow: hidden; }(ab Zeile 311 in external.css)
-
Perfekt, ich sehe es mir an ...