Hallo,
erstmal der Code, dann die Frage:
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bildschirm anpassen für verschiedenene-Bildschirme/Systeme !-->
<meta http-equiv="X-UA-compatible" content="ie-edge">
<link rel="stylesheet" href="Styler.css">
<title>Hikari.de</title>
</head>
<body>
<header class="main-header">
<div class="nav-container">
<div class="nav-left">
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link link">Willkommen</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link">JLPT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link">Kanji</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link">System</a>
</li>
</ul>
</nav>
</div>
<a href="#"class="logo link">
<img src="pics/logo.png" height="100"/>
</a>
<div class="nav-right">
<form action="#" class="search-form">
<input type="text" id="search-input" placeholder="Search here..">
<input type="submit" id="search-btn" value="Search">
</form>
<div class="user-nav">
<a href="#" class="link" id="login-link">Login</a>
<a href="#" class="link" id="signup-link">Register</a>
</div>
</div>
<!--<div class="nav-toggle-btn">
<img cass="nav-toggle-icon" src="pics/burger.png" width="30px";>
</div>!-->
</div>
</header>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------
html {
font-family: sans-serif;
background-color: red;
}
.link{
text-decoration: none;
color: inherit;
}
.nav-container{
background:black;
display: flex;
justify-content:space-between;
align-items: center;
height:40px;
margin-top: 35px;
position: absolute;
width:100%
}
.logo {
display: flex;
align-self: center;
}
.nav-left,.nav-right{
display:flex;
align-items:center;
justify-content:flex-start;
letter-spacing: 1px;
}
.nav-right {
justify-content:flex-end;
align-items: center;
padding-left: 15px;
}
.nav-list {
list-style-type: none;
display:flex;
}
____________________________________
Der CSS-Part ist nur ein Ausschnitt, da ich immer bei solchen Problemen den CSS-Part komplett von vorne schreibe, um den Fehler zu finden... dann probiere ich rum... aber alles rumprobieren hat nichts gebracht.. Auf dem angehängten Foto sieht man es bereits... sobald ich .navlist-> display:flex schreibe, wird der Navcontainer, wenn ich die Fenstergröße verkleinere und dann nach außen scrolle, auch kleiner... ich schreibe display-flex, damit die Elemente, die man wegen noch nicht eingestellter Schriftfarbe nicht sichtbar sind aus dem linken Menü horizontal verteilt werden.. Der Navcontainer soll ganz normal 100% der Seite füllen, so wie das auch der fall ist bevor ich display:flex schreibe..
Vielen Dank im Voraus
LG
Jeff
erstmal der Code, dann die Frage:
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bildschirm anpassen für verschiedenene-Bildschirme/Systeme !-->
<meta http-equiv="X-UA-compatible" content="ie-edge">
<link rel="stylesheet" href="Styler.css">
<title>Hikari.de</title>
</head>
<body>
<header class="main-header">
<div class="nav-container">
<div class="nav-left">
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link link">Willkommen</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link">JLPT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link">Kanji</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link link">System</a>
</li>
</ul>
</nav>
</div>
<a href="#"class="logo link">
<img src="pics/logo.png" height="100"/>
</a>
<div class="nav-right">
<form action="#" class="search-form">
<input type="text" id="search-input" placeholder="Search here..">
<input type="submit" id="search-btn" value="Search">
</form>
<div class="user-nav">
<a href="#" class="link" id="login-link">Login</a>
<a href="#" class="link" id="signup-link">Register</a>
</div>
</div>
<!--<div class="nav-toggle-btn">
<img cass="nav-toggle-icon" src="pics/burger.png" width="30px";>
</div>!-->
</div>
</header>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------
html {
font-family: sans-serif;
background-color: red;
}
.link{
text-decoration: none;
color: inherit;
}
.nav-container{
background:black;
display: flex;
justify-content:space-between;
align-items: center;
height:40px;
margin-top: 35px;
position: absolute;
width:100%
}
.logo {
display: flex;
align-self: center;
}
.nav-left,.nav-right{
display:flex;
align-items:center;
justify-content:flex-start;
letter-spacing: 1px;
}
.nav-right {
justify-content:flex-end;
align-items: center;
padding-left: 15px;
}
.nav-list {
list-style-type: none;
display:flex;
}
____________________________________
Der CSS-Part ist nur ein Ausschnitt, da ich immer bei solchen Problemen den CSS-Part komplett von vorne schreibe, um den Fehler zu finden... dann probiere ich rum... aber alles rumprobieren hat nichts gebracht.. Auf dem angehängten Foto sieht man es bereits... sobald ich .navlist-> display:flex schreibe, wird der Navcontainer, wenn ich die Fenstergröße verkleinere und dann nach außen scrolle, auch kleiner... ich schreibe display-flex, damit die Elemente, die man wegen noch nicht eingestellter Schriftfarbe nicht sichtbar sind aus dem linken Menü horizontal verteilt werden.. Der Navcontainer soll ganz normal 100% der Seite füllen, so wie das auch der fall ist bevor ich display:flex schreibe..
Vielen Dank im Voraus
LG
Jeff