Programmiererforum

Posted: **05 Jan 2025, 07:58**

Die Navigationsleiste ist auch niedriger und das Bild ist einfach da
Gibt es eine Möglichkeit, das Problem ohne JavaScript zu beheben? Ich kann nur
css und html verwenden
Auch der Z-Index scheint nicht zu funktionieren?
Für mehr Kontext funktioniert es Das sieht nicht so aus, wenn ich das Headerbild nicht
Mit

Ohne Headerbild

Code: Select all

* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}

body {
font-family: 'Roboto', sans-serif;
}

.sidebar {
z-index: 999;
}

.sidebar {
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background: #042331;
transition: all .5s ease;
}

.sidebar header {
font-size: 22px;
color: white;
line-height: 70px;
text-align: center;
background: #063146;
user-select: none;
}

.sidebar ul a {
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-bottom: 1px solid black;
border-top: 1px solid rgba(255, 255, 255, .1);
transition: .4s;
}

ul li:hover a {
padding-left: 50px;
}

.sidebar ul a i {
margin-right: 16px;
}

#check {
display: none;
}

label #btn,
label #cancel {
position: absolute;
background: #042331;
border-radius: 3px;
cursor: pointer;
}

label #btn {
left: 40px;
top: 25px;
font-size: 35px;
color: white;
padding: 6px 12px;
transition: all .5s;
}

label #cancel {
z-index: 1111;
left: -195px;
top: 17px;
font-size: 30px;
color: #0a5275;
padding: 4px 9px;
transition: all .5s ease;
}

#check:checked~.sidebar {
left: 0;
}

#check:checked~label #btn {
left: 250px;
opacity: 0;
pointer-events: none;
}

#check:checked~label #cancel {
left: 195px;
}

#check:checked~section {
margin-left: 250px;
}

section {
background: url(bg.jpeg) no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
transition: all .5s;
}

/*  */
.header-image {
background-image: url("https://images.genius.com/6c7454cd6e21bb1afb97a818253f4ef2.1000x1000x1.png");
height: 300px;
background-position: center;
background-size: cover;

}

Code: Select all

[*]






[/i]
[i][/i]


help
[list]
[url=#][i][/i]Dashboard[/url]
[*][url=#][i][/i]Shortcuts[/url]
[*][url=#][i][/i]Overview[/url]
[*][url=#][i][/i]Events[/url]
[*][url=#][i][/i]About[/url]
[*][url=#][i][/i]Services[/url]
[*][url=#][i][/i]Contact[/url]
[/list]

Programmiererforum

Verhindern Sie, dass das Headerbild die Navigationsleiste überlappt, indem Sie nur HTML und CSS verwenden?

Verhindern Sie, dass das Headerbild die Navigationsleiste überlappt, indem Sie nur HTML und CSS verwenden?