Ich kenne mich mit HTML oder CSS nicht aus. Während ich am Aufbau meiner Portfolio-Website arbeite. Ich bin auf ein paar Probleme gestoßen, die ich noch nicht lösen konnte.
Zuerst bin ich Aktiencodes:
CSS:
JS:
Die Seitennavigation funktionierte wunderbar, als ich eine seitlich animierte Navigationsleiste codierte und internes CSS in HTML verwendete. Wie von anderen vorgeschlagen, füge ich den CSS-Code jedoch nach dieser Dokumentation in eine separate CSS-Datei ein. Meine Navigationsleiste funktioniert nicht mehr richtig. Ich habe versucht, den Pfad der CSS-Datei zu überprüfen und sogar den Pfad in den Kopf zu verschieben, aber beides hat nicht funktioniert. Ich hoffe, ihr könnt mir dabei helfen, denn ich bin mir nicht sicher, was ich falsch gemacht habe. Vielen Dank HTML.
Zuerst bin ich Aktiencodes:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="portfolio.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
title>Nin</title>
</head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Source+Code+Pro:wght@200&display=swap" rel="stylesheet">
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">about me</a>
<a href="#">contact</a>
<a href="#">projects</a>
<a href="#">resume</a>
</div>
<span style="color: white; font-size:30px; cursor:pointer" onclick="openNav() ">☰</span>
</body>
</html>CSS:
CSS:
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}JS:
Javascript:
function openNav() {
document.getElementById("mySidenav").style.width = "250px"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0"
}Die Seitennavigation funktionierte wunderbar, als ich eine seitlich animierte Navigationsleiste codierte und internes CSS in HTML verwendete. Wie von anderen vorgeschlagen, füge ich den CSS-Code jedoch nach dieser Dokumentation in eine separate CSS-Datei ein. Meine Navigationsleiste funktioniert nicht mehr richtig. Ich habe versucht, den Pfad der CSS-Datei zu überprüfen und sogar den Pfad in den Kopf zu verschieben, aber beides hat nicht funktioniert. Ich hoffe, ihr könnt mir dabei helfen, denn ich bin mir nicht sicher, was ich falsch gemacht habe. Vielen Dank HTML.
Zuletzt bearbeitet von einem Moderator:
