HTML5 – die besten Beiträge

Hoffentlich kann mir hier jemand weiterhelfen.

Ich möchte ein ausfahrbares Seitenmenü mit einem Hamburger-Button (Font Awesome) konstruieren.

Im unteren Bild sieht man meinen momentanen Stand. Ich möchte aber, das von seitlich rechts das Menü hineinschwebt.

Zur Zeit habe ich Folgendes:

<nav role="main-navigation" aria-label="site" id="main-navigate" class="main-navi">
  <button aria-expanded="undefined"></button>
  <ul id="navlinks">
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Blog Max Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 1-B</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Blog Erika Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-B</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 2-C</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Website Erika Mustermann</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 3-A</a>
      </div>
    </li>
    <li class="sub-menue">
      <a class="a-link" href="/test/public/Testseite2-2.html">Impressum / Datenschutz</a>
      <button aria-expanded="undefined"></button>
      <div class="nav-group">
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-A</a>
        <a class="a-sublink" href="/test/public/Testseite2-2.html">UNTERMENUE 4-B</a>
      </div>
    </li>
  </ul>
</nav>

Da mein Post zu lang wird, hier ein Downloadlink des JS, CSS und HTML: LINK wieder gelöscht!

Könnte bitte jemand mir dabei helfen, dies zu entwickeln? Ein rudimentäres CodePen-Beispiel würde mir helfen.

Hallo,

wie kann man in HTML scrollen, allerdings nicht nach unten gehen, sondern nur z. B. eine Farbe ändern? Wie bei Apple.

LG

Hallo, ich habe mit Html css und JS eine Website erstellt. Jetzt müsste ich eine Domain kaufen. Jedoch ist die Website nur für einen Geburtstag, spätestens nach einem Monat würde ich sie eh wieder offline nehmen. Wie mache ich das am kostengünstigsten? Was brauche ich sonst noch damit die Website steht?

Halli Hallöle

ich wollte mal fragen, ob es möglich ist, ein Background-Video (HTML/CSS) mit Sound auf einer Website zu haben.

bisher konnte ich nur den code:

„autoplay loop muted“

finden, wobei das Video allerdings dann stumm ist.

Würde mich auf eine Antwort freuen 🙏✨

Danke schon im voraus

Ohne Javascipt/CGI anzuwenden, ohne "inline"

Ich weis, meine Tag-Liste schaut gruselig aus, ich weis, man sollte so einiges verbessern. Ich weis, auf PHP-Basis bzw Worlpress kann man vieles vereinfachen, aber das ist z.Zt. nicht aktuell.

Mich stoert dieses ganz besonders:
Hab ich einen Link in der Linkliste veraendert, muss ich das auf jeder Seite einzeln veraendern (copy & paste). Im NotePad gehts am schnellsten. Hab mal irgendwo gelesen, mit CSS soll das irgendwie unproblematischer gehen, mit nur einer html-Linkliste, die dann irgendwie auf allen Seiten eingebunden wird.

Doch finde ich die genauen Tag-Daten dazu nicht wieder, brauch eure Hilfe.

Ich arbeite mit einem Linux-Laptop (Ami-Tastatur) und ueber Wine mit NVU-Editor.
Bin eigentlich Elektriker und hab mit html wenig am Hut.
In meinem Profil ist die URL angegeben.

Also Folgendes: ich hab hier ein PHP-Formular mit einem Eingabefeld und einem Submit Button, dass die eingegebenen Werte an eine bestimmte URL sendet. (Das ist erstmal simpel) Ich habe auch herausgefunden, wie man die URL z.b mit einer Zahlenfunktion variieren kann. Auch das geht relativ leicht. Was hingegen scheinbar weniger einfach ist: Ich würde das Action Attribut, also die URL, wo die Eingaben hingesendet werden nun gerne über einen HTML-Schalter z.b Checkbox dynamisch & in Echtzeit ändern. z.b Checkbox aktiv = Daten werden an URL2 gesendet, Checkbox nicht aktiv = Daten werden an URL1 gesendet. Oder es soll einfach ein URL-Zusatz hinzugefügt werden, je nachdem ob die Checkbox aktiv ist oder nicht. Meine jetzt ganz blöde Frage: Wie oder mit welchem Ansatz kann das funktionieren? Ich habe da jetzt bereits XX Stunden rumprobiert: Normale Variablen mit Conditions definieren, Sessions starten, der Versuch ein Cookie zu setzen, dass beim Ein und Ausschalten der Checkbox gesetzt bzw. gelöscht werden soll (klappt nicht). Mit JS Codeschnipseln herumprobiert. Nichts davon scheint zu funktionieren bzw. es wird einfach immer der Zustand "checkbox unchecked" an URL1 gesendet.

