I wanted to start creating a simple website and I am working on the navigation bar and the body now.
Here is the code and later on I will explain the issues.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
#p1 {
float: right;
}
#p2 {
float: right;
}
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet">
</head>
<header>
<div id="navbar">
<a href="#" class="navlink" id="p1">page1</a>
<a href="#" class="navlink" id="p2">page2</a>
</div>
</header>
<div id="logospace"></div>
<body>
<div id="main-content-wrapper">
b
</div>
</body>
</html>ISSUE 1: The links are swapped, no matter what I did. Navigation link 1 and 2 are floated right, but navigation link 1 always ends up on the right, no matter how much I twist and turn the code.
ISSUE 2: The navigation is clearly outside of the body but it still floats at the right side of the body and not of the entire html tag or the website.
ISSUE 3: The body appears over the navigation bar, although it should definetely be under it.
This is driving me absolutely insane and i am looking for solutions.
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire