P
Pippalina
New member
- Beiträge
- 1
- Punkte Reaktionen
- 0
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.
Ziel: 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.
Problem: Die Klickfläche von <a> ist größer als <li> und der Rest. Komme auch nicht drauf, wie ich die anpassen kann.
ERGO: Hiiiiiiiiiilfe!
Ist da draußen irgendein Super-Brain, welches mir helfen kann?
Hier mal mein Code (reicht der?):
header nav {
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);
}
header nav ul {
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;*/
}
header nav ul li {
max-width: inherit; /*Anpassung an Breite des Elternelements; ok*/
height: inherit;
margin: auto;
display: inline; /*Positionierung nebeneinander*/
/*border: 2px solid yellow;*/
}
header nav ul li a {
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
erst mal vorweg: ich bin Anfänger (also bitte Nachsicht mit mir
Ziel: 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.
Problem: Die Klickfläche von <a> ist größer als <li> und der Rest. Komme auch nicht drauf, wie ich die anpassen kann.
ERGO: Hiiiiiiiiiilfe!
Ist da draußen irgendein Super-Brain, welches mir helfen kann?
Hier mal mein Code (reicht der?):
header nav {
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);
}
header nav ul {
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;*/
}
header nav ul li {
max-width: inherit; /*Anpassung an Breite des Elternelements; ok*/
height: inherit;
margin: auto;
display: inline; /*Positionierung nebeneinander*/
/*border: 2px solid yellow;*/
}
header nav ul li a {
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