Problem mit Hamburger navigation container bearbeitet von Bendroid 13.11.2023 12:37 Hallo in die Runde, jetzt muß ich mich doch mal an die Pros wenden. Bin im Prinzip blutiger Anfänger und habe mir für meine hoffentlich bald online gehende Seite einen Banner-Logo-Block erstellt, der halt die üblichen Elemente hat: links das Icon, dann der Logo-Text und rechtsbündig das Hamburger-Menü. Um die Positionierung und Größe-Anpassung für mich einfacher zu machen, kam ich auf den fulminanten Gedanken, das ganze besser in einen Container zu „wrappen" - gedacht, getan. Nun mußte ich leider feststellen, daß es selten gut ausgeht wenn Amateure Extrawürste basteln. Anstatt den gewünschten Container zu bekommen, adressiert das CSS offenbar nicht wie gewünscht und erstellt stattdessen ein zweites Banner-Element direkt unter dem ersten Banner und wendet das gewünschte Styling auf dieses zweite Element an. Habe jetzt alles mögliche versucht von der Erhöhung der Spezifität bis zur Entfernung der flex-Regel usw. - nun bin ich ratlos und würde mich über Hilfe massiv freuen. Was mache ich falsch? Hier der Code: ~~~ <!DOCTYPE html> <html lang="de" > <head> <meta charset="UTF-8"> <title>Banner-Debugging</title> <style> html { font-family: Georgia, Ubuntu, Roboto; font-size: 1.0em; margin: 0; padding: 0; line-height: 1.15; word-wrap: break-word; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; color: #222; background-color: #f0f0f0; scroll-behavior: smooth; } body { box-sizing: border-box; margin: 0 auto 0 auto; padding: 0; min-height: 100vh; max-width: 60em; border: 1px solid #222; border-radius: 0; color: #222; background-color: #fff; font-size: 1.0em; line-height: 1.40; display: flex; flex-direction: column; justify-content: space-between; } /* Das ist der Übeltäter */ .banner-container { position:fixed; width: 100%; height: 16em; display: flex; align-items:center; justify-content: space-between; background-color: red; } .icon { top: 20px; left: 20px; fill: #000; margin-right: 1.5em; height: 48px; width: 44px; text-decoration: none; transform: translateX(-10px); vertical-align: middle; } .logo { top: 1.8em; left: 0; padding-left: 1.5em; z-index: 6; font-size: 1.3em; font-weight: 900; font-family: Ubuntu; text-transform: uppercase; margin-left: 1.5em; } .icon, .logo { position: fixed; display: inline-block; } body input+label { position: fixed; top: 40px; right: 40px; height: 20px; width: 15px; z-index: 5; } body input+label span { position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; display: block; background: #020304; transition: 0.5s; } body input+label span:first-child { top: 3px; } body input+label span:last-child { top: 16px; } body label:hover { cursor: pointer; } body input:checked+label span { opacity: 0; top: 50%; } body input:checked+label span:first-child { opacity: 1; transform: rotate(405deg); } body input:checked+label span:last-child { opacity: 1; transform: rotate(-405deg); } body input~nav { background: white; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 3; transition: 0.5s; transition-delay: 0.5s; overflow: hidden; } body input~nav>ul { list-style-type: none; padding-left: 0; text-align: center; position: absolute; top: 35%; left: 20%; right: 20%; } body input~nav>ul>li { opacity: 0; transition: 0.5s; transition-delay: 0s; } body input~nav>ul>li>a { text-decoration: none; text-transform: uppercase; color: #020304; font-weight: 700; font-family: sans-serif; display: block; padding: 30px; } body input:checked~nav { height: 100%; transition-delay: 0s; } body input:checked~nav>ul>li { opacity: 1; transition-delay: 0.5s; } </style> </head> <body> <div class="banner-container"> <div class="logo"> <svg class="icon"> <path d="M24,33a8,8,0,0,0,8-8V9A8,8,0,0,0,16,9V25A8,8,0,0,0,24,33ZM20,9a4,4,0,0,1,8,0V25a4,4,0,0,1-8,0Z"/> <path d="M38,25a2,2,0,0,0-4,0,10,10,0,0,1-20,0,2,2,0,0,0-4,0A14,14,0,0,0,22,38.84V43H21a2,2,0,0,0,0,4h6a2,2,0,0,0,0-4H26V38.84A14,14,0,0,0,38,25Z"/> </svg> logotext.de </div> <input id="menu-toggle" type="checkbox" name="menu-toggle"> <label for="menu-toggle"> <span></span> <span></span> <span></span> </label> <nav> <ul> <li><a href="./index.html" target="_blank">Heimat</a></li> <li><a href="faq.html" target="_blank">FAQ</a></li> <li><a href="content.html" target="_blank">Index</a></li> <li><a href="imprint.html" target="_blank">Impressum</a></li> </ul> </nav> <header> </header> </div> </body> </html> Quelltext hier ~~~
Problem mit Hamburger navigation container bearbeitet von Bendroid 13.11.2023 12:57 Hallo in die Runde, jetzt muß ich mich doch mal an die Pros wenden. Bin im Prinzip blutiger Anfänger und habe mir für meine hoffentlich bald online gehende Seite einen Banner-Logo-Block erstellt, der halt die üblichen Elemente hat: links das Icon, dann der Logo-Text und rechtsbündig das Hamburger-Menü. Um die Positionierung und Größe-Anpassung für mich einfacher zu machen, kam ich auf den fulminanten Gedanken, das ganze besser in einen Container zu „wrappen" - gedacht, getan. Nun mußte ich leider feststellen, daß es selten gut ausgeht wenn Amateure Extrawürste basteln. Anstatt den gewünschten Container zu bekommen, adressiert das CSS offenbar nicht wie gewünscht und erstellt stattdessen ein zweites Banner-Element direkt unter dem ersten Banner und wendet das gewünschte Styling auf dieses zweite Element an. Habe jetzt alles mögliche versucht von der Erhöhung der Spezifität bis zur Entfernung der flex-Regel usw. - nun bin ich ratlos und würde mich über Hilfe massiv freuen. Was mache ich falsch? Hier der Code: ~~~ <!DOCTYPE html> <html lang="de" > <head> <meta charset="UTF-8"> <title>Banner-Debugging</title> <style> html { font-family: Georgia, Ubuntu, Roboto; font-size: 1.0em; margin: 0; padding: 0; line-height: 1.15; word-wrap: break-word; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; color: #222; background-color: #f0f0f0; scroll-behavior: smooth; } body { box-sizing: border-box; margin: 0 auto 0 auto; padding: 0; min-height: 100vh; max-width: 60em; border: 1px solid #222; border-radius: 0; color: #222; background-color: #fff; font-size: 1.0em; line-height: 1.40; display: flex; flex-direction: column; justify-content: space-between; } /* Das ist der Übeltäter */ .banner-container { display: block; position: fixed; width: 100%; height: 16em; display: flex; align-items: center; justify-content: space-between; background-color: red; } .icon { top: 20px; left: 20px; fill: #000; margin-right: 1.5em; height: 48px; width: 44px; text-decoration: none; transform: translateX(-10px); vertical-align: middle; } .logo { top: 1.8em; left: 0; padding-left: 1.5em; z-index: 6; font-size: 1.3em; font-weight: 900; font-family: Ubuntu; text-transform: uppercase; margin-left: 1.5em; } .icon, .logo { position: fixed; display: inline-block; } body input+label { position: fixed; top: 40px; right: 40px; height: 20px; width: 15px; z-index: 5; } body input+label span { position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; display: block; background: #020304; transition: 0.5s; } body input+label span:first-child { top: 3px; } body input+label span:last-child { top: 16px; } body label:hover { cursor: pointer; } body input:checked+label span { opacity: 0; top: 50%; } body input:checked+label span:first-child { opacity: 1; transform: rotate(405deg); } body input:checked+label span:last-child { opacity: 1; transform: rotate(-405deg); } body input~nav { background: white; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 3; transition: 0.5s; transition-delay: 0.5s; overflow: hidden; } body input~nav>ul { list-style-type: none; padding-left: 0; text-align: center; position: absolute; top: 35%; left: 20%; right: 20%; } body input~nav>ul>li { opacity: 0; transition: 0.5s; transition-delay: 0s; } body input~nav>ul>li>a { text-decoration: none; text-transform: uppercase; color: #020304; font-weight: 700; font-family: sans-serif; display: block; padding: 30px; } body input:checked~nav { height: 100%; transition-delay: 0s; } body input:checked~nav>ul>li { opacity: 1; transition-delay: 0.5s; } </style> </head> <body> <div class="banner-container"> <div class="logo"> <svg class="icon"> <path d="M24,33a8,8,0,0,0,8-8V9A8,8,0,0,0,16,9V25A8,8,0,0,0,24,33ZM20,9a4,4,0,0,1,8,0V25a4,4,0,0,1-8,0Z"/> <path d="M38,25a2,2,0,0,0-4,0,10,10,0,0,1-20,0,2,2,0,0,0-4,0A14,14,0,0,0,22,38.84V43H21a2,2,0,0,0,0,4h6a2,2,0,0,0,0-4H26V38.84A14,14,0,0,0,38,25Z"/> </svg> logotext.de </div> <input id="menu-toggle" type="checkbox" name="menu-toggle"> <label for="menu-toggle"> <span></span> <span></span> <span></span> </label> <nav> <ul> <li><a href="./index.html" target="_blank">Heimat</a></li> <li><a href="faq.html" target="_blank">FAQ</a></li> <li><a href="content.html" target="_blank">Index</a></li> <li><a href="imprint.html" target="_blank">Impressum</a></li> </ul> </nav> <header> </header> </div> </body> </html> Quelltext hier ~~~
Problem mit Hamburger navigation container bearbeitet von Bendroid 13.11.2023 12:40 Hallo in die Runde, jetzt muß ich mich doch mal an die Pros wenden. Bin im Prinzip blutiger Anfänger und habe mir für meine hoffentlich bald online gehende Seite einen Banner-Logo-Block erstellt, der halt die üblichen Elemente hat: links das Icon, dann der Logo-Text und rechtsbündig das Hamburger-Menü. Um die Positionierung und Größe-Anpassung für mich einfacher zu machen, kam ich auf den fulminanten Gedanken, das ganze besser in einen Container zu „wrappen" - gedacht, getan. Nun mußte ich leider feststellen, daß es selten gut ausgeht wenn Amateure Extrawürste basteln. Anstatt den gewünschten Container zu bekommen, adressiert das CSS offenbar nicht wie gewünscht und erstellt stattdessen ein zweites Banner-Element direkt unter dem ersten Banner und wendet das gewünschte Styling auf dieses zweite Element an. Habe jetzt alles mögliche versucht von Erhöhung der Spezifität zu bis zur Entfernung der flex-Regel usw. - nun bin ich ratlos und würde mich über Hilfe massiv freuen. Was mache ich falsch? Hier der Code: ~~~ <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Banner-Debugging</title> <style> html { font-family: Georgia, Ubuntu, Roboto; font-size: 1.0em; margin: 0; padding: 0; line-height: 1.15; word-wrap: break-word; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; color: #222; background-color: #f0f0f0; scroll-behavior: smooth; } body { box-sizing: border-box; margin: 0 auto 0 auto; padding: 0; min-height: 100vh; max-width: 60em; border: 1px solid #222; border-radius: 0; color: #222; background-color: #fff; font-size: 1.0em; line-height: 1.40; display: flex; flex-direction: column; justify-content: space-between; } /* Instead of wrapping up and targeting the banner at the top of the page in a container as intended, this container class creates a second container underneath the actual one */ .banner-container { display: block; position: fixed; width: 100%; height: 16em; display: flex; align-items: center; justify-content: space-between; background-color: red; } .icon { top: 20px; left: 20px; fill: #000; margin-right: 1.5em; height: 48px; width: 44px; text-decoration: none; transform: translateX(-10px); vertical-align: middle; } .logo { top: 1.8em; left: 0; padding-left: 1.5em; z-index: 6; font-size: 1.3em; font-weight: 900; font-family: Ubuntu; text-transform: uppercase; margin-left: 1.5em; } .icon, .logo { position: fixed; display: inline-block; } body input+label { position: fixed; top: 40px; right: 40px; height: 20px; width: 15px; z-index: 5; } body input+label span { position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; display: block; background: #020304; transition: 0.5s; } body input+label span:first-child { top: 3px; } body input+label span:last-child { top: 16px; } body label:hover { cursor: pointer; } body input:checked+label span { opacity: 0; top: 50%; } body input:checked+label span:first-child { opacity: 1; transform: rotate(405deg); } body input:checked+label span:last-child { opacity: 1; transform: rotate(-405deg); } body input~nav { background: white; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 3; transition: 0.5s; transition-delay: 0.5s; overflow: hidden; } body input~nav>ul { list-style-type: none; padding-left: 0; text-align: center; position: absolute; top: 35%; left: 20%; right: 20%; } body input~nav>ul>li { opacity: 0; transition: 0.5s; transition-delay: 0s; } body input~nav>ul>li>a { text-decoration: none; text-transform: uppercase; color: #020304; font-weight: 700; font-family: sans-serif; display: block; padding: 30px; } body input:checked~nav { height: 100%; transition-delay: 0s; } body input:checked~nav>ul>li { opacity: 1; transition-delay: 0.5s; } </style> </head> <body> <div class="banner-container"> <div class="logo"> <svg class="icon"> <path d="M24,33a8,8,0,0,0,8-8V9A8,8,0,0,0,16,9V25A8,8,0,0,0,24,33ZM20,9a4,4,0,0,1,8,0V25a4,4,0,0,1-8,0Z"/> <path d="M38,25a2,2,0,0,0-4,0,10,10,0,0,1-20,0,2,2,0,0,0-4,0A14,14,0,0,0,22,38.84V43H21a2,2,0,0,0,0,4h6a2,2,0,0,0,0-4H26V38.84A14,14,0,0,0,38,25Z"/> </svg> logotext.de </div> <input id="menu-toggle" type="checkbox" name="menu-toggle"> <label for="menu-toggle"> <span></span> <span></span> <span></span> </label> <nav> <ul> <li><a href="./index.html" target="_blank">Heimat</a></li> <li><a href="faq.html" target="_blank">FAQ</a></li> <li><a href="content.html" target="_blank">Index</a></li> <li><a href="imprint.html" target="_blank">Impressum</a></li> </ul> </nav> <header> </header> </div> </body> </html> Quelltext hier ~~~
nicht angemeldet