Hat irgendeiner mit Ahnung ne Idee wieso das nicht funktioniert und ob es einen lösbaren Ansatz für dieses Problem gibt?

Also, ich kann HTML, CSS und die Programmiersprache JavaScript relativ gut. Aber das habe ich eher aus Disziplin statt Spaß gelernt.

Ich habe mich etwas mehr damit befasst.

Es gibt ja Deadlines, also Zeiten, wo man mit einem Projekt fertig sein muss und das stelle ich mit stressig vor.

Fazit: Ich will nicht viel Stress und habe das alles eher aus Disziplin statt aus Spaß gelernt.

Sollte ich es lieber sein lassen?

Hi, ich habe an einen Spezialisten eine Frage:

import Order from './Order.js';
import ArticleModel from './ArticleModel.js';

export default function UserOrderViewHandler(articleModel) {
  this.articleModel = articleModel;
  this.order = new Order(-1, null, [], 0, 0, 0, 0, 0, false);
}

UserOrderViewHandler.prototype.renderPage = function() {
  let body = document.getElementsByTagName('body')[0];
  body.innerHTML = "";
  body.innerHTML = `<div class="container">
    <sidebar>
      <h1 class="mb-4">Unser Sortiment</h1>
      <div id="articleList">
        <div class="row space-between">
          <div class="col-md-4 mb-4">
            <div class="card" data-index="0">
              <div>
                <h2>Salamipizza</h2>
                <p>Halbe hausgemachte Pizza mit Käse und regionaler Salami</p>
                <p><strong>6.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="1">
              <div>
                <h2>Hamburger</h2>
                <p>Burger mit österreichischem Rindfleisch, Ketchup und Senf</p>
                <p><strong>6.00 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <div class="card" data-index="2">
              <div>
                <h2>Wochenmenü</h2>
                <p>Frittatensuppe --- Spaghetti Bolognese --- Muffin</p>
                <p><strong>12.50 €</strong></p>
                <button class="addBtnClss btn btn-primary">Artikel hinzufügen</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </sidebar>
    <sidebar>
      <h1 class="mb-4 extramargin">Bestellung</h1>
      <ul id="order"></ul>
      <div class="form-group">
        <label for="pickupTime">Gewünschte Abholzeit:</label>
        <input type="time" id="pickupTime" class="form-control">
      </div>
    </sidebar>
  </div>`;
}

UserOrderViewHandler.prototype.renderOrder = function() {
  let orderElement = document.getElementById('order');
  orderElement.innerHTML = "";
  orderElement.className = "list-group";

  let i = 0;

  for (let article of this.order.articleList) {
    let articleElement = document.createElement('li');
    articleElement.className = "list-group-item d-flex justify-content-between align-items-center";
    articleElement.innerHTML = `
      <div>1 x ${article.name} &emsp; &emsp; &emsp;${article.price.toFixed(2)} €</div>
      <button class="delBtn btn btn-danger btn-sm" data-index="${i}">Entfernen</button>
    `;
    orderElement.appendChild(articleElement);
    i++;
  }
}

UserOrderViewHandler.prototype.bindAddBtn = function() {
  let buttons = document.getElementsByClassName('addBtnClss');
  const that = this;

  for (let button of buttons) {
    button.addEventListener('click', function() {
      let index = this.closest('.card').getAttribute('data-index');
      let article = that.articleModel.getByIndex(index);

      if (article) {
        that.order.addArticle(article);
        that.renderOrder();
      }
    });
  }
}

