HTML – die neusten Beiträge

Verwandte Themen
Loe00998045346
21.08.2024, 20:51
Mit Bildern

Richtige Formatierung bei HTML und CSS?

Ich habe eine Frage. Ich arbeite gerade als Anfänger an einer Website und habe folgendes Problem.

So sieht die Website eigentlich aus :

So sieht sie aus nach der ersten Skalierung mit responsive Webdesign (wo nach alles richtig ist.):

Doch wenn ich ein weiteres mal skalieren möchte passiert folgender Fehler (Es soll so wie auf dem zweiten Bild aussehen nur kleiner):

HTML: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" type="text/css">
  <title>ToDo List</title>
</head>
<body>
  <header class="site-header">
    <form action="action_page.php" method="post">
      <input type="text" id="todo-box" name="box-input" placeholder="Aufgabe eingeben" required maxlength="50" class="todo-input">
      <input type="reset" class="todo-reset todo-reset-submit">
      <input type="submit" class="todo-submit" class="todo-reset-submit">
    </form>
  </header>
  <nav class="site-nav">
  </nav>
  <main class="site-main">
    <h2>ToDo</h2>
    <p class="todo-point">Müll rausbringen</p>
    <p class="todo-point">Zimmer aufräumen</p>
    <p class="todo-point">12345678901234567890123456789012345678901234567890</p>
  </main>
  <footer class="site-footer">
  </footer>
