Verwandte Themen

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 Gojosatoru383
23.12.2023, 05:43
Frage wurde 1 Mal erneut gestellt
Mit Bildern
Mit Links
Was sagt ihr zu dem anfangsprojekt?

Mein Ziel ist es mit html und CSS eine stabile Test Seite zu erstellen (Später kommt Js dazu) um dann eine richtige Seite zu bauen

html:

<!DOCTYPE html>

<html lang="de">

<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">

<!-- Load an icon library -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar">

<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>

<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>

<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>

<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

</div>

</head>

<body>

<Header>

</Header>

<div class="input">

<main>

<form action="" method="post">

<h2>Anmeldung</h2>

<h3>Login</h3>

<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>

<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>

<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>

<input type="submit" value="Anmelden">

<input type="reset" value="reset">

</form>

</div>

<hr>

<a href="#">Impressum</a>

<a href="#">kontakt</a>

<a href="#">Über uns</a>

</main>

<footer>

</footer>

</body>

</html>

css:

body {

font-family: Arial, Helvetica, sans-serif;

color: white;

}

body{

background-color: white;

}

.input {

display: flex;

margin: 150px;

margin-top: 3000px;

flex-direction: column;

justify-content: center;

align-items: center;

box-shadow: 1px 1px 3px 3px black;

border-radius: 30px;

height: 30px;

width: 100px;

padding: 100px;

}

h3{

color: black ;

}

)

a{

font-family: Arial, Helvetica, sans-serif;

display: flex;

justify-content: center;

align-items: center;

}

a:hover{

color: green;

text-decoration-line: none;

}

input{

padding: 5px;

border-radius: 10px;

}

input[type="submit"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

background-image: linear-gradient(to top, gainsboro 0%, white 90%);

border-radius: 20px;

}

input[type="reset"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

background-image: linear-gradient(to top, gainsboro 0%, white 90%);

border-radius: 20px;

}

#main {margin: 0 auto; width: 25%;}

.input {margin: 0 auto; width: 25%;}

input:hover {

color: blue;

}

/* Style the navigation bar */

.navbar {

width: 100%;

background-color: #555;

overflow: auto;

}

/* Navbar links */

.navbar a {

float: left;

text-align: center;

padding: 12px;

color: white;

text-decoration: none;

font-size: 17px;

}

/* Navbar links on mouse-over */

.navbar a:hover {

background-color: #000;

}

/* Current/active navbar link */

.active {

background-color: #04AA6D;

}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */

@media screen and (max-width: 500px) {

.navbar a {

float: none;

display: block;

}

}

Bild zu Frage
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
2 Antworten
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 einem Inkognito-Nutzer
19.12.2023, 11:09
Mit Bildern
Mit Links
Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

Bild zu Frage
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung
1 Antwort
Frage
von Noway28YT
07.12.2023, 13:38
HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

LG

HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
3 Antworten
Frage
von GeldGeil457
05.12.2023, 15:38
Frage wurde 1 Mal erneut gestellt
Mit Links
Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

 (Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

HTML, Webseite, CSS, HTML5, Code, PHP, Programmiersprache, Python, Webdesign, Webentwicklung, Frontend, Python 3, Selenium
1 Antwort
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 Selinaaaaae
30.11.2023, 15:02
Mit Bildern
Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}
Bild zu Frage
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
Frage
von NilsApps
28.11.2023, 13:15
Mit Links
Quellcode mit einem Platzierungsfehler?
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CatPhotoApp</title>
</head>
<body>
  <main>
    <h1>CatPhotoApp</h1>
    
    <section>
      <h2>Cat Photos</h2>
      <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
      <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </section>
    
    <section>
      <h2>Cat Lists</h2>
      
      <h3>Things cats love:</h3>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
        <figcaption>Cats <em>love</em> lasagna.</figcaption>
      </figure>
      
      <h3>Top 3 things cats hate:</h3>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
        <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
      </figure>
    </section>
    <section>
      <h2>Cat Form</h2>
      <form action="https://freecatphotoapp.com/submit-cat-photo" method="post">
        <!-- Erstes fieldset -->
        <fieldset>
          <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input type="radio" name="indoor-outdoor" id="indoor" value="indoor"> Indoor</label>
          <label><input type="radio" name="outdoor-indoor" id="outdoor" value="outdoor"> Outdoor</label>
        </fieldset>
        <fieldset> 
          <!-- Direkt unter dem legend-Tag können weitere Inhalte hinzugefügt werden -->
          <legend>Additional Information</legend>
          
          <label for="catName">Cat's Name:</label>
          <input type="text" id="catName" name="catName" placeholder="Enter your cat's name" required>
          <label for="catAge">Cat's Age:</label>
          <input type="number" id="catAge" name="catAge" placeholder="Enter your cat's age" required>
          <label for="catColor">Cat's Color:</label>
          <input type="text" id="catColor" name="catColor" placeholder="Enter your cat's color" required>
          <label for="catPhotoURL">Cat's Photo URL:</label>
          <input type="text" id="catPhotoURL" name="catPhotoURL" placeholder="Enter cat photo URL" required>
          <button type="submit">Submit</button>
       
</fieldset>
      </form>
    </section>
  </main>
</body>
</html>

Könntet ihr mir bitte helfen das <fieldset> richtig zu platzieren.

HTML, Webseite, Webdesign, Frontend
1 Antwort
Frage
von einem Inkognito-Nutzer
19.11.2023, 17:59
Webentwickler Freelancer - wer kümmert sich um DSGVO?

Ist es üblich das ich als Webentwickler mich auch um Datenschutz texte und funktionierenden cookie banner kümmere (nur notwendige akzeptieren, nur marketing cookies, alle akzeptieren) usw. ?

Und je nachdem verändert sich die seite weil googoe fonts oder maps zugestimmt wurde.

Wenn ich davon nichts genau erwähnt habe im veertrag nur von home, contact page und solchen sachen die rede ist.

Wie der Name sagt bin ich Webentwickler nicht jurist.

Ich würd die ins netz stellen für die person oder offline zuschicken aber was danach passiert ist nicht mein Problem sag ich mal.

vorallem wenn ich mit wordpress was mache sind da alle möglichen plugins irgendwelche tracker und der datenschutz problematisch. 

wenn ich die von Grund auf selber programmiere mit zb. react hab ich da zumindest vollen überblick. 

oder wie würdet ihr da vorgehen ? 

engagiert man da einen Anwalt ? Mach ich das und sollte mit 200€ extra rechnen für diese Implementierung oder der Kunde macht das alleine ?

Aber wie kennt der Anwalt sich aus mit react js oder wordpress plugins ? Und dann kann er garantieren/haften das die seite konform ist ? 

Bei diesen generatoren ist das ja nicht gegeben und cookie banner muss auch ordnungsgemäß funktionieren, kann nicht sein das er unter der haube garnichts macht.

Computer, Homepage, Datenschutz, HTML, Webseite, CSS, WordPress, JavaScript, Cookies, Anwalt, CMS, Freelancer, Hacker, IT-Sicherheit, Jura, Jurastudium, Jurist, PHP, Programmiersprache, Webdesign, Webentwicklung, React, Wordpress Plugin, fiverr, Woocommerce, Shopify, Angular, React Native, VueJs
2 Antworten
Frage
von verreisterNutzer
19.11.2023, 16:32
Webentwickler Freelancer - wer kümmert sich um DSGVO?

Ist es üblich das ich als Webentwickler mich auch um Datenschutz texte und funktionierenden cookie banner kümmere (nur notwendige akzeptieren, nur marketing cookies, alle akzeptieren) usw. ?

Und je nachdem verändert sich die seite weil googoe fonts oder maps zugestimmt wurde.

Wenn ich davon nichts genau erwähnt habe im veertrag nur von home, contact page und solchen sachen die rede ist.

Wie der Name sagt bin ich Webentwickler nicht jurist.

Ich würd die ins netz stellen für die person oder offline zuschicken aber was danach passiert ist nicht mein Problem sag ich mal.

vorallem wenn ich mit wordpress was mache sind da alle möglichen plugins irgendwelche tracker und der datenschutz problematisch.
wenn ich die von Grund auf selber programmiere mit zb. react hab ich da zumindest vollen überblick.

oder wie würdet ihr da vorgehen ?
engagiert man da einen Anwalt ?
Aber wie kennt der sich aus mit react js oder wordpress plugins ? Und dann kann er garantieren/haften das die seite konform ist ?

Bei diesen generatoren ist das ja nicht gegeben und cookie banner muss auch ordnungsgemäß funktionieren, kann nicht sein das er unter der haube garnichts macht.

PC, Server, Homepage, Linux, HTML, IT, Webseite, CSS, WordPress, JavaScript, Recht, Freelancer, Hacker, Informatik, IT-Sicherheit, Jura, PHP, Programmiersprache, Rechtslage, Strafrecht, Webdesign, Webentwicklung, React, fiverr, Laravel
3 Antworten

Meistgelesene Fragen zum Thema Webdesign
Mehr meistgelesene Fragen zu Webdesign