UserOrderViewHandler.prototype.bindDeleteBtn = function() {
  let orderElement = document.getElementById('order');
  orderElement.addEventListener('click', function(event) {
    if (event.target.classList.contains('delBtn')) {
      let index = event.target.getAttribute('data-index');
      that.order.deleteArticle(index);
      that.renderOrder();
    }
  });
}

1. Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?
2. Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:

Danke für die Hilfe.

Welche Variante bevorzugt ihr?

Guten Abend liebe Community,

ich bin gerade dabei mein Geschäft zu digitalisieren bzw. eine Webseite zu bauen. Jetzt wird mir von den verschiedenen Anbietern, die Webseiten im Baukasten Format anbieten, gesagt, mit Abo XY 5000 CMS Elemente inkludiert.

Was kann man sich darunter vorstellen als Laie. Werde ich bspw. nach 4 erstellten Unterseitenseiten dann begrenzt, weil meine Elemente ausgegangen sind?

Ich muss jemanden einlernen und habe damit tatsächlich nicht wirklich viel Erfahrungen.

Aktuell festigen wir erstmal absolute Basics in HTML, CSS, Javascript.

Ich bin aber am überlegen ob ich ihm ein "größeres" Projekt gebe das er selbst umsetzen soll. Natürlich kann er jederzeit Fragen etc.

Nur lerne ich persönlich an besten, wenn ich ein klares Projekt habe das ich umsetzen soll. Da eignet man sich dann eben alles an was man zur realisierung benötigt.

Ich dachte als ersten Schritt vielleicht an sowas wie ein Schachspiel oder ähnliches.

Einfach damit er genau weiß was er programmieren soll und eben learning by doing betreibt.

Glaubt ihr so eine herangehensweise ist die richtige?

Ihn direkt an die Software unseres Betriebs zu lassen, würde ihn vermutlich "erschlagen".

Entsprechend wäre es evtl. besser eben etwas "spielerisch" zu starten.

Also, was meint ihr?

Gerne auch andere Ratschläge. Bin quasi offen für alle vorschläge.

Wie wurde dieser text zentriert bzw. wie kann ich es über css tun?

Ich bin neu in den Webentwicklung kann mir da jemand auf die Sprünge helfen?

Hallo, ich suche einen KOSTENLOSEN Website Creator der so Websiten erstellt wie Google Sites, nur vielleicht mit ein paar mehr Funktionen wie Plugins, Anpassungen und einem Warenkorb

danke im voraus

HTML und CSS und JavaScript kann ich .

Soll ich noch Photoshop lernen?

Welche Ausbildung eignet sich da am besten?

so wie hier hat da jemand einen code oder so?

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>   

Guten Morgen zusammen,

Ich hatte in meinem Web-Projekt in meiner index.html ein Stylesheet verlinkt, in welchem ich u. a. im :root Variablen (user properties) deklariert habe, welche weiter unten in der Datei verwendet wurden. Da die Datei aber ziemlich lang geworden ist, habe ich diese nun in vier Sylesheets aufgeteilt (general, header, main, footer). In der general.css datei werden z. B. body und html gestylet und im :root Variablen (user properties) definiert.

Diese Variablen sind bereits im header{} (in der header.css) benutzt worden, nur eben jetzt in einem neuen Stylesheet. Wenn ich diese in der general.css ändere, werden diese Änderungen auch in der header.css übernommen. Doch wenn ich im :root (general.css) eine neue Variable deklariere, wird sie mir in der header.css nicht angezeigt...

Weiß von euch jemand Rat oder sehe ich den Wald vor lauter Bäumen mal wieder (😉) nicht?

Liebe Grüße

PS: ich benutze VS-Code als Editor

Hallo!

Ich habe die Google Übersetzer Website und eine andere Website zu meinem Startbildschirm hinzugefügt. Bei Google Übersetzer wird das ganze geöffnet wie eine App und in der Appübersicht wird Web-App angezeigt. Die andere Website wird einfach in Chrome geöffnet und in der Appübersicht steht Chrome.

Meine Frage ist, wie schaffe ich es meine Website auch so zu einer Web-App zu machen?

moin bin dabei java script zu lernen und habe probleme mit der index.html datei. Mein script wird auf der seite nicht ausgeführt und folgende problemschilderung wird angezeigt: