Frage Flex-Box schrumpft

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Jefuri007

Neues Mitglied
9 August 2020
3
0
1
27
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
 

Anhänge

MrMurphy

Senior HTML'ler
28 Juli 2009
1.554
225
63
Hier ist offensichtlich wieder mal das Problem, dass du uns nur ein paar Quellcodeschnipsel zur Verfügung stellst ohne sie selbst getestet zu haben.

Der Quellcode verhält sich nicht so wie du es beschreibst. Zudem ist deine Beschreibung schwer zu verstehen.

Deshalb ein paar Anmerkungen zu Angaben in deinem Quelltext, die regelmäßig zu Problemen führen und deshalb vermieden oder angepasst werden sollten:

"position: absolute" und "display: flex" auf ein Element angewendet vertragen sich nicht. "position: absolute" ist heutzutage mehr oder weniger überflüssig, also weglassen. Außer du hast eine Begründung, warum es ausgerechnet in deinem Quellcode Sinn machen sollte.

Auf height-Angaben ohne sachlichen Grund sollte ebenso verzichtet werden.

Das body-Element hat standardmäßig einen margin. Wenn ein Element 100% breit sein soll und nicht seitlich gescrollt werden soll muss der margin vom body-Element auf 0 (Null) gesetzt werden.
 

Jefuri007

Neues Mitglied
9 August 2020
3
0
1
27
Ok sorry... ich komme leider immernoch nicht weiter... ich habe nun 1. den kompletten Code, und 2. "position: absolute" weggelassen... Die höhe des Nav-Containers soll einfach aus optischen Gründen kleiner sein als das Logo..
Ich habe den Pen nun getestet.. und nochmal zur Fragestellung... der Hintergrund des Nav-containers ist schwarz.
Eigentlich beihaltet er auch noch ".logsign"...,aber wenn man das Fenster sehr klein macht, ist der Hintergrund von .logsign nicht mehr schwarz.. der schwarze Balken schrumpft nämlich... sorry nochmal dass ich den Pen nicht getestet habe.. ich kann dieses Problem leider echt nicht alleine lösen..

Hier der Link zum Pen:


Mache das Fenster so schmal wie möglich, und dann siehst du, dass der schwarze balken nicht bis ganz zum Rand reicht.
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Du solltest erstmal dein HTML richtig machen.
Gerade Body und Head sind vollkommen an der falschen Stelle.
Wie soll das eigentlich aussehen ?
Wenn man Fenster klein macht, wäre es schön, das sich der Inhalt untereinander anordnet oder Elemente ausgeblendet werden.
Ein Scrollbalken an der Stelle finde ich da eine sehr schlechte Wahl.
Du kannst den Container auch ein overflow:hidden geben dann ist der Balken lang,aber es wird nicht alles angezeigt beim kleinen Fenster.
 
Zuletzt bearbeitet:

Jefuri007

Neues Mitglied
9 August 2020
3
0
1
27
Ups.. peinlich... ich saß echt viele Stunden dran.. da muss was verrutscht sein.. in dem Pen sind es jedenfalls nurnoch 25 saubere zeilen html.. der Scrollbalken soll auch nicht bleiben... ich scheine ja nur etwas grundlegendes nicht zu verstehen, und sobald ich es verstanden habe kann ich verschiedene Lösungen Testen... Burger-Menüs und andere Lösungen hab ich mir alle schon angeguckt.. und teilweise nachgebaut es geht mir einfach nur um das Verständnis..
Denn nach meinem Verständnis ist der Navbar der äußerste Container, in welchem auch Login/Register (.logsign) enthalten sind.. und warum bei der Verkleinerung dann plötzlich Login/Register scheinbar außerhalb sind .. verstehe ich nicht...

des Weiteren schieben sich die nav-items "Shop" und "Welcome" untereinander wenn man das fenster verkleinert.. warum passiert nicht das gleiche bei Login/Register und dem Searchbar ? Ich hätte gedacht wenn ich

flex-wrap:nowrap;

auf die nav-items anwende, würde das nicht passieren
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
und warum bei der Verkleinerung dann plötzlich Login/Register scheinbar außerhalb sind .. verstehe ich nicht...
Weil du feste px Werte nutzt.
Rechne mal alle px Werte zusammen(Margin,Radding,width usw.), dann kommst du haltest auf ca. 730 px die nicht kleiner werden können. Deswegen kommt da schon die Scrollbar.
Einige Sachen könntest du auch in px,vw,em ändern, dann werden die Felder kleiner beim Fenster verkleinern und bleiben jenachdem länger Sichtbar bevor die Scrollbars kommen.
Wenn du flex-wrap:nowrap; nutzen möchtest dann musst du das in deinen fall beim parent Element anwenden
Code:
.nav-left ul{
    display:flex;
    flex-wrap:nowrap;
}
 
Werbung: