Verwandte Themen

Frage
von arduinoinspace
02.05.2024, 15:29
Mit Links
Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>
Computer, HTML, IT, JavaScript, Anwendungsentwicklung, Arduino, Code, Programmiersprache, Webentwicklung, node.js, Visual Studio Code
1 Antwort
Frage
von Thoss
24.04.2024, 14:25
Mit Bildern
Html semibold und bold schauen gleich aus?

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>
Bild zu Frage
HTML, Webseite, CSS, Mozilla Firefox, Google Chrome, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code, Microsoft Edge
1 Antwort
Frage
von Rolajamo
20.04.2024, 12:00
HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

  • ...dass Content 1 von Opacity 100 auf 0 geht
  • ...dass Content 1 in Minus Y-Richtung 20px bewegt wird
  • ...dass Content 2 von Opacity 0 auf 100 geht
  • ...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>
Animation, Technik, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
Frage
von ElianZ
02.02.2024, 17:12
Kann mir jemand bei dem TPS (Third Person shooter) Code helfen?

Hallo Ich wollte ein einfaches TPS Spiel erstellen, aber bei diesem Prototyp Zeigt es mir in VSC keinen Fehler an, aber wenn ich es mit Google oder einem Live Server öffne kommt nur eine weißer Bildschirm:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Third Person Shooter</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>

<body>
    <script src="js/three.module.min.js"></script>
    <script>
        var scene, camera, renderer;
        var player, playerControls;
        var moveForward = false;
        var moveBackward = false;
        var moveLeft = false;
        var moveRight = false;

        init();
        animate();

        function init() {
            scene = new THREE.Scene();

            // Player
            var geometry = new THREE.BoxGeometry();
            var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            player = new THREE.Mesh(geometry, material);
            scene.add(player);

            // Camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            playerControls = new PlayerControls(player, camera);

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            document.addEventListener('keydown', handleKeyDown);
            document.addEventListener('keyup', handleKeyUp);
            window.addEventListener('resize', onWindowResize, false);
        }

        function animate() {
            requestAnimationFrame(animate);
            playerControls.update();
            renderer.render(scene, camera);
        }


        function handleKeyDown(event) {
            switch (event.key) {
                case 'w':
                    moveForward = true;
                    break;
                case 's':
                    moveBackward = true;
                    break;
                case 'a':
                    moveLeft = true;
                    break;
                case 'd':
                    moveRight = true;
                    break;
            }
        }

        function handleKeyUp(event) {
            switch (event.key) {
                case 'w':
                    moveForward = false;
                    break;
                case 's':
                    moveBackward = false;
                    break;
                case 'a':
                    moveLeft = false;
                    break;
                case 'd':
                    moveRight = false;
                    break;
            }
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // PlayerControls class to handle player movement
        function PlayerControls(player, camera) {
            this.player = player;
            this.camera = camera;
            this.speed = 0.1;

            this.update = function() {
                var movement = new THREE.Vector3();

                if (moveForward) movement.z -= this.speed;
                if (moveBackward) movement.z += this.speed;
                if (moveLeft) movement.x -= this.speed;
                if (moveRight) movement.x += this.speed;

                this.player.translateX(movement.x);
                this.player.translateZ(movement.z);

                // Update camera position and look at the player
                var offset = new THREE.Vector3(0, 5, -10);
                var playerWorldPosition = new THREE.Vector3();
                this.player.getWorldPosition(playerWorldPosition);
                this.camera.position.copy(playerWorldPosition.clone().add(offset));
                this.camera.lookAt(playerWorldPosition);
            };
        }
    </script>
</body>

</html>
HTML, JavaScript, Visual Studio Code
1 Antwort
Frage
von JulianOnFire
23.01.2024, 14:11
JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

Hallo,

ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.

Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.

Ich finde den Fehler nicht.

HTML Code:

<div class="gallery-container">
  <div class="gallery" id="gallery">
    <!--Erste Reihe-->
    <img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
    <img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
    <img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">

    usw. bis

    <img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
    <img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
  </div>
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
      <div class="mySlides">
        <img src="1_1.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="1_2.webp" style="width:100%">

        bis

      <div class="mySlides">
        <img src="8_2.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="8_3.webp" style="width:100%">
      </div>
    </div>

    <!-- Vorwärts/Rückwärts Kontrollen -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

JavaScript:

function currentSlide(n) {
  showSlidesModal(slideIndex = n);
}

function showSlidesModal(n) {
  var i;
  var slidesModal = document.getElementsByClassName("mySlides");

  if (n > slidesModal.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slidesModal.length
  }

  for (i = 0; i < slidesModal.length; i++) {
    slidesModal[i].style.display = "none";
  }

  slidesModal[slideIndex - 1].style.display = "block";
}

var galleryImages = document.getElementsByClassName("gallery-img");

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].onclick = function(event) {
    openModal();
    currentSlide(parseInt(event.target.getAttribute('data-index')));
  }
}

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].setAttribute('data-index', i + 1);
}