</body>
</html>
CSS: .site-header
{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 20px;
}
.todo-input
{
  font-size: 20px;
  width: 180px;
  padding-left: 5px;
}
.todo-input::placeholder
{
  color: black;
}
.todo-reset, .todo-submit
{
  width: 150px;
  font-size: 20px;
  border: none;
  cursor: pointer;
}
.todo-input, .todo-reset, .todo-submit
{
  border-radius: 5px;
  background-color: rgb(251, 255, 0);
  border: none;
  height: 45px;
  transition: background-color 0.3s;
}
.todo-input:hover, .todo-reset:hover, .todo-submit:hover
{
  background-color: rgb(213, 216, 13);
}
.site-main
{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
}
.site-footer
{
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
p.todo-point
{
  margin: 3px 0;
  padding: 2px;
  border: 1mm solid black;
  border-radius: 10px;
}
@media (max-width: 520px)
{
  .todo-input
  {
    width: 480px;
    margin: 0 5px 5px 5px;
  }
  .todo-reset, .todo-submit
  {
    width: 240px;
    margin: 0 0 4px 4px;
  }
  p.todo-point
  {
    font-size: 19px;
  }
}
@media (max-width: 500px)
{
  .site-header
  {
    justify-self: unset;
  }
  .todo-input
  {
    display: flex;
    justify-content: center;
    width: 400px;
    margin: 0 5px 5px 5px;
  }
  .todo-reset-sumbit
  {
    display: flex;
    justify-content: center;
    width: 200px;
    margin: 0 0 4px 4px;
  }
}
Bild zum Beitrag
HTML, Webseite, CSS, Webdesign, Webentwicklung, Visual Studio Code
2 Antworten
eduard908
14.08.2024, 16:19

Website API Problem lösen?

Ich habe die letzten Tage sehr lange an einer Website im Frontend gearbeitet, die ich für das Unternehmen meiner Mutter machen wollte.

Die Website ist auch sogut wie fertig, das Frontend funktioniert und ich weiß auch, wie ich die Website hochladen kann.
Jedoch habe ich an einem Punkt noch massive Probleme:

An einer Stelle der Website soll der Besuche in ein Formular seinen Namen und seine Email Adresse eingeben, um weitergeleitet zu werden. Das funktioniert auch soweit, jedoch sollen die Daten gleichzeitig in dem Dienst activecampaign gespeichert werden.

Leider habe ich es mit meinen Javascript Kenntnissen und auch mit ChatGPTs, sowie der Hilfe des Supports von Activecampaign nicht geschafft, dies zum laufen zu bringen.

Nach erneuter Recherche habe ich dann herausgefunden, dass ich wohl aufgrund der Fehler, die die Konsole ausgibt mit einem Backend arbeiten sollte, um die Daten an die API von Activecampaign weiterzuleiten. Allerdings bin ich kompletter Amateur und habe 0 Ahnung von Backend Programmierung und gehe auch nicht davon aus, dass wenn ich mich damit nun eine Weile intensiv beschäftigen würde, das Problem in nächster Zukunft immernoch nicht beheben kann.

Allerdings ist es in meinem Kopf auch nicht mehr unbedingt viel Arbeit, um das ganze dann fertig zu stellen oder? Immerhin geht es ja nur noch um das Übermitteln von Daten.

Ich frage mich nun, wie ich das gelöst bekomme. Ich habe jetzt nicht unbedingt jemanden in meinem Umfeld, der sich damit auskennt und mir helfen könnte oder so und alles an Dienstleistungen, was ich zum Beispiel auf Fiverr finden konnte, dreht sich nur um die gesamte Programmierung eines Backends oder einer ganzen Website. Jedoch ist das ja so gesehen viel zu viel, was ich buchen würde, wenn es nur darum geht, ein Formular mit der API zu verbinden.

Ich will halt auch wenn dann einen seriösen Auftragnehmer haben, da es ja um Kundendaten geht, jedoch weiß ich nicht, wie ich das alles umsetzen kann...

Ich bin so kurz vorm Ziel und komme jetzt einfach nicht weiter, es ist so deprimierend, vor allem nach der ganzen Arbeit, die da schon drin steckt...

Wie löse ich das Problem?

Früher oder später will ich aber auch den Skill haben, genau dieser Art zu programmieren, allerdings gehe ich derzeit noch hauptsächlich in die Schule...

Wo taucht man dahingehend so in das Thema ein, dass man das lernt? (am besten von Zu Hause aus)

HTML, Webseite, CSS, JavaScript, Programmiersprache, Webdesign, Webentwicklung
3 Antworten
eduard908
11.08.2024, 20:53

Zu dumm für Programmierprojekt?

Ich habe die letzten Tage für das Unternehmen meiner Mutter eine Website programmiert (alles per code), jedoch nur im Frontend...

Jetzt gilt es, mehr oder weniger das Backend zu machen und ich bin komplett am verzweifeln...

So habe ich vor allem das Problem, dass ich Daten eines Formulars der Website an ActiveCampaign senden will (falls ihr das kennt), um sie zu speichern, jedoch bekomme ich es nicht hin, die API mit meiner Seit zu verbinden, sodass diese die Daten richtig einfügen kann.

Php kann ich gar nicht und Javascript begrenzt, ich habe versucht mithilfe von ChatGPT zu arbeiten, was bei den visuellen Designs auch super funktioniert hat, allerdings gibt chatgpt jetzt auch den Geist auf. Nichts funktioniert, was er mir gibt

und es gibt keine Tutorials im Internet, wie ich es richtig einfinde, Activecampaign hat dazu kein Tutorial und aus der Dokumentation bin ich dahingehend auch nicht schlau geworden.

Ich weiß nicht mehr weiter, wo ich noch suchen soll, allerdings kann ich auch nicht einfach so jetzt aufgeben. Ich habe sehr viel Zeit in diese Website gesteckt und meine Mutter ist nun quasi darauf angewiesen, dass ich sie fertig stelle.

Ich gehe auch nicht davon aus, dass Grundlagen von Javascript oder PHP mir in dem Zeitraum weiterhelfen werden, schließlich sind es ja eigentlich nur 10 Zeilen Code, die ich brauche, damit alles funktioniert.

Habt ihr Ahnung, an wen ich mich wenden kann, um das Problem zu lösen? ich möchte es halt unbedingt hinbekommen.

HTML, Webseite, JavaScript, PHP, Programmiersprache, Webentwicklung
5 Antworten
OpaSteve
02.08.2024, 11:10

Bootstrap, warum geht row-cols- nicht?

Warum funktioniert das hier mit row-cols-2 von Bootstrap:

<div class="container">
        <div class="row row-cols-2">
          <div class="col">Column</div>
          <div class="col">Column</div>
          <div class="col">Column</div>
          <div class="col">Column</div>
        </div>
      </div>

Dies hier aber nicht? Die zwei Elemente nimmt er hier nicht an, was übersehe ich?

<div class="container">
        <div class="row g-3 row-cols-2">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="card-link">Card link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>
HTML, Webseite, CSS, Webentwicklung, Bootstrap
1 Antwort
xXxNightmarexXx
31.07.2024, 20:54
Mit Links

Javascript Variablen ein/ersetzen - Matomo - Domain?

Moinsen,

ich bin dabei, mir ein Script für Multidomain Tracking zu bauen.
Also Cookies auf mehreren Domains setzen usw.
Das meiste funktioniert soweit wie erwartet.
Das Script soll dynamisch über Cloudflare Zaraz geladen werden.

Jetzt fehlt mir bis jetzt soweit nur noch das einsetzen der Session ID, die ich generiere und die Domain, die aktuell aufgerufen wurde.

In dem Code möchte ich gerne die Variable sessionID sowie die Variable Domain einsetzten lassen.
Wie kann ich das bewerkstelligen?

Ich bin leider nicht ganz so erfahren in Javascript.
Ich habe schon einiges getestet aber es will einfach nicht.

Die Sache ist die, dass es mit Vanilla JS laufen müsste. Also ohne extras usw.

Es soll halt nur JS per Cloudflare Zaraz eingebunden werden.

Der/Die beiden Code Bestandteile sind folgende:

Einmal der Matomo Tag Manager      

<!-- Matomo Tag Manager -->
<script>
  var _mtm = window._mtm = window._mtm || [];
  _mtm.push({'uid':+sessionID });
  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
  (function() {
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src='https://xyz.de/js/container_12345.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Tag Manager -->


Sowie der JS Tracker Code

var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
  _paq.push(["setCookieDomain" +DomainX]);
  _paq.push(["setDomains", ["*xyz.de"]]);
  _paq.push(["enableCrossDomainLinking"]);
  _paq.push(['setUserId', sessionID]);
  _paq.push(['enableHeartBeatTimer', 20]);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  _paq.push(['trackVisibleContentImpressions', true, 750]);
  (function() {
    var u="https://xyz.de/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'X']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img referrerpolicy="no-referrer-when-downgrade" src="https://xyz.de/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
Linux, HTML, Webseite, JavaScript, HTML5, Code, PHP, Programmiersprache, Script, Webentwicklung, Variablen, cloudflare
1 Antwort
SmartWatchAsker
31.07.2024, 11:48
Mit Bildern

Webdesign: Einfache Website erstellen (WordPress) - ohne Programmierkenntnisse möglich?

Hallo Community,

für unser Unternehmen möchte ich gerne eine einfache Website selbst erstellen.

.

Folgende Tabs möchte ich haben: Start - Über uns - Leistungen - Wissenswertes - Kontakt

Auf der Startseite möchte ich eine Slideshow von Bildern unserer Firma einfügen, bei Über uns Bilder von unserem Team, bei Leistungen eine Auflistung unsere Leistungen, bei Kontakt eben Kontaktmöglichkeiten inklusive Google Maps Location.

Und in der Fußzeile (die auf allen Seiten zu sehen ist) sollten nochmal allgemeine Informationen wie Kontakt, Adresse, Öffnungszeiten, google Maps, Impressum, Datenschutzerklärung zu sehen sein.

.

Alles in allem also eine sehr einfache basic Website. Trotzdem eine Herausforderung für mich, da ich kein Webdesigner bin. Ich möchte die Seite trotzdem selbst erstellen und sie nicht in Auftrag geben.

.

Ich frage mich deshalb, bzw frage euch Webdesign-Community, ob es einfach möglich ist, den Quellcode einer Muster-Website (oder den einer schon vorhandenen Website) zu nehmen und an den relevanten Stellen die eigenen Inhalte einzufügen.

Wenn ja, woher bekomme ich solche Muster und/oder wo sind Herausforderungen, wenn ich einfach eine vorhandene Website kopieren und die relvanten Inhalte (Namen, Texte, Bilder) austauschen möchte?

.

Bild zum Beitrag
Homepage, App, Online-Shop, HTML, Webseite, CSS, WordPress, JavaScript, Webdesign, Webentwicklung
5 Antworten
Nadine0006
09.07.2024, 13:53

PHP/Passwortvergleich: Warum kommt immer wieder eine Fehlermeldung?

Hallo!

Ich will ein Passwort, das eingegeben wird, vergleichen. Doch es kommt immer wieder diese Fehlermeldung:

Eingegebenes Passwort: n1234
admin:238 Benutzername: nadine
admin:242 Uncaught ReferenceError: form is not defined
  at validatePassword (admin:242:18)
  at HTMLButtonElement.onclick (admin:161:100)

Der Code im AdminController sieht so aus:

public function validatePassword(Request $request, $userName) {
  try {
    $password = $request->input('password');

    // Benutzer anhand des Benutzernamens finden
    $user = User::where('username', $userName)->first();

    // Debugging-Informationen in das Log schreiben
    \Log::info('Benutzername: ' . $userName);
    \Log::info('Benutzer gefunden: ' . ($user ? 'Ja' : 'Nein'));

    if (!$user) {
      return response()->json(['valid' => false, 'message' => 'Benutzer nicht gefunden']);
    }

    // Überprüfen, ob das gespeicherte Passwort im Bcrypt-Format ist
    $passwordInfo = password_get_info($user->password);
    \Log::info('Passwort-Algorithmus: ' . $passwordInfo['algoName']);

    if ($passwordInfo['algoName'] !== 'bcrypt') {
      return response()->json(['valid' => false, 'message' => 'Das gespeicherte Passwort verwendet nicht den Bcrypt-Algorithmus.']);
    }

    // Passwortüberprüfung
    $passwordCheck = Hash::check($password, $user->password);
    \Log::info('Passwort korrekt: ' . ($passwordCheck ? 'Ja' : 'Nein'));

    if ($passwordCheck) {
      return response()->json(['valid' => true]);
    }
    else {
      return response()->json(['valid' => false, 'message' => 'Ungültiges Passwort']);
    }
  }
  catch (\Exception $e) {
    \Log::error('Fehler bei der Passwortvalidierung: ' . $e->getMessage());
    return response()->json(['valid' => false, 'message' => 'Serverfehler. Bitte versuchen Sie es später erneut.'], 500);
  }
}

Und im admin blade so:

function showPasswordModal(route, userName) {
  console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
  $('#passwordModal').modal('show');
  $('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
  $('#passwordForm').data('userName', userName);
  console.log(userName);
}

function validatePassword() {
  console.log('validatePassword() wurde aufgerufen');
  var enteredPassword = document.getElementById('passwordInput').value;
  var userName = $('#passwordForm').data('userName');
  console.log('Eingegebenes Passwort:', enteredPassword);
  console.log('Benutzername:', userName);

  $.ajax({
    type: 'POST',
    url: form.action,//$('#passwordForm').attr('action'), // Stellen Sie sicher, dass dies die richtige Route ist
    data: {
      '_token': '{{ csrf_token() }}',
      'password': enteredPassword
    },
    success: function(response) {
      console.log('Server-Antwort:', response);

      if (response.valid) {
        $('#payForm').submit();
      }
      else {
        alert(response.message || 'Falsches Passwort! Bitte versuche es erneut.');
      }
    },
    error: function(xhr, status, error) {
      console.error('AJAX-Fehler:', error);
      alert('Fehler beim Validieren des Passworts. Bitte versuche es später erneut.');
    }
  });

Warum kommt immer wieder eine Fehlermeldung? Ich habe schon alles probiert und das schon seit Stunden! Danke.

HTML, JavaScript, Code, PHP, Programmiersprache
1 Antwort
dieTrolle
05.07.2024, 11:15

Dropdown auf iMac funktioniert nicht, wasmuss ich ändern?

Ich habe ein Dropdown-Menü erstellt, welches auch auf allen von mir getesteten Browsern funktioniert ( Firefox, Chrome, Edge, Opera, Vivaldi, Tor). Nun bekam ich die Rückmeldung: Funzt NICHT auf Safari. Habe mir die URALT Version von Safari für Windows heruntergeladen; Das Ergebnis ist katastrophal null Reaktion auf Auswahl!

Habe den Quelltext aus dem Internet und nur meinen Bedürfnissen angepasst.

css

#menu,#menu ul{list-style:none;padding:0;}
#menu li{margin:5px 10px;}
#menu a{text-decoration:none;outline:none;display:block;color:#777;padding:5px 14px}
#menu a:hover,#menu a:focus{color:black; background:orange;}
#menu .hider{overflow:hidden}
#menu .sub ul{margin-top:-200%;transition:.5s;-webkit-transition:.5s}
#menu .sub a:focus ~ .hider > ul,#menu ul:hover{margin-top:0;}

ul {
   max-width: 12em;
}

ul ul {
   max-width: 12em;
   border: 2px solid orange;
}

ul ul ul{
   max-width: 12em;
   border: 2px solid green;
}
//ul ul ul:hover {background-color:white;}

ul ul li {
   background-color: Gainsboro;
   margin: 2px;
   z-index:1;
}

php

<ul id="menu">
   <li class="sub"><a href="#">Select Order by</a>
      <div class="hider">
         <ul>
            <li><a href="image_1.php";>Listing</a></li>
            <li><a href="image_self.php";>Own Selection</a></li>
            <li class="sub"><a href="#">Inventory No.</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php";>Numerical</a></li>
                     <li><a href="image_from.php">from - to</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Title</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Title">Alphabetical</a></li>
                     <li><a href="title_from.php">Letter Selection</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Art Typ</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=ArtTyp">Alphabetical</a></li>
                     <li><a href="art_from.php">Selected</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Art Series</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Category">Alphabetical</a></li>
                     <li><a href="cat_from.php">Selected<br>Search in all Entries</a></li>
                     <li><a href="series_from.php">  Selected<br>Search in Art Series Menu<a><li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Media</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Medium">Alphabetical</a></li>
                     <li><a href="media_from.php">Selected</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Dimension</a>
               <div class="hider">
                  <ul>
                     <li><a href="dim_from.php?dim=height">height<br>from - to</a></li>
                     <li><a href="dim_from.php?dim=width">width<br>from - to</a></li>                           
                 </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Exhibition</a>
               <div class="hider">
                  <ul>
                     <li><a href="exhibition.php?Time=now">Currently on Display</a></li>
                     <li><a href="exhibition.php?Time=all">All Artworks<br>Order by Exhibitors</a></li>
                     <li><a href="aussteller.php">Selected<br>by Exhibitor</a></li>                           
                  </ul>
               </div>
            </li>
         </ul>
      </div>
   </li>
   <li class="sub"><a href="#">Image Info</a>
      <div class="hider">
         <ul>
            <li><a href="image_info.php">all</a></li>
            <li><a href="image_infrom.php">from - to</a></li>                  
         </ul>
      </div>
   </li>
</ul>

Was muss ich wie ändern oder ergänzen damit es auch auf dem iMac / Safari läuft? Wie oben gesagt alle anderen Browser einwandfrei!

HTML, Webseite, CSS
1 Antwort
JanMarcel01
04.07.2024, 19:54
Mit Links

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
1 Antwort
melisax795
03.07.2024, 11:19
Mit Bildern

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Bild zum Beitrag
HTML, Webseite, JavaScript, Webentwicklung, React, node.js
2 Antworten
Dungeoneer
01.07.2024, 15:23

CSS Klassen mit Javascript ändern?

Hallo!

Obwohl ich schon etwas Erfahrung mit CSS und Javascirpt habe, bin ich gerade das erste mal auf folgendes Problem gestoßen:

Ich habe für eine Website im Kopf in einem <style> - Bereich einige Klassen definiert.
(z.B.:
.header { border:1px outset gray; margin:.5em; padding:.5em; border-radius: 50%; height: 8%; width: 90%; }
und unten im body dann:
 <div class="header">)
Den Stil dieser Klassen will ich durch Javascript dynamisch ändern.
Javascript soll also nicht den style von einzelnen HTML-Elementen ändern, und auch nicht HTML-Elementen neue Klassen zuweisen. Vielmehr soll der Stil der Klasse direkt geändert werden, so daß sich die Änderung auf alle Elemente dieser Klasse auswirkt.

Konkret möchte ich das Layout dynamisch an die Größe des Browserfensters anpassen. Ein onResize Eventhandler im Body löst eine Javascript-Funktion aus, die entsprechende Änderungen im Layout vornimmt. Dabei wäre es natürlich praktisch, wenn man ähnlich aussehende Elemente (= gleiche class = gleicher CSS-style) auch zusammen anpassen könnte, und zwar auch mit errechneten Werten (z.B. Math.floor(clientHeight / 2)).

Habe lange gegoogelt und auf den üblichen Plattformen gesucht, habe aber immer nur Anleitungen gefunden, wie man Elementen neue Klassen zuweist.

Im Moment löse ich das Problem mit einer for-Schleife:
const AllHeaders = document.getElementsByClassName("header");
for (let i = 0; i < AllHeaders.length; i++) {
var Radius = Math.floor(AllHeaders[i].clientHeight / 2)
AllHeaders[i].style.borderRadius = Radius.toString() + "px";
}
und so weiter, für alle Klassen einzeln.
Das kann irgendwie doch nicht die beste Lösung sein...
Es muß doch eine Möglichkeit geben, auf die Klassen-Definitionen im Stylesheet mit Javascript zuizugreifen. Ansonsten wäre die Funktionalität von CSS doch stark eingeschränkt.

Hoffe, jemand kennt sich aus...

HTML, CSS, JavaScript, Webentwicklung
4 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
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
2 Antworten
verreisterNutzer
19.06.2024, 23:08

Bashskript Problem?

Ich habe hier ein Bashskript, welches Dateien überwacht (noch nicht vollständig und absolut unoptimiert). Ich weiß, dass es Tools gibt, aber es ist ein Projekt für die Uni und deshalb ist Optimierung und Effizienz nicht wirklich wichtig. Ich möchte damit die Grundlagen des Shellscriptings einfach etwas lernen.

Das ist bisher das Script:

#!/bin/bash


echo "Das Skript wurde gestartet. Der Typ Ihres Betriebssystem ist "\"$OSTYPE\""."


# If-Abfrage, die das Betriebssystem erkennt und den Pfad zum überwachten Ordner oder Datei festlegt # HIER BITTE DIE PFADE ZUM ZU ÜBERWACHENDEN ORDNER EINTRAGEN   
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
    BASE_DIRECTORY=" " # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = Linux
elif [[ "$OSTYPE" == "darwin"* ]]; then
    BASE_DIRECTORY="/Users/name/Library/CloudStorage/GoogleDrive-email@gmail.com/Meine Ablage/Uni/TestOrdner" # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = MacOs
elif [[ "$OSTYPE" == "win32" || "$OSTYPE" == "msys" || "$OSTYPE" == "cygwin" ]]; then
    BASE_DIRECTORY="/g/Meine Ablage/Uni/TestOrdner" # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = Windows
else    
    echo "Das Betriebssystem ist unbekannt." # Wenn das Betriebssystem unbekannt ist, wird eine Fehlermeldung ausgegeben
    exit 1
fi


DIRECTORY="$BASE_DIRECTORY" # Pfad zum Ordner
FILE="$BASE_DIRECTORY/Datei.txt" # Pfad zur Datei   
FILE2="$BASE_DIRECTORY/Datei2.txt" # Pfad zur Datei2 


cd "$BASE_DIRECTORY" || {
    echo "Wechsel zu $BASE_DIRECTORY fehlgeschlagen!" # Wechselt in den TestOrdner oder gibt eine Fehlermeldung aus
    exit 1;
}



# Funktion, um zu überprüfen, ob Dateien gelöscht wurden
checkIfDeleted() {
    if [ ! -f "$FILE" ]; then 
        echo "Die Datei \"$(basename "$FILE")\" wurde gelöscht, umbenannt oder verschoben."
    elif [ ! -f "$FILE2" ]; then
        echo "Die Datei \"$(basename "$FILE2")\" wurde gelöscht, umbenannt oder verschoben."
    elif [ ! -d "$DIRECTORY" ]; then
        echo "Der Ordner \"$(basename "$DIRECTORY")\" wurde gelöscht, umbenannt oder verschoben."
    fi
}


# Speichert den "ursprünglichen" Hash-Wert der Dateien
ORIGINAL_HASH=$(md5 -q "$FILE")
ORIGINAL_HASH2=$(md5 -q "$FILE2")


checkIfEdited() {
    if [ ! -f "$FILE" ]; then # Wenn $FILE nicht existiert, dann wird das Skript hier beendet
    return
    fi


    if [ ! -f "$FILE2" ]; then # Wenn $FILE2 nicht existiert, dann wird das Skript hier beendet
    return
    fi


    if [ ! -d "$DIRECTORY" ]; then # Wenn $DIRECTORY nicht existiert, dann wird das Skript hier beendet
    return
    fi


    # Berechnet den aktuellen Hash-Wert der Dateien
    CURRENT_HASH=$(md5 -q "$FILE")
    CURRENT_HASH2=$(md5 -q "$FILE2")


    # Hash-Werte werden verglichen
    if [ "$CURRENT_HASH" != "$ORIGINAL_HASH" ]; then
        echo "Die Datei \"$(basename "$FILE")\" wurde bearbeitet."
        # Ursprünglicher Hash-Wert wird für zukünftige Überprüfungen aktualisiert
        ORIGINAL_HASH="$CURRENT_HASH"
    elif [ "$CURRENT_HASH2" != "$ORIGINAL_HASH2" ]; then
        echo "Die Datei \"$(basename "$FILE2")\" wurde bearbeitet."
        # Ursprünglicher Hash-Wert wird für zukünftige Überprüfungen aktualisiert
        ORIGINAL_HASH2="$CURRENT_HASH2"
    fi
}


while true; do # Endlosschleife, die die Funktionen "checkIfDeleted" und "checkIfEdited" alle 10 Sekunden ausführt
    checkIfDeleted
    checkIfEdited
    sleep 10
done

Ja, ich weiß, welche Probleme das Skript mit sich bringt, aber ich habe ein anderes Problem:

Wenn jemand das Skript nutzen möchte, muss er die Pfade seiner Dateien einfügen und sogar neue Variablen definieren.

Man könnte das doch so machen, dass das Skript die Liste des Ordners einliest und dann auf alle Dateien direkt zugreifen muss, ohne dass man sie in das Skript einfügen muss.

Also irgendwie mit dem Befehl "ls". Ich weiß aber nicht, wie ich das implementieren soll.

Kann mir wer helfen bitte?

Visual Basic, Linux, HTML, Webseite, VBA, Bash, Batch, cmd, Code, lua, MySQL, PHP, Programmiersprache, Python, Script, Python 3
3 Antworten

Meistgelesene Beiträge zum Thema HTML
Mehr meistgelesene Fragen zu HTML