Antwort
Hey ViDa1111 ✌️,
So wie ich deine Frage verstanden habe, möchtest du wissen, wie man dafür sorgt, dass die Navigationsleiste immer am oberen Bildschirmrand sichtbar ist.
Mit CSS kannst du dafür sorgen, dass die Navigationsleiste selbst nach dem Scrollen, weiterhin am oberen Bildschirmrand angezeigt wird.
Quellcode:
════════════════════════════════════════════════════
File: index.html
<!DOCTYPE html>
<html lang="de"> <!-- Definiere die Sprache der Webseite als Deutsch -->
<head>
<meta charset="UTF-8"> <!-- Zeichencodierung auf UTF-8 festgelegt -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigationsleiste</title> <!-- Titel der Webseite im Browser-Tab -->
<style>
/* Basis-Stileinstellungen */
* {
font-family: Arial, Helvetica, sans-serif; /* Schriftart auf Arial/Helvetica gesetzt */
padding: 0;
margin: 0; /* Entfernt Standardabstände */
}
/* Stil für die Navigationsleiste */
.navbar {
background-color: black; /* Hintergrundfarbe der Navigationsleiste */
height: 150px; /* Höhe der Navigationsleiste */
width: 100%; /* Volle Breite der Seite */
list-style: none; /* Entfernt die Bullet-Points in der Liste */
position: fixed; /* Fixiert die Navigationsleiste oben auf der Seite */
top: 0; /* Positionierung am oberen Rand */
display: flex; /* Verwenden von Flexbox für Layout */
flex-direction: row; /* Anordnung der Listenelemente in einer Zeile */
justify-content: flex-end; /* Ausrichtung der Links am rechten Rand */
align-items: center; /* Zentriert die Links vertikal */
gap: 20px; /* Abstand zwischen den Links */
}
/* Stil für die Links in der Navigationsleiste */
.navbar a {
color: white; /* Textfarbe der Links */
font-size: 25px; /* Schriftgröße der Links */
text-decoration: none; /* Entfernt die Unterstreichung */
}
/* Hover-Effekt für die Links */
.navbar a:hover {
text-decoration: underline; /* Unterstreichung, wenn der Mauszeiger über dem Link ist */
}
</style>
</head>
<body>
<header>
<!-- Navigationsleiste als ungeordnete Liste -->
<ul class="navbar">
<!-- Bei den Links, das # durch den Dateipfad anpassen -->
<li><a href="#">Angebote</a></li> <!-- Link zu "Angebote" -->
<li><a href="#">Kundenbewertungen</a></li> <!-- Link zu "Kundenbewertungen" -->
<li><a href="#">FAQ</a></li> <!-- Link zu "FAQ" -->
<li><a href="#">Kontakt</a></li> <!-- Link zu "Kontakt" -->
</ul>
</header>
</body>
</html>
════════════════════════════════════════════════════
Die Entwicklung ist bisher nur ein Hobby von mir, meine Antworten beruhen auf Recherche und Erfahrung, weshalb es vorkommen kann, dass sich Fehler einschleichen.
Ich hoffe, dass dir mit meiner Antwort helfen konnte!
Mit freundlichen Grüßen
o0ojoshua