JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="Pippalina, post: 8401, member: 1881"] Hallo Ihr Lieben, erst mal vorweg: ich bin Anfänger (also bitte Nachsicht mit mir 🤪) und arbeite an einer Navigationsleiste, die ungefähr im oberen drittel mittels Flexbox, von links nach rechts, platziert ist. [B]Ziel: [/B]Ich würde gerne <ul>, <li> und <a> größentechnisch an die Breite und Höhe des Elternelements <nav> anpassen. Bei <ul> und <li> geht das mit meiner bisherigen Programmierung. [B]Problem: [/B]Die Klickfläche von <a> ist größer als <li> und der Rest. Komme auch nicht drauf, wie ich die anpassen kann. [B]ERGO: [/B]Hiiiiiiiiiilfe! Ist da draußen irgendein Super-Brain, welches mir helfen kann?😁 Hier mal mein Code (reicht der?): [B]header nav[/B] { width: 100%; height: 10rem; top: calc(30rem - 33%); /*Gibt es hier eine elegantere Methode?*/ -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background-color:rgba(255, 255, 255, 0.3); } [B]header nav ul[/B] { max-width: 1025px; height: 100%; /*Anpassung an Höhe des Elternelements; ok*/ margin: auto; display: -webkit-box; display: -webkit-flex; display: flex; justify-content: center; /*border: 2px solid blue;*/ } [B]header nav ul li [/B]{ max-width: inherit; /*Anpassung an Breite des Elternelements; ok*/ height: inherit; margin: auto; display: inline; /*Positionierung nebeneinander*/ /*border: 2px solid yellow;*/ } [B]header nav ul li a[/B] { display: inline-block; height: 100%; /*Wie erwirke ich, dass der Text mit in das Zentrum rutscht? Text-align funktioniert nicht*/ font-size: 1.4rem; font-weight: bold; white-space: nowrap; text-decoration: none; border: 2px solid yellow } LG Pippa [/QUOTE]

Authentifizierung