Verwandte Themen

Mia1307
22.06.2024, 16:42
Mit Links
Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>
Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend
1 Antwort
kaysiebke
10.07.2024, 17:13
google docs texte eingabe felder lehren nach eingabe?

Guten Tag, ich habe ein Problem, den ich bekomme nach dem Absenden der Text eingabefelder diese nicht geleert über die>> value Funktion<<für die neuen Texteingaben. Ich bin mir sicher es ist bestimmt ein simples Problem, aber irgendwie sehe ich den Wald vor lauter >Bäume nicht. Leider bekomme ich die Value-Funktion nicht so hin, wie ich möchte. Hat einer ein tip oder weis wie ich mein HTML umstellen muss.

<!DOCTYPE html>
<html>


<head>
    <br>
    <div align='center'>
        <img src= 
    </div>
    <base target="_top">
    <style>
        body {
          background: #021d49;
          font-family: Arial, Arial;
          color: #e6e9f1;
          font-size: 13pt;
          margin: 0px;
          padding: 10px; 
        }
            label {
            font-weight: bold;
            text-transform: uppercase;
        }
            input[type="text"] {
            width: 270px;
            padding: 15px;
            height: 50px;
            margin-bottom: 15px;
            border: 3px outset #FF0000;
            border-radius: 7px;
            font-size: 15pt;
            box-sizing: border-box;
        }
            input[type="button"] {
            display: block;
            margin: 0 auto 7px auto;
            cursor: pointer;
            width: 120px;
            padding: 15px 2px;
            background-color: #FF0000;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 12pt;
            text-align: center;
            text-decoration: none;
            border: 1px solid #FF0000;
            border-radius: 7px;
            transition: background 0.2s ease-out;
         
         
        }
            input[type="button1"] {
           display: block;
            margin: 0 auto 7px auto;
            cursor: pointer;
            width: 120px;
            padding: 15px 2px;
            background-color: #FF0000;
            color: white;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 12pt;
            text-align: center;
            text-decoration: none;
            border: 1px solid #FF0000;
            border-radius: 7px;
            transition: background 0.2s ease-out
         
        }
            input[type="button1"]:hover {
            background-color: #19911b;
            color: #000000;
        }
         
            input[type="button"]:hover {
            background-color: #19911b;
            color: #000000;
        }
    </style>


    <style>
        ::-ms-input-placeholder { /* Edge 12-18 */
          color: red;
        }
        ::placeholder {
          color: red;
        }
    </style>


</head>


<body>
    <form id="itemForm">
        <input type="text" id="sku" name="sku" placeholder="SKU">
        <br>
        <br>
        <input type="text" id="color" name="color" placeholder="Color">
        <br>
        <br>
        <input type="text" id="size" name="size" placeholder="Sitze">
        <br>
        <br>
        <input type="text" id="description" name="description" placeholder="Description">
        <br>
        <br>


        <div style="display: flex">
            <input type="button" value="Submit" onclick="submitForm()">
            <input type="button1" value="Reset" onclick="form.reset()">
        </div>
    </form>
    <script>
        function submitForm() {
        var form = document.getElementById('itemForm');
        var formData = {
        'sku': form.sku.value,
        'color': form.color.value,
        'size': form.size.value,
        'description': form.description.value
        };
        google.script.run.processForm(formData);
        }
    </script>
</body>

   
HTML, CSS, JavaScript, HTML5, Code, Programmiersprache, Google Docs
0 Antworten
kaysiebke
06.07.2024, 03:59
Mit Bildern
wie bekomme ich in google Docks Tabelle zwei button mit abstand nebneinander?

Hallo in die Runde und schon mal vielen Dank im Voraus in die Runde!

Ich bin noch blutiger Anfänger und fange gerade an mich mit dem HTML zu beschäftigen. Wie schon im Fragetitel beschrieben versuche ich zwei Buttons mit Abstand nebeneinander zu bekommen, aber es gelingt mir nicht so recht. Daher setze ich mal das, was ich habe, hier rein. Ich würde mich über jeden lehrreichen Tipp sehr freuen, um meinen Horizont in diesem Bereich zu erweitern

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
form {
    background-color: #fff;
    width: 250px;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 0px rgba(1,2,0.1);
    margin
    width:auto !important;
}
    label {
    font-weight: bold;
    text-transform: uppercase;
}
    input[type="text"] {
    width: 250px;
    padding: 20px;
    margin-bottom: 9px;
    border: 1px outset #FF0000;
    border-radius: 10px;
    box-sizing: border-box;
}
    input[type="button"] {
    display: block;
    margin: 0 auto 12px auto;
    cursor: pointer;
    width: 190px;
    padding: 20px 2px;
    background-color: #FF0000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 1px solid #FF0000;
    border-radius: 7px;
 
    transition: background 0.2s ease-out;
 
}
    input[type="button1"] {
    display: block;
    margin: 0 auto 7px auto;
    cursor: pointer;
    width: 140px;
    padding: 20px 2px;
    background-color: #FF0000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 1px solid #FF0000;
    border-radius: 7px;
 
    transition: background 0.2s ease-out;
 
}
    input[type="button1"]:hover {
    background-color: #19911b;
}
 
    input[type="button"]:hover {
    background-color: #19911b;
}
 
</style>
</head>
<body>
<form id="itemForm">
<label for="sku">SKU:</label><br>
<input type="text" id="sku" name="sku"><br>
<label for="color">Color:</label><br>
<input type="text" id="color" name="color"><br>
<label for="size">Size:</label><br>
<input type="text" id="size" name="size"><br>
<label for="description">Description:</label><br>
<input type="text" id="description" name="description"><br><br>
<input type="button" value="Submit" onclick="submitForm()">
<input type="button1" value="Reset" onclick="form.reset()">
</form>
<script>
function submitForm() {
var form = document.getElementById('itemForm');
var formData = {
'sku': form.sku.value,
'color': form.color.value,
'size': form.size.value,
'description': form.description.value
};
google.script.run.processForm(formData);
}
</script>
</body>

</html>

Bild zum Beitrag
HTML, CSS, JavaScript, HTML5, Code, Programmiersprache
1 Antwort
LionCrafter01
03.07.2024, 11:42
Mit Links
Login Programmieren?

Ich bin gerade dabei eine Webseite zu Programmieren und will sie dan kostenlos über Cloudflare Hosten. Dabei stose ich auf probleme. Also in meiner webseite soll man sich anmelden können ich hebe dazu ein test erstellt. In cloutflare habe ich einen Worker erstellt dann habe ich diesen code eingegeben

const users = [
  { username: 'user1', password: 'password1' },
  { username: 'user2', password: 'password2' }
];


addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});


async function handleRequest(request) {
  if (request.method === 'POST') {
    try {
      const { username, password } = await request.json();


      const user = users.find(
        user => user.username === username && user.password === password
      );


      if (user) {
        return new Response(JSON.stringify({ success: true, message: 'Login erfolgreich' }), {
          headers: { 'Content-Type': 'application/json' },
        });
      } else {
        return new Response(JSON.stringify({ success: false, message: 'Ungültige Anmeldedaten' }), {
          headers: { 'Content-Type': 'application/json' },
        });
      }
    } catch (error) {
      return new Response(JSON.stringify({ success: false, message: 'Fehler beim Verarbeiten der Anfrage' }), {
        headers: { 'Content-Type': 'application/json' },
      });
    }
  } else if (request.method === 'GET') {
    if (request.url.endsWith('/favicon.ico')) {
      // Hier können Sie eine spezifische Antwort für favicon.ico zurückgeben
      return new Response(null, { status: 204 }); // Hier 204 bedeutet "No Content"
    } else {
      // Beispiel: Eine allgemeine Antwort für GET-Anfragen
      return new Response('Hello from Cloudflare Worker!', {
        headers: { 'Content-Type': 'text/plain' },
      });
    }
  } else {
    return new Response('Method Not Allowed', { status: 405 });
  }
}

wenn ich ihn starte gibt er das aus:

Hello from Cloudflare Worker!

das ist das anmelde formular:

wenn man sein password eingibt kommt eine Fehlermeldung

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <title>Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }
        .login-container button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm" onsubmit="handleLogin(event)">
            <input type="text" id="username" placeholder="Benutzername" required>
            <input type="password" id="password" placeholder="Passwort" required>
            <button type="submit">Einloggen</button>
        </form>
    </div>
    <script>
        async function handleLogin(event) {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    try {
        console.log('Sending login request...');
        const response = await fetch('https://login.   … .workers.dev/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
                // Weitere Header, falls erforderlich
            },
            body: JSON.stringify({ username, password })
        });
        console.log('Response received:', response);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const result = await response.json();


        console.log('Result:', result);


        if (result.success) {
            alert('Login erfolgreich');
            // Weiterleitung oder zusätzliche Logik hier einfügen
        } else {
            alert('Ungültige Anmeldedaten');
        }
    } catch (error) {
        console.error('Es gab ein Problem mit dem Fetch-Betrieb:', error);
        alert('Es gab ein Problem mit dem Login. Bitte versuche es später erneut.');
    }
}
    </script>
</body>
</html>
HTML, CSS, JavaScript, HTML5, cloudflare
0 Antworten
Moni98799
26.06.2024, 03:10
Mit Links
FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung, Visual Studio Code
3 Antworten

Meistgelesene Beiträge zum Thema HTML5

Mehr meistgelesene Fragen zu HTML5