Webdesign – die neusten Beiträge

HTML/CSS: Wie mache ich Abstände zwischen "div container"?

Hallo zusammen,

ich bin auf Arbeitssuche und arbeite an einer "Projektseite" für meine Bewerbung. Das ganz große Problem ist, dass ich nichts mit Webdesign am Hut habe. Ich hatte zwei Monate lang einen Basickurs belegt aber nun muss ich diese Seite machen, weil ich sie für Bewerbungsgespräche brauche. (Ich will da meine Blogbeiträge vorstellen, bin Texterin)

Das Problem: Ich arbeite nur mit HTML/CSS also kein Java oder so. Ich mache eine Blogseite (bzw. mehrere Seiten).

In der Mitte der Seite steht (mittig) ein div class= "blog-page-container" dort steht eben mein Blogbeitrag und ich möchte von diesem Beitrag aus, auf der rechten Seite, einen Kasten erstellen, wo dann kurze Zusatzinfos stehen. Dieser Kasten ist aktuell eine div class = "sidebar". Auf dem Foto kann man das sehr schön erkennen.

Meine Frage lautet also: Wie kann dieser Infokasten ganz leicht nach rechts geschoben werden und so mit Abstand zu meinem Blogbeitrag stehen, ohne dass der Kasten komplett rechts klebt? Der Infokasten soll eben rechts sein aber nicht ganz am Rand der Webseite sondern nur etwas weiter vom Blogbeitrag weg. Ich will eben diese Textblöcke hier auf dem Foto voneinander trennen aber so, dass der Textblogbeitrag in genau der gleichen Position bleibt. Der dünne Kasten rechts soll nur verschoben werden aber da ich gerade nicht weiterkomme, wollte ich fragen wie das geht.

Das steht gerade im HTML body, main:

<div class="blog-page-container">
 <div class="blog-content">
  <h1>Blogtitel: Mein erster Blogeintrag</h1>
  <p><strong>Lorem Ipsum Lorem</strong> Lorem ipsum dolor sit amet, copraesent...</p>
 </div>
 <div class="blog-right-gap"></div>
 <div class="blog-info-sidebar">
  <h2>Infos & Werbung</h2>
  <p>Hier steht was über dich, Werbung, Links, etc.</p>
 </div>
</div>

Und das im CSS:

/* Haupttext */
.blog-content {
 flex: 3;
 padding: 40px;
}
/* Abstand zum Recht */
.blog-right-gap {
 width: 20px;
}
/* Weiße Infospalte ganz rechts */
.blog-info-sidebar {
 flex: 1;
 background-color: white;
 padding: 20px;
 border-left: 1px solid #ffb6c1;
 margin-right: 20px;
}
/* Responsiv auf kleinen Bildschirmen */
@media (max-width: 1024px) {
 .blog-page-container {
  flex-direction: column;
  max-width: 95%;
  margin: 20px auto;
 }
 .blog-right-gap {
  display: none;
 }
 .blog-info-sidebar {
  margin-right: 0;
  border-left: none;
  border-top: 1px solid #ffb6c1;
 }
}
.blog-content p {
 font-size: 1.1rem;
 line-height: 1.7;
 margin-bottom: 1.2rem;
 max-width: 70ch;
}
.blog-content h2 {
 line-height: 1.3;
 margin-bottom: 1em;
}
/* Textblock exakt unter das Bild setzen */
.blog-content {
 padding-left: 0 !important;
 margin-left: 0 !important;
}

Wie gesagt, ich bin nicht vom Fach und habe auch mit KI gearbeitet also würde mich freuen, wenn jemand eine Lösung hat.

Danke im Voraus.

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend, Visual Studio Code

HTML Website - Kontaktformular zurücksetzen nach Abschicken?

Hallo zusammen,

ich will, dass mein Kontaktformular nach dem Abschicken wieder zurückgesetzt wird mithilfe von Javascript. Leider kenne ich mich mit Javascript null aus und ChatGPT findet hierfür auch kein Skript, dass bei mir funktioniert (oder ich bin einfach zu dumm das korrekt im html Code einzufügen )

Folgend die HTML-Seite dazu. (Head hab ich weggelassen, da sonst zu viele Zeichen)

    <body>
        <header>
            <h1>
                <div class="logo">
                    <a href="index.html"><img src="bilder/Logo_Tierhilfe.png"></a>
                </div>
                Tierhilfe Europa e.V. - Mitglied werden
            </h1>


            <nav>
                <ul>
                    <li><a href="index.html">Startseite</a></li>
                    
                    <li><a href="ueber-uns.html">Über uns</a></li>
                        
                    <li class="dropdown">
                        <a href="unterstuetzung.html">Unterstütze uns</a>
                            <ul class="dropdown-content">
                                <li><a href="mitglied_werden.html">Mitglied werden</a></li>
                                <li><a href="spenden.html">Spenden</a></li>
                            </ul>
                    </li>
                </ul>
            </nav>
        </header>
        
        <main class="background">
            <div class="container">
                <h3>Mitglied werden - jetzt registrieren</h3>
                <h6>*Pflichtfelder</h6>
                <br>
                <div class="aufzaehlung">
                    <form>
                        <label for="mail">*E-Mail:</label>
                            <input type="email"name="input_mail_field"id="mail" required>
                                <br>


                        <label for="username">*Benutzername:</label>
                            <input type="text"name="input_username_field"id="username" required>
                                <br>


                        <label for="birthday">Geburtsdatum:</label>
                            <input type="date"name="input_birthday_field"id="birthday">
                                <br>


                        <label for="password">*Passwort:</label>
                            <input type="password"name="input_password_field"id="password" required>
                                <br>


                        <label for="confirmpassword">*Passwort bestätigen:</label>
                            <input type="password"name="input_confirm_password_field"id="confirmpassword" required>
                                <br>


                        <label for="sex">Geschlecht: </label>
                            <select type="select" name="input_sex_field" id="sex">
                                <option>keine Angabe</option>
                                <option>Männlich</option>
                                <option>Weiblich</option>
                            </select>
                                <br>


                        <label for="checkdataprotection">*Ich akzeptiere die <a href="datenschutz.html">Datenschutzbestimmungen von Tierhilfe Europa e.V.: </a></label>
                            <input type="checkbox" name="check_data_protection" id="checkdataprotection" required>
                                <br>
                                <br>
                                <br>


                        <input type="reset" name="reset_field" id="reset" value="Zurücksetzen">
                        <input type="submit" name="submit_field" id="submit" value="Absenden">
                                <br>
                    </form>
                </div>
            </div>
        </main>


<script>
    const form = document.querySelector("form");


    form.addEventListener("submit", function(event) {
        event.preventDefault(); // verhindert echtes Absenden


        alert("Vielen Dank! Dein Formular wurde erfolgreich abgeschickt. Du erhältst in Kürze eine Bestätigung per E-Mail von uns.");


        // Wichtiger Trick, damit das Reset nach dem Alert wirklich ausgeführt wird
        setTimeout(() => {
            form.reset();
        }, 0);
    });
</script>


        <a title="Zurück nach oben" class="back-to-top" href="#top">&#8593</a>



        <footer>
            <p>&copy; 2025 Tierhilfe Europa e.V. </p>
            <a href="datenschutz.html">Datenschutz</a>
            <a href="impressum.html">Impressum</a>
        </footer>


    </body>
        
</html>

Hat jemand von euch einen Tipp, wie ich das mit Javascript machen muss, damit das Formular nach dem Absenden automatisch zurückgesetzt wird?

Sonstige Tipps zu meinem HTML nehme ich auch dankend an. :-)

Liebe Grüße

HTML, Webseite, Programmiersprache, Webdesign, Webentwicklung

Bei CSS "display: flex;" wird alles schief warum?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <!-- stylesheet -->
   <link rel="stylesheet" href="styles.css">
   <!-- Boostrap Icon -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
</head>
<body>
  <div class="container">
    <!-- Create Account -->
     <div class="sign-up">
      <div class="sign-up-container">
        <h3>Create account</h3>
        <div class="cs-form-group">
          <label for="Email">Email</label>
          <input type="email" class="cs-form-control">
        </div>
      </div class="cs-form-group">
        <label for="password">Password</label>
        <input type="password" name="" id="" class="cs-form-control">
      </div>
      <div class="cs-form-control">
        <button class="cs-form-submit">Create Account</button>
      </div>
      <span class="divider"></span>
      <div class="cs-form-group">
        <button class="social-login">
          <span class="social-icon">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/2048px-Google_%22G%22_logo.svg.png" alt="" style="width: 20px;">
            
          </span>
          Create using Google Account
        </button>
      </div>
      <p>Already have an account?<a href="#"> Login</a></p>
     </div>
  </div>
     <!-- Login -->
     <div class="login">
     </div>
     <!-- Forgot Password -->
      <div class="forget-password">
      </div>
  </div>
  
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

.container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #F5F5F5;
}

.sign-up{
  position: relative;
  padding: 10px;
  width: 420px;
}

.sign-up-container{
  position: relative;
  background: #F5F5F5;
  padding: 24px 20px;
  border: 1px solid #D4D5D8;
  box-shadow: 0px 1px 2px rgba(152, 152, 152, 0.2);
}

.sign-up-container h3{
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.cs-form-group{
  display: block;
}
HTML, Webseite, CSS, Code, Programmiersprache, Webdesign

JavaScript: Wie kann ich eine große Tabelle schneller sortieren?

Hallo zusammen,

ich habe eine große Tabelle in meiner ASP.NET Core Razor Pages Anwendung, die ich clientseitig mit JavaScript sortieren möchte.

Allerdings dauert die Sortierung bei einer großen Datenmenge zu lange, und ich suche nach einer performanten Lösung.

Meine aktuelle Implementierung:

Ich nutze Array.sort() und vergleiche Strings und Zahlen entsprechend, das funktioniert aber das ist nicht effizient genug.

Besonders wenn die Tabelle viele Zeilen (z. B. >10.000) hat, wird die Sortierung langsam.

Meine Anforderungen:

✅ Die Sortierung muss komplett in JavaScript (clientseitig) erfolgen

✅ Sie muss sowohl Texte (Strings mit Umlaute, Sonderzeichen, etc.) als auch Zahlen (inkl. Währungen mit €) schnell sortieren

✅ Die Tabelle wird nachträglich dynamisch mit Daten befüllt (also keine initiale Sortierung im Backend möglich)

✅ Die Lösung soll sehr schnell auch bei großen Datenmengen sein

Ich habe bereits probiert:

❌ Array.sort() (wird langsam bei vielen Zeilen)

❌ localeCompare() (korrekt für Strings, aber langsam)

❌ TypedArrays für Zahlenwerte (bringt nicht genug Speed)

Gibt es eine bessere Möglichkeit, eine HTML-Tabelle performant zu sortieren?

Vielleicht mit Web Worker, einer anderen Datenstruktur oder anderen Algorithmen?

oder gibt es andere Funktionen/Möglichkeiten, die ich noch probieren kann?

hier mein aktueller Ansatz:

Tabelle:

    <div class="col-lg-9 col-md-7 col-12">
      <div class="table-container">
        <table class="table-modern table-hover w-100" id="statistikTable">
          <thead>
            <tr>
              <th onclick="sortTable(0, this)">Datum <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(1, this)">PID <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(2, this)">Nachname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(3, this)">Vorname <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(4, this)">Rechnungsnetto <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
              <th onclick="sortTable(5, this)">Belegnummer <img class="sort-icon" src="/img/dgvsort.png" style="display: none;"></th>
            </tr>
          </thead>
          <tbody>
            @if (Model.StatistikData != null && Model.StatistikData.Rows.Count > 0)
            {
              foreach (DataRow row in Model.StatistikData.Rows)
              {
                <tr>
                  <td>@(((DateTime)row["Datum"]).ToString("dd.MM.yyyy"))</td>
                  <td>@row["PID"]</td>
                  <td>@row["KundeNachname"]</td>
                  <td>@row["KundeVorname"]</td>
                  <td>@Convert.ToDecimal(row["Rechnungsnetto"]).ToString("N2")</td>
                  <td>@row["Belegnummer"]</td>
                </tr>
              }
            }
            else
            {
              <tr>
                <td colspan="6" class="text-center">Keine Daten gefunden</td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    </div>

meine sort Funktion:

  function sortTable(columnIndex, header) {
    const table = document.getElementById("statistikTable");
    const tbody = table.tBodies[0];
    const rows = Array.from(tbody.rows);
    const ascending = table.dataset.sortOrder !== "asc";

    const isNumericColumn = !isNaN(parseFloat(rows[0].cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()));

    let sortedRows;
    if (isNumericColumn) {
      sortedRows = rows
        .map(row => ({
          element: row,
          value: parseFloat(row.cells[columnIndex].textContent.replace("€", "").replace(",", ".").trim()) || 0
        }))
        .sort((a, b) => ascending ? a.value - b.value : b.value - a.value);
    } else {
      const collator = new Intl.Collator("de", { numeric: true, sensitivity: "base" });
      sortedRows = rows
        .map(row => ({
          element: row,
          value: row.cells[columnIndex].textContent.trim()
        }))
        .sort((a, b) => ascending ? collator.compare(a.value, b.value) : collator.compare(b.value, a.value));
    }

    const fragment = document.createDocumentFragment();
    sortedRows.forEach(({ element }) => fragment.appendChild(element));
    tbody.appendChild(fragment);

    table.dataset.sortOrder = ascending ? "asc" : "desc";

    updateSortIcons(header, ascending);
  }

  function updateSortIcons(header, ascending) {
    document.querySelectorAll(".sort-icon").forEach(icon => {
      icon.src = "/img/dgvsort.png";
      icon.style.display = "inline";
    });

    const icon = header.querySelector(".sort-icon");
    if (icon) {
      icon.src = ascending ? "/img/dgvsortup.png" : "/img/dgvsortdown.png";
      icon.style.display = "inline";
    }
  }

Freue mich über jede Hilfe! 😊

HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung, Frontend

Meistgelesene Beiträge zum Thema Webdesign