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

Question

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!

Use `top` instead of `bottom` for `.stubimg`. **EDIT**: This `bottom` setting appears to come from an external stylesheet, with higher specificity. Simply increase your own specificity to override it. — Obsidian Age, Dec 07 '21 at 23:18
This doesn't solve your particular issue, but why do you have the image before your navigation in the markup? Also, why are you using absolute positioning at all for the nav? — disinfor, Dec 07 '21 at 23:18
I believe you can just decrease the value of the `top` property on the `stubimg` class. — Henry Woody, Dec 07 '21 at 23:19
I am using absolute value to make sure that top bottom values work — CRAYPHiSH, Dec 07 '21 at 23:27
I have tried decreasing it, and have deleted the top value even, and it still isn't working — CRAYPHiSH, Dec 07 '21 at 23:28
_I am using absolute value to make sure that top bottom values work_ Why do you need the top and bottom? This appears to be an [XY problem](https://xyproblem.info/). There's probably a better way to accomplish what you're doing. — disinfor, Dec 08 '21 at 17:11

score 0 · Answer 1 · answered Dec 07 '21 at 23:39

0

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

answered Dec 07 '21 at 23:39

CRAYPHiSH

1
3

score 0 · Answer 2 · answered Dec 08 '21 at 08:54

You are using align-content:center;property that's why the image is fixed to the center the page and top is also not working. only this is sufficient to fix the image horizontally center.

.stubimg {     
position: relative;
text-align: center;
}

Now you can fix the position of image as you want.

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

.stubimg {     
position: relative;
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="180px" height="180px">
 </div>
<nav>
  <a href="#">HOME</a>
  <a href="#">ABOUT</a>
  <a href="#">MUSIC</a>
  <div id="indicator"></div>
</nav>
   
 
</body>

</html>

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

2 Answers2