window.onclick = function(event) {
  if (event.target == document.getElementById('myModal')) {
    closeModal();
  }
}

function plusSlides(n, modal = false) {
  var slides;

  if (modal) {
    slides = document.getElementsByClassName("mySlides");
  }
  else {
    slides = document.getElementsByClassName("slide");
  }

  slideIndex += n;

  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  if (slideIndex < 1) {
    slideIndex = slides.length
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (!modal) {
    resetAnimations(slides[slideIndex - 1]);
  }
}

document.querySelector(".modal .prev").onclick = function() {
  plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
  plusSlides(1, true);
};

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

showSlides(slideIndex);
HTML, Webseite, JavaScript, Code, Webdesign, Visual Studio Code
1 Antwort
Frage
von Benji160322
13.01.2024, 13:35
Mit Links
QR Code Generator Download button API generietes Bild?

Hallo, ich möchte gerade einen QR Code Generator programmieren. Dafür benutze ich die Library qrserver und jetzt möchte ich auch einen Download button hinzufügen. Ich habe ja aber keine feste source also habe ich probiert dem download einfach die selbe ID wie dem Img ohne source zu geben. Das hat aber nicht funktioniert, hat jemand eine Idee?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QR Code Generator</title>


    <script src="js/script.js"></script>


    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>QR Code Generator</h1>


    <div class="container">
      <p>Enter URL</p>
      <div class="ButonInput">
        <input type="text" placeholder="Your URL" id="qrText" />
        <button onclick="GenerateQR()" id="btn">Generate</button>
      </div>
      <div id="imgBox">
        <img src="" alt="" id="QrImg" />
      </div>
      <a href="" download="QrImg.src " id="QrImg"> download</a>
    </div>


    <script>
      let imgBox = document.getElementById("imgBox");
      let QrImg = document.getElementById("QrImg");
      let qrText = document.getElementById("qrText");


      function GenerateQR() {
        QrImg.src =
          "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
          qrText.value;
      }
    </script>
  </body>
</html>
HTML, Webseite, CSS, JavaScript, Code, Webdesign, Webentwicklung, Visual Studio Code
1 Antwort
Frage
von PinguSpeedy
27.12.2023, 10:51
Mit Bildern
Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

    /* Dienstleistungen*/

    .dienstleistungen{

      justify-content: center;

      width: 75%;      

    }

    .mofa-zündung-service{

      height: 50%;

      width: auto;

    }

    .mofa-getriebe-revisionen{

     height: 25%;

     width: auto;

     align-self: top;

    }

    .mofa-vergaser-tuning{

      height: 25%;

      width: auto;

      align-self: top;

    }

   

    .mofa-kolben-ersatzteile{

      height: 25%;

      width: 50%;

    }

    /*!Dienstleistungen*/

HTML:

    <h3>Dienstleistungen</h3>

    <div class="Dienstleistungen">

        <li><a href="#">Service</a></li>

        <li><a href="#">Revisionen</a></li>

        <li><a href="#">Tuning</a></li>

        <li><a href="#">Ersatzteile</a></li>

        <div class="bilder_dienstleistungen">

            <img src="Bilder/zündung.jpg" alt="zündung" class="mofa-zündung-service">

            <img src="Bilder/mofa-getriebe.png" alt="getriebe" class="mofa-getriebe-revisionen">

            <img src="Bilder/vergaser 2.png" alt="vergaser" class="mofa-vergaser-tuning">

            <img src="Bilder/kolben.png" alt="kolben"   class="mofa-kolben-ersatzteile">

        </div>

    </div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

Bild zu Frage
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, developement, developer, Programmiersprache, Webdesign, Webdesigner, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
Frage
von MrOsmo
19.12.2023, 14:45
Mit Links
Fetch JavaScript Hilfe?

Hallo,

bei mir klappt Folgendes nicht:

Wenn ich bei "Registration Form" alle inputs ausfülle, dann kommt ein sogenanntes "Kärtchen" mit deinem Avatar raus. Jedes "Kärtchen" enthält einen button "Log out", und wenn man auf den button drückt, dann sollte das "Kärtchen" nur aus HTML gelöscht werden (aber nicht aus Backend Server- Api) und der "logged" sollte im Backend Server auf false gesetzt werde.

Wie kann man das machen? Ich habe schon davor mit fetch gearbeitet, aber so ein Problem kommt bei mir zum ersten Mal (Bin ja noch komplett ein Noob in JavaScript).

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration | Form</title>
  <link rel="stylesheet" href="./CSS/settings.css">
  <link rel="stylesheet" href="./CSS/style.css">
  <link rel="stylesheet" href="./CSS/javascriptStyles.css">
  
  <script defer src="./JavaScript/script.js"></script>
</head>
<body>
  <div class="container">
    <div class="container-two">
    <div class="registration-form">
      <h2 id="heading">● Registration Form ●</h2>
      <div class="forms">
        <input id="emailInput" type="text" placeholder="example@gmail.com">
        <input id="userInput" type="text" placeholder="Username">
        <input id="pictureInput" type="text" placeholder="Picture">
        <button id="createButton">Create Account</button>
      </div>
      <p id="signInText">Already have an account? <a href="../PageTwo/index.html" id="aText">Sign in</a></p>
    </div>
    </div>
  </div>


  <div id="registerList">
  </div>
</body>
</html>

JavaScript-Code:

const registerList = document.getElementById("registerList")


const forms = document.getElementById("forms")
const email = document.getElementById("emailInput")
const user = document.getElementById("userInput")
const picture = document.getElementById("pictureInput")


const createButton = document.getElementById("createButton")


const url = "https://crudcrud.com/api/dac4c32dac5c4861a46ad8aee63df14c/todos"



const dataRender = (posts) => {
if (posts === undefined) {
  console.log("Loading...");
}
  else{
    let dataList = posts.map((post) => {
    return `
    <div class="register-container">
    <div class="inner-container">
      <img id="registerPicture" src="${post.picture}" alt="${post.user}"> 
      <h2 id="registerUser">${post.user}</h2>
      <h5 id="registerEmail">${post.email}</h5>
      <button onclick=logOutButton("${post._id}") id="registerButton">Log out</button>
    </div>
  </div>
  `
  })
  registerList.innerHTML = dataList.join("")
}
}


//GET METHOD
fetch (url)
.then(response => response.json())
.then (data => dataRender(data))


//POST METHOD
createButton.addEventListener("click", () => {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      user: user.value,
      email: email.value,
      registered: true,
      logged: true
    })
  })
  .then(response => response.json())
  .then(data => {
    const dataArray = []
    dataArray.push(data)
    dataRender(dataArray)
    
    email.value = ""
    user.value = ""
    picture.value = ""


    console.log(`User ${user.value} registered successful!`)
  })
})


//PUT METHOD
const logOutButton = (id) => {
  const data = {
    user: user.value,
    email: email.value,
    registered: true,
    logged: false
  }
  fetch(`${url}/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => { 
    
  })


}

Bitte helft mir! Ich weiss wirklich nicht wie das geht und möchte jetzt auch nicht den ganzen Tag dazu verschwenden! Denn ich habe noch andere Hausaufgaben.. Dankeschön im Voraus!

LG

MrOsmo

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
Frage
von MarlonStrich
16.12.2023, 14:49
Habe eine Frage zu meinem HTML/CSS Code?

Und zwar erstelle ich eine kleine Seite mit Steckbriefen über ein paar Tiere.
Mein Problem gerade ist, dass ich im Header 5 links erstellt habe mit einem Bild von einem Tier und den jeweiligen Tiername.
Aber leider wird nur bei dem Elefanten der Tiername über dem Bild angezeigt.Bei allen anderen stehen diese nebeneinander. Warum? Haben alle die gleichen CSS eigenschaften.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
  <div>
   <header>
    <div class="ganzer-ctn-header">
     <div class="überschrift">
      <h1>Steckbriefe über verschiedene Tierarten</h1>
     </div>
     <div class="tier-ctn">
      <div class="elefant-ctn">
       <a href="elefant.html"><p> Elefant</p> <img src="elefant.png" /></a>
      </div>
      <div class="hase-ctn">
        <a href="hase.html">Hase
          <img src="hase.png" /><a>
      </div>
      <div class="löwe-ctn">
        <a href="löwe.html"> Löwe<img src="loewe.png" /></a>
      </div>
      <div class="affe-ctn">
        <a href="affe.html"> Affe<img src="affe.png" /></a>
      </div>
      <div class="wal-ctn">
         <a href="wal.html">Wal <img src="wal.png" /></a>
      </div>
     </div>
    </div>
   </header>
   <section class="section-eichhörnchen">
  <h2>Eichhörnchen</h2>
  <div>
   <div>
    <h3>Steckbrief Eichhörnchen</h3>
   </div>
   <div class="inhalt-ctn">
    <div class="merkmal">
     Größe
    </div>
 
    <div class="antwort">
     15-20cm
    </div>
   </div>
  
   <div class="inhalt-ctn">
    <div class="merkmal">
     Geschwindigkeit
    </div>
 
    <div class="antwort">
     Bis 25 Km/h
    </div>
   </div>
   <div class="inhalt-ctn">
    <div class="merkmal">
     Gewicht
    </div>
 
    <div class="antwort">
     200-400 g
    </div>
   </div>
   <div class="inhalt-ctn">
    <div class="merkmal">
     Lebensdauer
    </div>
 
    <div class="antwort">
     3 Jahre
    </div>
   </div>
   <div class="inhalt-ctn">
    <div class="merkmal">
     Nahrung
    </div>
 
    <div class="antwort">
     Nüsse, Samen, Eicheln, Pilze, Beeren, Eier
    </div>
   </div>
   <div class="inhalt-ctn">
    <div class="merkmal">
     Feinde
    </div>
 
    <div class="antwort">
     Schlangen, Wiesel, Adler, Habichte
    </div>
   </div>
   <div class="inhalt-ctn">
    <div class="merkmal">
     Verbreitung
    </div>
 
    <div class="antwort">
     Amerika, Europa, Asien
    </div>
   </div>
   <div class="inhalt-ctn">
    <div class="merkmal">
     Lebensraum
    </div>
 
    <div class="antwort">
     Wald
    </div>
   </div>
  </div>
   </section>
  </div>
 </body>
</html>

.inhalt-ctn{
  display: flex;
  
}
body{
  background: linear-gradient(#008000,#7fff00 )
}
 
.merkmal{
  background-color: grey;
  height: 40px;
  width:300px;
}
.section-eichhörnchen{
  margin-left: 200px;
}
.tier-ctn{
display: flex;
justify-content: center;
align-items: center;
}
.elefant-ctn , .wal-ctn, .affe-ctn, .löwe-ctn, .hase-ctn{
margin-left: 70px;
}
.elefant-ctn{
width: 120px;
height: 100px;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.wal-ctn{
  
 
width: 120px;
height: 100px;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.affe-ctn{
  width: 120px;
  height: 100px;
  background-color: aqua;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.löwe-ctn{
  width: 120px;
  height: 100px;
  background-color: aqua;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.hase-ctn{
  width: 120px;
  height: 100px;
  background-color: aqua;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  flex-direction: column;
}
Technik, IT, JavaScript, Webentwicklung, Webseitenoptimierung, Internetseite erstellen, Visual Studio Code
2 Antworten
Frage
von SusgUY446
05.12.2023, 10:32
Mit Bildern
wie kann man das beheben?

sidebar.css.sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #333;
    transition: right 0.3s ease; 
  }
  
  .sidebar-open {
    right: 0;
  }

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: relative;
}


.sidebar li {
    float: left;
  }

.sidebar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
.sidebar li a:hover {
    background-color: #111;
}

 

  private.php

<?php
session_start();
if(!isset($_SESSION["username"])){
  header("Location: index.php");
  exit;
}
$username = $_SESSION["username"];
 ?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    
    <!-- Import Styles -->
    <link rel="stylesheet" href="cnd/css/loader.css">
    <link rel="stylesheet" href="cnd/css/container.css">
    <link rel="stylesheet" href="cnd/css/color-changer.css">
    <link rel="stylesheet" href="cnd/css/background.css">
    <link rel="stylesheet" href="cnd/css/navbar.css">
    <link rel="stylesheet" href="cnd/css/sidebar.css">
    
    <title>Your Personal Site</title>

    <!-- import scripts -->
    <script src="cnd/js/sidebar.js"></script>
    <script src="cnd/js/loader.js"></script>

    <script>
        
        const imageFiles = [
            'baldur.jpg',
            'baldur2.jpg',
            'baldur3.jpg',
            
        ];

        
        function setRandomImage() {
            const randomIndex = Math.floor(Math.random() * imageFiles.length);
            const randomImage = imageFiles[randomIndex];
            const imgElement = document.querySelector('.random-img');
            imgElement.src = `/personal-site/images/${randomImage}`; 
        }

        
       
    </script>
    <script>
        

        function setColor(color) {
            document.body.style.backgroundColor = color;
        }

        
    </script>


  </head>
  <body>
    
  <div class="loader"></div>
  
  <div class="container">
      <h1>Hallo <?php echo $username?></h1>
      <img src="" alt="random image of my dog" width="900px" height="900px" class="random-img">
      
    <script>
      setRandomImage();
    </script>
    <style>
      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
      }

      .dropdown:hover .dropdown-content {
          display: block;
      }

    </style>
    

  </div>
  
  <div class="dropdown">
    <span>Change Color</span>
    <div class="dropdown-content">
      <div class="color-changer">
        <button onclick="setColor('green')" class="button-green">Green</button>
        <button onclick="setColor('red')" class="button-red">Red</button>
        <button onclick="setColor('blue')" class="button-blue">Blue</button>
      </div>
    </div>
    </div>
    
    <div class="navbar">
      <ul>
        <li>
          <a href="index.php">Home</a>
        </li>
        <li>
          <a href="games.php">Games</a>
        </li>
        <li class="account-dropdown">
          <a href="">Account
      </li> 
      </ul>
    </div>

    <div class="sidebar" id="sidebar">
      <ul>


        <li>
          <a href="">Home</a><br>
        </li>

        <li>
          <a href="">Pricing</a><br>
        </li>

        <li>
          <a href="">Settings</a><br>
        </li>
      </ul>
    </div>

  </body>
</html>
Bild zu Frage
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
Frage
von MrOsmo
02.12.2023, 22:09
Frage wurde 1 Mal erneut gestellt
Mit Bildern
Wie kann ich die Reihenfolge der Hintergrundfarben ändern?

Hallo zusammen!

ich mache gerade die Hausaufgaben in IT aber ich komme leider nicht weiter.

Wie ihr auf dem Foto bereits seht, habe ich zwei Hintergründe.

Aber das Problem ist, dass der erste Hintergrund unten sein soll und der zweite Hintergrund, der gerade unten ist, soll nach oben kommen. Also einfach gesagt, ich möchte die Reihenfolge der Hintergrundfarben ändern. Ich habe schon wirklich lange daran gesessen.

Ich weiß nicht, wie man es weiter macht. Könnte mir bitte jemand helfen?

P.S. JavaScript passt leider nicht in die Frage hinein. Ihr findet es in den Kommentaren!

Dankeschön im Voraus.

LG!

Übrigens, hier die Codes:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <div class="bodyDiv">
  <header>
    <div class="title">
      <h1>My Tasks</h1>
    </div>
  </header>
  <main>
    <section>
      <div class="inputs">
        <input id="inputOne" type="text" placeholder="Enter your task!">
        <input id="inputTwo" type="date" placeholder="Enter your date!">
        <button id="buttonForInputs">Add task!</button>
      </div>
    </section>
    <section>
      <div class="tasks">
        <div class="date"> 
          <div class="information"></div>
        </div>
      </div>
    </section>    
   <section>
    <div class="buttons">
      <button id="buttonOne">Delete all!</button>
      <button>Change status!</button>
    </div>
   </section>
  </main>
  </div>
</body>
</html>

CSS:

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


/*BODY_AND_HTML*/
html {
background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%,rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%),linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%,rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%,rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%),linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%,rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%),linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%,rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%),linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%,rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(90deg, rgb(249, 17, 190),rgb(100, 28, 213));
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}

/*HEADER*/

header .title {
  display: flex;
  justify-content: center;
}


header h1 {
  font-size: 4rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fff;
}

/*MAIN*/

.tasks {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}

.tasks .date .information p {
  margin-top: -210px;
  margin-left: -190px;
  color: #fff;
  font-weight: 100;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.tasks .date {
  background-color: orange;
  width: 20%;
  padding-bottom: 20px;
  border-radius: 9px;
  display: none;  
}

.tasks .date .information {
  background-color: rgb(219, 182, 112);
  padding-top: 220px;
  border-radius: 5px;
  text-align: start;
  display: none;
}

.tasks .date p {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.inputs {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.inputs input {
  width: 30%;
  height: 30px;
  border-radius: 7px;
}

.inputs #inputOne {
  margin-top: 150px;
}

.inputs #inputTwo {
  margin-top: 10px;
}

.inputs button {
  margin-top: 15px;
  width: 8%;
  height: 30px;
  margin-right: 320px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-right: 150px;
  margin-top: 30px;
  gap: 10px;
}

.buttons button {
  width: 11%;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}
Bild zu Frage
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
2 Antworten
Frage
von MrOsmo
25.10.2023, 01:20
Frage wurde 1 Mal erneut gestellt
Mit Bildern
HTML und CSS Frage?

Hallo,

ich möchte die Grüne und gelbe Kärtchen im zweiten <section> nach oben in die MITTE schieben. Jedoch hakt es bisschen bei mir. Zudem müssen wir nur Flexbox benutzen das heisst kein margin oder position etc....

HTML_CODE:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Flexbox</title>

  <link rel="stylesheet" href="../CSS/style.css">

</head>

<body>

  <header>

    <div class="layout2">

 <nav>

    <div class="container">

      <ul>

        <li>

          <a class="item1" href="#">LOGO</a>

          <a class="item" href="#">Menu 1</a>

          <a class="item" href="#">Menu 2</a>

          <a class="item" href="#">Menu 3</a>

          <a class="item2" href="#">Button</a>

        </li>

      </ul>

    </div>

  </nav>

 

</div>

</header>

<main>

  <div class="layout4">

  <section>

   

 

    <div class="laayout2">

     

      <div class="brownhelp"><div class="brownbox"></div></div>

      <div class="sectionone">

        <div class="content1">

          <div class="border"></div>

    <div class="border1"></div>

    <div class="border2"></div>

    <div class="border3"></div>

    <div class="border4"></div>

        </div>

  </div>

</div>

</section>

<section>

    <div class="laayout3">

  <div class="sectiontwo">

      <div class="content2">

        <div class="box"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

       

      </div>

    </div>

    </div>

</section>

</div>

</main>

</body>

</html>

CSS_CODE:

*{

  margin: 0;

  box-sizing: border-box;

}

header {

  background-color: #cae1fc;;

}

.layout2 {

  display: flex;

  align-items: center;

  justify-content: space-around;

  flex-direction: column;

}

.container {

  height: 150px;

  width: 1425px;

  background-color:rgb(80, 98, 104);

  display: flex;

  justify-content: space-around;

  align-items: center;

}

div ul {

  width: 100%;

}

div li {

  display: flex;

   justify-content: space-around;

   align-items:center;

  list-style: none;

}

.item {

  background-color: rgb(39, 185, 171);

  width: 120px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

 

}

.item1 {

  background-color: rgb(193, 67, 67);

  width: 115px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

}

.item2 {

  background-color: rgb(112, 29, 189);

  width: 80px;

  height: 90px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: small;

  display: flex;

  text-align: center;

  justify-content: center;

  flex-direction: column;

  text-decoration: none;

}

.layout2 > nav {

  height: 100vh;

}

nav {

  display: flex;

  align-items: flex-end;

  max-height: 170px;

}

/**/

.layout4 {

  background-color: #cae1fc;

}

.laayout2 {

  height: 1000px;

  display: flex;

  justify-content:space-around;

}

.sectionone {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  max-height: 345px;

  width: 270px;

 

}

.content1 {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 20px;

  background-color: #cae1fc;;

}

.border {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border1 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.border2 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border3 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border4 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.brownhelp {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  max-height: 345px;

  width: 1200px;

}

.brownbox {

  background-color: burlywood;

  width: 1150px;

  height: 305px;

 

}

/*YELLOW*/

.laayout3 {

  display: flex;

  justify-content: space-around;

  align-items: flex-start;

  height: auto;

 

}

.sectiontwo {

  display: flex;

  width: 800px;

  justify-content: space-around;

  align-items: center;

}

.content2 {

  display: flex;

  justify-content: space-around;

  gap: 200px;

}

.box {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box2 {

  background-color: green;

  width: 200px;

  height: 190px;

}

.box3 {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box4 {

  background-color: green;

  width: 200px;

  height: 190px;

}

Bild zu Frage
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort

Meistgelesene Fragen zum Thema Visual Studio Code
Mehr meistgelesene Fragen zu Visual Studio Code