Webdesign – die besten Beiträge

Verwandte Themen
Trismegisto
04.02.2025, 05:40

Frage zu Responsive Nav, Burger Button?

Hi, also ich verstehe hier folgendes nicht :

Warum das Hamburger Symbol bei bei zutreffender Mediaquerry "@media (max-width: 768px)", angezeigt wird, denn schließlich ist doch der ".menu-toggle" auf "display: none;" ???

Eventuell verstehe ich es richtig, dass durch ".classList.toggle('nav-active');" in der "function toggleMenu()" irgendwie der Burger aktiviert wird, durch eine versteckte VanillaJS Funktion, aber wie genau?

Danke

LG

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Meine Website</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: Arial, sans-serif;
       }
       body {
           display: flex;
           flex-direction: column;
           align-items: center;
       }
       .navbar {
           width: 100%;
           background-color: #333;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px;
       }
       .logo {
           color: white;
           font-size: 24px;
           font-weight: bold;
       }
       .nav-links {
           list-style: none;
           display: flex;
       }
       .nav-links li {
           margin: 0 15px;
       }
       .nav-links a {
           color: white;
           text-decoration: none;
           font-size: 18px;
       }
       .menu-toggle {
           display: none;
           font-size: 24px;
           color: white;
           cursor: pointer;
       }
       @media (max-width: 768px) {
           .nav-links {
               display: none;
               flex-direction: column;
               background-color: #333;
               position: absolute;
               top: 60px;
               right: 0;
               width: 100%;
               text-align: center;
           }
           .nav-links li {
               padding: 10px 0;
           }
           .menu-toggle {
               display: block;
           }
           .nav-active {
               display: flex;
           }
       }
   </style>
</head>
<body>
   <nav class="navbar">
       <div class="logo">Mein Logo</div>
       <span class="menu-toggle" onclick="toggleMenu()">&#9776;</span>
       <ul class="nav-links">
           <li><a href="#">Home</a></li>
           <li><a href="#">Über</a></li>
           <li><a href="#">Leistungen</a></li>
           <li><a href="#">Kontakt</a></li>
       </ul>
   </nav>
   <script>
       function toggleMenu() {
           document.querySelector('.nav-links').classList.toggle('nav-active');
       }
   </script>
</body>
</html>


ps:Ok hat sich geklärt...ich depp habe übersehen das die unteren css eigenschaften ja in der Mediaquerry drinne sind
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
paypalapi
10.01.2025, 16:58

Bestes WordPress Hosting für 5.95€?

Ich habe damals eine WordPress Website für einen Kunden erstellt bei All-Inkl und habe das Privat Paket (4.99€) mit Zusatzoption SSL-Erweiterung (0,95€) Zusatzoption SSL-Erweiterung.
Es hat 3 Domains Inklusive aber wir brauchen das garnicht mehr da die alten Domains nichtmehr indexiert sind, die haupt domain reicht maximal 2 Domains.

Der Punkt ist aber das die Seite mit WordPress gemacht wurde und Elementor, trotz Optimierungen kommt es nicht auf so tolle Ergebnisse.


Und der zweite Punkt ist er möchte nichts wirklich ändern an dem Design und möchte seine Videos drinne lassen.

Sind hochwertig produziert und schöne Videos gehen 1-2 Minuten und sollen für ihn der Hauptfokus sein.

  • Ob ein CDN etwas bringen würde denke ich nicht da die Kunden ausschließlich lokal sind. CDN ist doch eher etwas für Weltweit.
  • Bilder sind alle auf Webp Konvertiert mit 92% Beibehaltung der Qualität, da habe ich bereits massiv eingespart ohne sichtbaren Qualitätsverlust
  • Video ist etwas schwierig zu Komprimieren / Qualität zu verringern, es wäre mir lieber wenn es ein Widget gebe für Elementor das die eigenschaft wie Youtube hätte aber ohne YouTube das man das Video selber auf "auto" laden würde erstmal und zeit gewinnt. Ob webm einen großen unterschied macht bin ich mir nicht sicher
  • Caching Plugin habe ich "WP Optimize" und auch HTML,CSS,JS minimieren aktiviert, bisher keine Konflikte oder Fehler.
  • Das Cookie Plugin verlangsamt auch stark die Ladezeiten ist mir aufgefallen, kennt ihr ein sehr leichtgewichtiges und cleanes Cookie Opt Plugin womit man auch Google Maps Consent einholen kann?

Ich kann also nur die technische Seite Optimieren und denke mit einem besseren Hosting das nicht Allgemein ist wie All Inkl ich einen höheren Score erreichen kann beim Speed Test.

Homepage, HTML, Webseite, WordPress, JavaScript, CMS, PHP, SEO, Strato, Webdesign, Webentwicklung, Webhosting, Webserver, all-inkl, divi, Hetzner, Elementor, hostinger, Elementor Pro, ionos
4 Antworten
KnowHow1001
15.05.2020, 14:45
Mit Bildern
Mit Links

Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

lg

Bild zum Beitrag
Computer, HTML, programmieren, CSS, Webdesign
3 Antworten

Meistgelesene Beiträge zum Thema Webdesign

Mehr meistgelesene Fragen zu Webdesign