Webseite – die neusten Beiträge

Bei CSS "display: flex;" wird alles schief warum?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <!-- stylesheet -->
   <link rel="stylesheet" href="styles.css">
   <!-- Boostrap Icon -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
</head>
<body>
  <div class="container">
    <!-- Create Account -->
     <div class="sign-up">
      <div class="sign-up-container">
        <h3>Create account</h3>
        <div class="cs-form-group">
          <label for="Email">Email</label>
          <input type="email" class="cs-form-control">
        </div>
      </div class="cs-form-group">
        <label for="password">Password</label>
        <input type="password" name="" id="" class="cs-form-control">
      </div>
      <div class="cs-form-control">
        <button class="cs-form-submit">Create Account</button>
      </div>
      <span class="divider"></span>
      <div class="cs-form-group">
        <button class="social-login">
          <span class="social-icon">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/2048px-Google_%22G%22_logo.svg.png" alt="" style="width: 20px;">
            
          </span>
          Create using Google Account
        </button>
      </div>
      <p>Already have an account?<a href="#"> Login</a></p>
     </div>
  </div>
     <!-- Login -->
     <div class="login">
     </div>
     <!-- Forgot Password -->
      <div class="forget-password">
      </div>
  </div>
  
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #F5F5F5;
}

.sign-up{
  position: relative;
  padding: 10px;
  width: 420px;
}

.sign-up-container{
  position: relative;
  background: #F5F5F5;
  padding: 24px 20px;
  border: 1px solid #D4D5D8;
  box-shadow: 0px 1px 2px rgba(152, 152, 152, 0.2);
}

.sign-up-container h3{
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.cs-form-group{
  display: block;
}
HTML, Webseite, CSS, Code, Programmiersprache, Webdesign

DESKTOP vs. SMARTPHONE?

Hallo zusammen. Ich kriege mein Problem seit Wochen nicht gelöst trotz offiziellen Support daher noch mal die Frage anders formuliert. 

Meine WordPress Webseite: https://mecker-ecke.com/ hat massive Unterschiede in der Ausführung von Links auf dem Smartphone. Auf dem Desktop funktioniert alles perfekt, nur auf dem Smartphone geht die "Suche" und das Anklicken von "Letzte Beiträge" nicht und springt beim Anklicken immer wieder auf die Startseite. ... und das seit Wochen.

- Caches und Cookies wurden mehrere mal gelöscht 

- Verschiedene Browser wurden verwendet 

- Unterschiedliche Smartphones wurden verwendet 

- Ich habe alle Plugins, ausser dem ASGAROS Forum, deaktiviert und es gab keine Unterschiede

- ... und einiges mehr.

Hier ein Beispiel wie die Links ausgeführt und es hier ein und derselbe Link ist und der erste logischerweise nicht gefunden werden kann:

SMARTPHONE: https://mecker-ecke.com/#postid-202

WEBSEITE: https://mecker-ecke.com/forum/topic/alice-weidel-uebernnacht-verwehrt/

https://mecker-ecke.com/forum/topic/alice-weidel-uebernnacht-verwehrt/#postid-202

Ich tippe auf die wp-options wo ein Eintrag steht, der bei einer Plugintestinstallation für rediretcion von URL's installiert und wieder gelöscht wurde. N.b. Ich hatte dort den gleichen Effekt auf dem Desktop, aber schlimmer - meine ich!

Weiss jemand, wie so ein Effekt zustande kommt und wenn es nur ein kleiner Hinweis ist?

Smartphone, Forum, Desktop, Webseite, WordPress, URL, Android, Fehlerbehebung, Link, Webentwicklung, Wordpress Plugin

(PHP-Script) Wieso funktioniert das einmal und einmal nicht?

Hab mal eine Frage zu einer Formular-PHP-aus-einer-json-Datei-auslese-und-wieder-eintrag Funktion, die ich versuche genauer zu verstehen. Genauer gesagt komm ich da an einer Stelle nicht weiter (weil sich Teile der Funktion scheinbar komplett willkürlich verhält!)

Also wenn ich in PHP eine Funktion in der Struktur hier habe:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $params = [
   "p1" => isset($_POST['p1']) ? $_POST['p1'] : null,
   "p2" => isset($_POST['p2']) ? $_POST['p2'] : null,
   "p3" => isset($_POST['p3']) ? $_POST['p3'] : null,
       "p4" => isset($_POST['p4']) ? $_POST['p4'] : null,
   // A_settings
       "P5" => [
           "SP1" => $_POST['P1'],
           "SP2" => $_POST['P2'],
       ],
   ];

und der Inhalt der auszulesenden json Datei so aussieht:

{
   "p1": "antwort1",
   "p2": "antwort2",
   "p3": "antwort3",
   "p4": "antwort4",
   "self": {
       "P5": {
           "SP1": antwort5,
           "SP2": antwort6
       }
   }
}

klappt scheinbar alles hervorragend. Die Parameter werden gefunden und nach dem Absenden des Formulars korrekt überschrieben.

Wenn ich allerdings wie im folgenden Beispiel etwas mehr Parameter hinzufüge wie in dieser Struktur hier und für die Benennung etwas längere Namenschemen verwende:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $params = [
      /// calculation nr1:
      "Self.P1" => isset($_POST['Self.P1']) ? $_POST['Self.P1'] : null,
      "Self.P2" => isset($_POST['Self.P2']) ? $_POST['Self.P2'] : null,
      "Self.P3" => isset($_POST['Self.P3']) ? $_POST['Self.P3'] : null,
      "Self.P4" => isset($_POST['Self.P4']) ? $_POST['Self.P4'] : null,
      .....
      "Self.P18" => isset($_POST['Self.P18']) ? $_POST['Self.P18'] : null,
      "Self.P19" => isset($_POST['Self.P19']) ? $_POST['Self.P19'] : null,
      "Self.P20" => isset($_POST['Self.P20']) ? $_POST['Self.P20'] : null,
      "Self.P21" => isset($_POST['Self.P21']) ? $_POST['Self.P21'] : null,
      ///
    // A_settings
       "self.A_settings" => [
           "w1" => $_POST['w1'],
           "w2" => $_POST['w2'],
       ],
      // B_settings
       "self.B_settings_2" => [
           "w3" => $_POST['w3'],
           "w4" => $_POST['w4'],
       ],

sieht die json-Datei nach dem Absenden für die ersten einfachen Parameter plötzlich so aus:

{
   "Self.P1": null,
   "Self.P2": null,
   "Self.P3": null,
   .....
    "Self.P21": null,

Nur die verschachtelten Parameter, die danach kommen:

"self.A_settings": {
       "w1": "Antwort1",
       "w2": "Antwort2"
   },
   "self.B_settings_2": {
       "w3": "Antwort3",
       "w4": "Antwort4"
   },

werden nach wie vor korrekt in die Datei geschrieben! 

Weiß einer oder hat eine Theorie wieso das eine problemlos funktioniert und bei der anderen Variante plötzlich systematisch alle einfachen Parameter (also Self.P1-21) den Wert "null" zurückgeben? 

Internet, Webseite, Formular, Code, PHP, Programmiersprache, Webentwicklung, Parameter

Snake Game HTML Score?

Ich will in meinem Snake Game: (Hier der Code)

Einen Score einbauen (ein Food = + ein Score) Kann mir jemand helfen?

//board
var blockSize = 25;
var rows = 20;
var cols = 20;
var board;
var context; 

//snake head
var snakeX = blockSize * 5;
var snakeY = blockSize * 5;

var velocityX = 0;
var velocityY = 0;

var snakeBody = [];

//food
var foodX;
var foodY;

var gameOver = false;

window.onload = function() {
    board = document.getElementById("board");
    board.height = rows * blockSize;
    board.width = cols * blockSize;
    context = board.getContext("2d"); //used for drawing on the board

    placeFood();
    document.addEventListener("keyup", changeDirection);
    // update();
    setInterval(update, 1000/10); //100 milliseconds
}

function update() {
    if (gameOver) {
        return;
    }

    context.fillStyle="black";
    context.fillRect(0, 0, board.width, board.height);

    context.fillStyle="red";
    context.fillRect(foodX, foodY, blockSize, blockSize);

    if (snakeX == foodX && snakeY == foodY) {
        snakeBody.push([foodX, foodY]);
        placeFood();
    }

    for (let i = snakeBody.length-1; i > 0; i--) {
        snakeBody[i] = snakeBody[i-1];
    }
    if (snakeBody.length) {
        snakeBody[0] = [snakeX, snakeY];
    }

    context.fillStyle="lime";
    snakeX += velocityX * blockSize;
    snakeY += velocityY * blockSize;
    context.fillRect(snakeX, snakeY, blockSize, blockSize);
    for (let i = 0; i < snakeBody.length; i++) {
        context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
    }

    //game over conditions
    if (snakeX < 0 || snakeX > cols*blockSize || snakeY < 0 || snakeY > rows*blockSize) {
        gameOver = true;
        alert("Game Over");
    }

    for (let i = 0; i < snakeBody.length; i++) {
        if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) {
            gameOver = true;
            alert("Game Over");
        }
    }
}

function changeDirection(e) {
    if (e.code == "ArrowUp" && velocityY != 1) {
        velocityX = 0;
        velocityY = -1;
    }
    else if (e.code == "ArrowDown" && velocityY != -1) {
        velocityX = 0;
        velocityY = 1;
    }
    else if (e.code == "ArrowLeft" && velocityX != 1) {
        velocityX = -1;
        velocityY = 0;
    }
    else if (e.code == "ArrowRight" && velocityX != -1) {
        velocityX = 1;
        velocityY = 0;
    }
}


function placeFood() {
    //(0-1) * cols -> (0-19.9999) -> (0-19) * 25
    foodX = Math.floor(Math.random() * cols) * blockSize;
    foodY = Math.floor(Math.random() * rows) * blockSize;
}
HTML, Webseite, CSS, JavaScript, Code, Programmiersprache, Webentwicklung

Meistgelesene Beiträge zum Thema Webseite