samedi 21 décembre 2019

How to stick vertical text nav bar to right without gaps?

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