Html Internetseite Frage?
Hallo,
ich programmiere zurzeit meine erste Internetseite (aus Spaß) und wollte fragen,wie man folgendes einfügen kann (wenn man auf der Seite scrollt soll das außerdem immer da sein):
Ich danke ganz herzlich.
das soll praktisch ímmer ganz oben zu finden sein.
4 Antworten
Ich persönlich würde fürs Layout entweder auf Grid oder Flexbox zugreifen anstatt alles absolut zu positionieren, was sich auch auf die Responsivität ausübt
Guten Abend.
um diese Navigation immer oben anzuzeigen, musst du diese fixieren. Das funktioniert mit css position: fixed; und top: 0; .
Ein gutes Beispiel dazu findest du auf folgender Seite:
https://www.w3schools.com/howto/howto_css_fixed_menu.asp
Ich hoffe, ich konnte damit etwas weiterhelfen.
LG Colin
Du meinst, dass es immer am oberen Rand ist?
Da könntest du position:fixed oder position:sticky benutzen, um das Objekt an einer Seite zu befestigen. Mit top und left kannst du die Position verändern. Oben rechts währe zum Beispiel: top:0; left:0;
Als nächstes müsstest du dafür sorgen, dass der Text immer in der Mitte der äußeren Box angezeigt wird, da würde ich die flexbox benutzen: display:flex;align-items:center;justify-content:center; width:100%
Der Rest ist dir und deiner Kreativität überlassen.
Bei Fragen, schreib mich gerne an ^^
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