Ich stehe da auf dem CSS - Schlauch [erledigt]

Sparfuchs76 · 21.05.2024

Hi,

ich bin gerade angefangen mit html und css. hab schon einige Tutorials hinter mir und versuche gerade privat eine Page zu erstellen. Ich habe aber das Problem das bei einem Bildschirm kleiner als 600px die Nav Leiste verschwinden soll code im header.css rauskommentiert und beim click auf das logo das Menü sichtbar ist. bei mir ist es entweder immer sichtbar Kommentierung weg oder immer unsichtbar - keine Funktion der Checkbox? Ich vermute mal ein kleiner Kinken der mich etwas frustriert

. Vielleicht kann mir hier jemand weiter helfen? Ich komme leider im header.css nicht weiter.

Vielen Dank schon mal VG Jens

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Haustechniker / House Technician</title>
<link rel="stylesheet" href="general.css"/>
<link rel="stylesheet" href="header.css">
</head>
<body>
<main>
<header>
<nav>
<div class="logo-container">
<input type="checkbox" id="toggle-button">
<label for="toggle-button">
<span><img class="logo-symbol" src="/img/logo2.png" alt=""></span>
<div class="logo-text">Haustechniker / House Technician</div>
</label>
</div>

<div class="nav-container" id="nav-container">
<ul>
<li><a href="#">Aufgaben</a></li>
<li><a href="#">Besprechungsraum</a></li>
<li><a href="#">Festzeltgarnitur</a></li>
<li><a href="#">Team</a></li>
</ul>
</div>
</nav>
</header>

<section>
<article class="aufgaben-container"><h2>Aufgaben</h2></article>
</section>
<section>
<article><h2>Besprechungsraum</h2></article>
</section>

<section>
<article class="article-header"><h2>Festzeltgarnitur</h2></article>
</section>
<section>
<article><h2>Team</h2></article>
</section>

<footer>Footer</footer>
</main>
</body>
</html>

general css

:root {
--main-brand-color: #297AE3;
--accent-color: #d52c3a;
--primary-color: #15171C;
--secondary-color: #232933;
--light-secondary-color: #2E3744;
--text-color: white;
--secondary-text-color: #B3B4B6;
--headerHeight: 7rem;
--logoHeight: 5rem;
}
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background-color: var(--primary-color);
font-family: "Roboto", sans-serif;
font-size: 14px;
color: var(--text-color);
}
main {
width: 100%;
background-color: var(--secondary-color);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: var(--headerHeight) 0 0 0;
}

header css

header {
padding: 20px 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
flex-wrap: wrap;
}
nav {
width: 100%;
height: var(--headerHeight);
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: var(--primary-color);
z-index: 3;
display: flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
}
.nav-container ul {
list-style: none;
display: flex;
gap: 10px;
margin-right: 20px;
}
.nav-container a {
color: var(--secondary-text-color);
text-decoration: none;
position: relative;
padding: 3px;
}
.nav-container a:hover {
color: var(--text-color);
}
.nav-container a::after {
content: '';
height: 2px;
width: 0%;
background: var(--main-brand-color);
position: absolute;
bottom: 0;
left: 0;
transition: 150ms ease-in-out;
}
.nav-container a:hover::after {
width: 100%;
}
.logo-container {
position: relative;
margin-bottom: 20px;
}
.logo-text {
position: absolute;
top: 80%;
left: 50%;
z-index: 1;
color: var(--secondary-text-color);
font-size: 10px;
}
.logo-symbol {
height: var(--logoHeight);
margin-left: 20px;
}
#toggle-button {
display: none;
}
@media(max-width: 600px) {
nav {
position: absolute;
top: 0;
left: 0;
display: block;
padding-top: 4px;
}

nav ul {
flex-direction: column;
background: var(--accent-color);
padding: 10px;
border-radius: 20px 20px 20px 20px;
justify-content: center;
}
/*
.nav-container {
display:none;
}
*/
#toggle-button:checked ~ .nav-container {
color: var(--text-color);
}
label[for="toggle-button"] {
display: block;
}
.logo-symbol:hover {
cursor: pointer;
}
.aufgaben-container {
margin-top: 100px;
}
}

Sempervivum · 21.05.2024

Hallo und willkommen im Forum!
Für den Anfang sieht das doch schon Mal gut aus, Du hast sogar CSS-Variablen verwendet.

Der Grund warum das mit dem Checkbutton nicht funktioniert: Dieser und die Navigation sind keine Geschwisterelemente, denn sie liegen in verschiedenen Containern. Glücklicher Weise kannst Du den Checkbutton beliebig anordnen, wenn Du ihn auf die selbe Stufe wie die Nav legst, funktioniert es:

Code:

        <header>
            <nav>
                <input type="checkbox" id="toggle-button">
                <div class="logo-container">
                    <label for="toggle-button">
                        <span><img class="logo-symbol" src="images/buttondown.png" alt=""></span>
                        <div class="logo-text">Haustechniker / House Technician</div>
                    </label>
                </div>

                <div class="nav-container" id="nav-container">
                    <ul>
                        <li><a href="#">Aufgaben</a></li>
                        <li><a href="#">Besprechungsraum</a></li>
                        <li><a href="#">Festzeltgarnitur</a></li>
                        <li><a href="#">Team</a></li>
                    </ul>
                </div>
            </nav>
        </header>

Noch ein Hinweis: Dein Header überdeckt den Hauptinhalt, das kannst Du sehr leicht beheben indem Du für position nicht fixed sondern sticky verwendest.

Und Code besser in Codetags posten:

AndreasB · 21.05.2024

Du versuchst mit #toggle-button:checked ~ .nav-container die Sichtbarkeit deines Menus zu steuern.
Das funktioniert nicht, da #toggle-button und .nav-container keine Geschwisterelemente sind. (~) selektiert alle nachfolgenden Geschwisterelemente.

Wenn du bei dem HTML Gerüst bleiben möchtest und ich vermute mal, dass du an diesem Punkt deiner Reise noch kein JavaScript verwenden möchtest (was hier wesentlich empfehlenswerter ist),
könntest du mal die CSS :has Pseudoklasse versuchen:

CSS:

.logo-container:has(#toggle-button:checked) ~ .nav-container

Das wird dich zum Ziel bringen. :has sollte aber sparsam eingesetzt werden, da dadurch der Code schnell unübersichtlich werden kann und auch sehr die Performance ducken kann.

Sparfuchs76 · 22.05.2024

Hallo ihr beiden,

ach schade so einfach und doch sooo schwer für mich

. Danke dafür! Kann mich schwarz ärgern nicht selber drauf gekommen zu sein.

@Sempervivum danke für die Lösung und die Tips.
@AndreasB dir auch ein Dank, bin erst seit kurzem mit dem html und css gestartet wollte mich noch nicht an einer dritten Sprache wagen aber folgt gewiss.