HTML5 - die besten Fragen

Verwandte Themen

Zipfel04

03.07.2024, 18:34

Mit Bildern

Hey hab letztens meine lieblings online spiele Plattform (bloxd.io) gestartet und plötzlich sah die Website so (Bild 1) und nicht aus wie immer (Bild 2). Ich würde also gerne wissen was im Code beim Laden falsch gelaufen ist

1 Antwort

Aiuser

03.07.2024, 17:03

Mit Bildern

Html im Browser nicht so wie im Compiler?

Warum zeigt mir mein Browser (Opera GX) nicht das selbe, wenn ich ein HTML Dokument öffnen, wie eine Handy HTML Code app, im Bezug auf den Zoomfaktor an? Die Schrift ist im Browser ist kleiner und es ist mehr Platz zwischen dem Seitenrand und einer Zentrierten Schrift.

2 Antworten

LionCrafter01

03.07.2024, 11:42

Mit Links

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>

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

3 Antworten

Dresdenhallo

23.06.2024, 20:27

Weiterlernen für Cyber Security?

Hallo,

Ich habe schon vor 1 Jahr HTML und CSS gelernt, jetzt lerne ich Javascript, wollte ursprünglich als fullstack Developer später arbeiten, jetzt möchte ich aber in der Cyber Security arbeiten, sollte ich noch Javascript zu Ende lernen und mich dann mit Cyber Security beschäftigen, oder sollte ich direkt aufhören und mich mit Cyber Security beschäftigen, braucht man Javascript in dieser Branche?

Danke im vorraus:)

1 Antwort

Dresdenhallo

23.06.2024, 20:18

Javascript für Cyber Security?

Hallo,

Danke im vorraus:)

2 Antworten

Moni98799

22.06.2024, 01:31

Mit Bildern

HILFE bei der Erstellung eines langsam seitlich einslidernde Menue?

Wie in meiner Überschrift schon beschrieben möchte ich ein Menü bauen, das seitlich von rechts langsam einslidert. Für das Menü möchte ich <details> /<summary> verwenden.

So soll es mal aussehen:

Meine html-Struktur von der Navigation:

<nav id='sitenav' aria-labelledby='sitenav-label'>
    <h2 id='sitenav-label' class='visually-hidden'>Site-Navigation</h2>
    <details>
        <summary>Menü</summary>
            <ul>
                <li aria-current='page'>
                    <details>
                        <summary>Impressum &amp; rechtliches</summary>
                            <ul>
                                <li aria-current='sub-page' tabindex=0>
                                    <details>
                                        <summary>Impressum</summary>
                                            <ul>
                                                <li><a href=''>Kontakt</a></li>
                                                <li><a href=''>Fotodokumentationen</a></li>
                                                <li><a href=''>Links</a></li>
                                            </ul>
                                    </details>
                                </li>
                                <li><a href=''>Nutzungsbedingungen</a></li>
                                <li><a href=''>Datenschutz &amp; Urheberrecht</a></li>
                            </ul>
                    </details>
                </li>
                <li><a href=''>Website Erika Mustermann</a></li>
                <li><a href=''>Blog Max Mustermann</a></li>
                <li><a href=''>VLog Erika Mostermann</a></li>
            </ul>
    </details>
</nav>

Der sichtbare Hamburger Button (mit den Pseudoelementen ::after und ::before bei details / summery) ist position: sticky;

Nun könnte mir jemand bitte zeigen wie ich nun mein <ul> von rechts langsam einslidern lasse. Stoppen soll das Untermenü dann links vom Button.

Es geht mir um das Prinzip wie man es macht. Kann mir dies bitte jemand an einem einfachen Beispiel zeigen?

1 Antwort

Jason2000C

20.06.2024, 21:19

Mit Bildern

Welche Programmiersprache für Mails?

Hallo,

Seit kurzem Befasse ich mich mit Html und CSS. Ich bin natürlich noch ein Blutiger Anfänger wenn es um das Programmieren geht. Allerdings frage ich mich wie man Mail Templates erstellt. Welche Sprachen werden Benutz?

1 Antwort

Danichaoszock4

19.06.2024, 22:57

Wie erstelle ich mir eine database mit google sheet womit ich ein login und register system erstellen kann?

Hallo, hat jemand eine Ahnung wie ich mir einen einfacehn login und register system programmiere mit javascript mit google sheets verknüpfen. Ich möchte dann mein System mit google sheets verknüpfen und wenn ich daten von meiner html website absende mit den Nutzerdaten wie zum Beispiel email addresse und passwort dann werden die angegebenen daten vom nutzer auf mein google sheet landen und wenn man zur login seite geht dann sollten die daten bei der login website validiert werden bzw. überprüft werden und wenn es richtig ist werd eich auf einer anderen website weitergeleitet

1 Antwort

JakeKlint

18.06.2024, 08:22

Mit Umfrage

Welche Methode zur Umsetzung einer Website?

Hallo ihr Lieben!

Ich habe einen Verein gegründet und wir brauchen eine ordentliche Website. Das Team der ITler besteht aus 3 Personen (inkl. mir). Einer davon kann Frontend (Design, CSS), einer kann Backend (Datenbanken, HTML, JS, Serverkonfiguration). Ich kann alles davon nur so ein bisschen und koordiniere das Projekt. Bisher haben wir eher provisorisch eine WordPress Seite, sind damit aber aus folgenden Gründen nicht zufrieden:

Unübersichtlich mit den vielen Plugins usw. - es ist nicht einheitlich und wirkt zugemüllt und umständlich
Der Code ist schwer zu lesen und nachzuvollziehen
Man kann den Code (soweit ich weiß) nicht vollständig anpassen und ist daher in Hinblick auf Design und Funktionalität eingeschränkt (in unserem Theme „Astra“ kann man Designfarben einstellen, sieht aber nicht, wo sie verwendet werden)

Jetzt suchen wir nach einer Alternative. Man könnte versuchen, die Website ohne CMS o. Ä. auf die Beine zu stellen, man könnte ein anderes, anpassbareres CMS verwenden oder bloß ein CMF, wobei ich nicht sicher bin, ob das viel besser ist.

Wir können im Moment nicht genau einschätzen, ob es realistisch ist, die Webseite ohne CMS o. Ä. sicher, ordentlich und schön aufzubauen. Allerdings wissen wir auch nicht, ob es ein CMS gibt, das so viel Anpassbarkeit bietet, dass man (mit genug Programmierkenntnissen) theoretisch ALLES umsetzen kann. Funktionen, die wir brauchen, wären:

Beiträge (Blog, News)
Normale Inhaltsseiten
Eingebundene Mediendateien
Kleine eingebettete Online-Spiele
Kontakt/Anmeldeformulare
Suchfunktion
Design exakt, wie der Designer es sich vorstellt
evtl. ungewöhnliche Seitennavigation (Nicht nur mit Standard Menüs, wie bei WordPress von Anfang an drin)

Denkt ihr, WordPress oder Drupal ist durch Themes, Plugins/Modulen etc. doch anpassbar genug und wir müssten uns nur mal genauer hineindenken oder sollte man in unserem Fall lieber ganz auf Content-Management Optionen verzichten?

Vielen Dank schon mal für eure Antworten!

Benutzt Wordpress und verwendet vorhandene Themes und Plugins 50%

Baut die Seite von 0 auf selbst 50%

Benutzt Wordpress und programmiert Themes und Plugins selbst 0%

Benutzt Drupal und programmiert selbst 0%

Benutzt Drupal und verwendet vorhandenes 0%

Nutzt ein anderes CMS oder CMF 0%

5 Antworten

Moni98799

18.06.2024, 04:34

Wäre es eine korrekte Vorgehensweise wenn ich innerhalb eines wrappers ein GRID-Raster anlege?

Ich frage mich momentan, ob es eine korrekte Vorgehensweise wäre, wenn ich innerhalb eines wrappers ein GRID-Raster anlege?

Das sähe so aus:

.main-content-wrapper {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 72em;    
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    border: 2px dashed #551A8B;
}

.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); }


<body id="skip-to-top">
    <div class="main-content-wrapper">
        <header role="header" id="main-head">
[ ... ]

Ich habe festgestellt, wenn ich body als wrapper nutze, dann entstehen bei ganz schmalen Browserfenster einige Fehler, die u.a. so aussehen das (wenn ich bei den Dev-Tools grid anzeigen lasse) mein grid seitlich rechts vom body und html hinaus wandern würde oder: mein grid bleibt an einem Punkt stehen und nur html & body wird noch schmaler. Daher meine Entscheidung ein weiteres div einzusetzen.

Ist dies richtig? Wie seht ihr das?

Oder sollte ich eher eine Lösung ohne wrapper anstreben, die ganze Seite mit einem dreispaltigen grid lösen?

body {
	display: grid;
		grid-template-columns: [left] minmax(0.45em,1fr) [main] minmax(10em,78em) [right] minmax(0.45em,1fr);
		grid-template-rows: repeat(2,min-content) auto;
		grid-gap: 0;
		}

Die gridfelder rechts und links sind quasi mein Puffer, wenn ich mein Browserfenster zusammenziehe, und wird dann automatisch weniger/ kleiner.

Was wäre die bessere Herangehensweise?

1 Antwort

Moni98799

18.06.2024, 04:01

Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?

1 Antwort

Kings007

15.06.2024, 14:39

Kann man mit Ionos Website Builder eine gute Website erstellen. Eure Meinung?

2 Antworten

WonderWave

12.06.2024, 19:08

Programmier blockade?

Hallo zusammen,

Ich bin Programmierer, bzw. kann mit Python und HTML programmieren,

und habe gerade eine Blokade, also ich weis nicht was ich coden soll.

Habt ihr ne Idee?

Danke im vorraus.

4 Antworten

Opber34

12.06.2024, 00:06

Mit Bildern

Wie kann ich direkt zur richtigen HTML Seite weiterleiten?

Hallo, wie kann ich dafür sorgen, dass direkt die richtige HTML Datei angezeigt wird, ohne dass ich dafür .html in der Adresse angeben muss bzw. die HTML Datei manuell auswählen muss:

3 Antworten

Trismegisto

11.06.2024, 15:35

Warum schiebt display flex?

Hallo,

ich verstehe nicht warum die Icons, mit Display Flex, in diesem Fall ganz nach Rechts geschoben werden?

Ist ja gut weil ich ne Responsive Navbar bauen will, aber ich wills auch verstehen.

Code Html:

    <div class="top-bar">
      <span><ion-icon name="call-outline"></ion-icon>111 222 333</span>
      <ul>
        <li><a href=""><ion-icon name="logo-facebook"></ion-icon></a></li>
        <li><a href=""><ion-icon name="logo-twitter"></ion-icon></a></li>
        <li><a href=""><ion-icon name="logo-instagram"></ion-icon></a></li>
      </ul>
     </div>

Und das Css:

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


body {
    font-family: "DM Serif Text", serif; 


} 
a, a:hover {
    text-decoration: none;
}
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
Danke sehr.
LG

1 Antwort

daili

10.06.2024, 11:42

PHP mail kommt nur lokal an?

Hallo, ich habe das problem, dass meine PHP mail nur lokal ankommtl, jedoch nicht wenn ich sie an einen externen Mailprovider schicke, dass ist mein code

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Statusmeldung</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #191919;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }


        .container {
            text-align: center;
            padding: 20px;
            background-color: #2a2a2a;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            margin-bottom: 20px;
        }
        .success {
            color: green;
        }
        .error {
            color: red;
        }
        .back-button {
            margin-top: 20px;
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .back-button:hover {
            background-color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Statusmeldung</h1>
		<button class="back-button" onclick="window.history.back()">Zurück</button>
		
        <?php
        session_start();


        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            // Spam-Schutz: Überprüfen, ob genügend Zeit seit dem letzten Absenden vergangen ist (1 Stunde)
            if (isset($_SESSION['last_submit_time']) && time() - $_SESSION['last_submit_time'] < 600) {
                $timeLeft = 600 - (time() - $_SESSION['last_submit_time']);
                echo "<p class='error'>Bitte warten Sie noch $timeLeft Sekunden, bevor Sie das Formular erneut absenden. Die Ankunft der Email kann bis zu 24h dauern.</p>";
                exit;
            }


            // Aktualisieren der letzten Absendezeit
            $_SESSION['last_submit_time'] = time();


            // Weiter mit der E-Mail-Versendung
            $to = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
            $subject = 'Backup Bier aus dem Schlauch';
            $message = 'Hey, hier ist dein Backup von Bier aus dem Schlauch.';
            $headers = "From: noreply@bierausdemschlauch.de";


            $data = $_POST['exportedFile'];
            $fileName = $_POST['fileName'];
            $fileContent = base64_decode($data);


            $separator = md5(time());
            $eol = PHP_EOL;


            // Main headers
            $headers .= "MIME-Version: 1.0" . $eol;
            $headers .= "Content-Type: multipart/mixed; boundary=\"" . $separator . "\"" . $eol;


            // Message
            $body = "--" . $separator . $eol;
            $body .= "Content-Transfer-Encoding: 7bit" . $eol . $eol;
            $body .= $message . $eol;


            // Attachment
            $body .= "--" . $separator . $eol;
            $body .= "Content-Type: application/octet-stream; name=\"" . $fileName . "\"" . $eol;
            $body .= "Content-Transfer-Encoding: base64" . $eol;
            $body .= "Content-Disposition: attachment; filename=\"" . $fileName . "\"" . $eol . $eol;
            $body .= chunk_split(base64_encode($fileContent)) . $eol;
            $body .= "--" . $separator . "--";


            if (mail($to, $subject, $body, $headers)) {
                // Benachrichtigung über Erfolg
                echo "<p class='success'>E-Mail erfolgreich gesendet.</p>";
            } else {
                // Benachrichtigung über Misserfolg
                echo "<p class='error'>E-Mail konnte nicht gesendet werden.</p>";
            }
        } else {
            echo "<p class='error'>Ungültige Anforderung.</p>";
        }
        ?>
		
        
    </div>
	
</body>
</html>

2 Antworten

Suiram1

09.06.2024, 15:58

Mit Bildern

Bootstrap 5.3 Dropdown Pfeil?

Hallo, in einem Dropdown was ich mit Bootstrap erstelle wird der Pfeil unten statt auf der rechten Seite angezeigt

Hier ist der HTML Code von dem Toggle Button des Dropdowns:

<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
   <div class="d-flex">
      <span class="material-symbols-outlined">language</span>
      <span class="ms-2">Automatisch</span>
   </div>
</button>

Ich hab schon herausgefunden das der Fehler vom Div kommt, allerdings wenn ich das Div Entferne sieht es so aus:

Wie man sieht ist dort, dann allerdings das Icon nicht mehr Zentriert. Weiß jemand wie man entweder die Positionierung vom Dropdown Pfeil oder die Ausrichtung vom Icon in Ordnung bringen kann.

Vielen Dank schon mal im Voraus für jede Antwort!

1 Antwort

Moni98799

08.06.2024, 23:33

Mit Bildern

Kann mir jemand bei der Erstellung eines ausklappbaren Seitenmenüs mit Hamburger-Button helfen?

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.