I can't figure out a way to stick the navigation bar to right without 'gaps'. I tried different margins like 0px but it didn't work either. I'm trying to achieve this navigation interface
My HTML and CSS :
html,
body {
height: 100%;
margin: 0;
}
nav {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
float: right;
}
.navitem {
float: left;
margin-right: 20px;
}
.greeting {
position: fixed;
right: 0px;
margin-right: 200px;
background-color: #000000;
padding: 0 10px 0 10px;
}
.greetext {
color: #ffffff;
line-height: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./styles/main.css" />
</head>
<body>
<div class="greeting" id="greeting">
<p class="greetext" id="greetext">ahoy matey!</p>
</div>
<nav>
<h2 class="navitem"><a href="">WORK</a></h2>
<h2 class="navitem"><a href="">SKILLS</a></h2>
<h2 class="navitem"><a href="">ABOUT</a></h2>
<h2 class="navitem"><a href="">CONTACT</a></h2>
</nav>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire