why can't I move this image upward? Css question-CodePudding

I am trying to figure out how to get the stub image closer to the navigation bar using pure css. I have tried using translateY() values to push the image higher, have used 'bottom' and 'top' values with an absolute value (so it should work). I don't believe there are any margins on either the image or the navigation bar, so if you know how to fix this, help would be much appreciated!

Here is my css and html!

@import url('https://fonts.googleapis.com/css2?family=Bungee Inline&display=swap');
html, body
{
    height: 100%;
}

.stubimg {
    position: relative;
    top: 36%;
    text-align: center;
    align-items: center;
    align-self: center;
    align-content: center;
}

body
{
    margin: 0;
    background-color: #051721;
}
nav
{
    position: absolute;
    top: 13%;
    right: 0;
    left: 0;
    width: 319px;
    display: table;
    margin: 0 auto;
    transform: translateY(-50%);
    font-family: 'Bungee Inline', cursive;
}

nav a
{
    position: relative;
    width: 33.333%;
    display: table-cell;
    text-align: center;
    color: #1A4645;
    text-decoration: none;
    font-family: 'Bungee Inline', Geneva, Tahoma, sans-serif;
    font-weight: bold;
    padding: 10px 20px;
  
    transition: 0.2s ease color;
}

nav a:before, nav a:after
{
    content: "";
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.2s ease transform;
}

nav a:before
{
    top: 0;
    left: 10px;
    width: 6px;
    height: 6px;
}

nav a:after
{
    top: 5px;
    left: 18px;
    width: 4px;
    height: 4px
}

nav a:nth-child(1):before
{
    background-color: #F8BD25;
}

nav a:nth-child(1):after
{
    background-color: #cc7000;
}

nav a:nth-child(2):before
{
    background-color: #F8BD25;
}

nav a:nth-child(2):after
{
    background-color: #cc7000;
}

nav a:nth-child(3):before
{
    background-color: #F8BD25;
}

nav a:nth-child(3):after
{
    background-color: #cc7000;
}

#indicator
{
    position: absolute;
    left: 12%;
    bottom: 0;
    width: 30px;
    height: 3px;
    background-color: transparent;
    border-radius: 5px;
    transition: 0.2s ease left;
}

nav a:hover
{
    color: #286868;
}

nav a:hover:before, nav a:hover:after
{
    transform: scale(1);
}

nav a:nth-child(1):hover ~ #indicator
{
    background: linear-gradient(130deg, #F8BD25, #cc7000);
}

nav a:nth-child(2):hover ~ #indicator
{
    left: 45%;
    background: linear-gradient(130deg, #F8BD25, #cc7000);
}

nav a:nth-child(3):hover ~ #indicator
{
    left: 78.5%;
    background: linear-gradient(130deg, #F8BD25, #cc7000);
}

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <meta name="description" content="We are Stub.">
  <meta name="author" content="Stub">

  <meta property="og:title" content="Stub">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://stub.w3spaces.com/">
  <meta property="og:description" content="We are Stub">
  <meta property="og:image" content="https://stub.w3spaces.com/Stub_Tree.png">

  <link rel="icon" href="https://stub.w3spaces.com/Stub_Tree.png">
  <link rel="apple-touch-icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<!-- css-->
  <link rel="stylesheet" href="https://stub.w3spaces.com/main.css?bypass-cache=1625014765">
<!-- fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Unica One&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Varela Round&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Kumar One Outline&display=swap" rel="stylesheet">

<title>Stub</title>
<body>
  <div class="stubimg">
<img  src="https://stub.w3spaces.com/Stub_Tree.png" width="230px" height="230px">
</div>
<nav>
  <a href="#">HOME</a>
  <a href="#">ABOUT</a>
  <a href="#">MUSIC</a>
  <div id="indicator"></div>
</nav>
</body>

</html>

Keep in mind the css for the image is only at the top of the css code, so don't spend time looking for it! I appreciate any help!

CodePudding user response：

I realized that the stubimg class was not set as absolute, but as relative. My bad!

CodePudding user response：

Your .stubimg class has relative positioning. If you are setting top measurements, you have will have to use position: absolute;

@import url('https://fonts.googleapis.com/css2?family=Bungee Inline&display=swap');
html, body
{
    height: 100%;
}

.stubimg {
    position: absolute;
    top: 0px;
    text-align: center;
}

body
{
    margin: 0;
    background-color: #051721;
}
nav
{
    position: absolute;
    top: 13%;
    right: 0;
    left: 0;
    width: 319px;
    display: table;
    margin: 0 auto;
    transform: translateY(-50%);
    font-family: 'Bungee Inline', cursive;
}

nav a
{
    position: relative;
    width: 33.333%;
    display: table-cell;
    text-align: center;
    color: #1A4645;
    text-decoration: none;
    font-family: 'Bungee Inline', Geneva, Tahoma, sans-serif;
    font-weight: bold;
    padding: 10px 20px;
  
    transition: 0.2s ease color;
}

nav a:before, nav a:after
{
    content: "";
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.2s ease transform;
}

nav a:before
{
    top: 0;
    left: 10px;
    width: 6px;
    height: 6px;
}

nav a:after
{
    top: 5px;
    left: 18px;
    width: 4px;
    height: 4px
}

nav a:nth-child(1):before
{
    background-color: #F8BD25;
}

nav a:nth-child(1):after
{
    background-color: #cc7000;
}

nav a:nth-child(2):before
{
    background-color: #F8BD25;
}

nav a:nth-child(2):after
{
    background-color: #cc7000;
}

nav a:nth-child(3):before
{
    background-color: #F8BD25;
}

nav a:nth-child(3):after
{
    background-color: #cc7000;
}

#indicator
{
    position: absolute;
    left: 12%;
    bottom: 0;
    width: 30px;
    height: 3px;
    background-color: transparent;
    border-radius: 5px;
    transition: 0.2s ease left;
}

nav a:hover
{
    color: #286868;
}

nav a:hover:before, nav a:hover:after
{
    transform: scale(1);
}

nav a:nth-child(1):hover ~ #indicator
{
    background: linear-gradient(130deg, #F8BD25, #cc7000);
}

nav a:nth-child(2):hover ~ #indicator
{
    left: 45%;
    background: linear-gradient(130deg, #F8BD25, #cc7000);
}

nav a:nth-child(3):hover ~ #indicator
{
    left: 78.5%;
    background: linear-gradient(130deg, #F8BD25, #cc7000);
}

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <meta name="description" content="We are Stub.">
  <meta name="author" content="Stub">

  <meta property="og:title" content="Stub">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://stub.w3spaces.com/">
  <meta property="og:description" content="We are Stub">
  <meta property="og:image" content="https://stub.w3spaces.com/Stub_Tree.png">

  <link rel="icon" href="https://stub.w3spaces.com/Stub_Tree.png">
  <link rel="apple-touch-icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<!-- css-->
  <link rel="stylesheet" href="https://stub.w3spaces.com/main.css?bypass-cache=1625014765">
<!-- fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Unica One&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Varela Round&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Kumar One Outline&display=swap" rel="stylesheet">

<title>Stub</title>
<body>
  <div class="stubimg">
<img  src="https://stub.w3spaces.com/Stub_Tree.png" width="230px" height="230px">
</div>
<nav>
  <a href="#">HOME</a>
  <a href="#">ABOUT</a>
  <a href="#">MUSIC</a>
  <div id="indicator"></div>
</nav>
</body>

</html>