Div#start is not showing

Question:
The element div#start is not appearing in the webpage, even though I set the text color to white so it appears, but I still can’t see it.
Repl link:
https://replit.com/@element1010/Cosmic-Adventure
https://glitch.com/edit/#!/cosmic-adventure

<div id="start">
  <center>
    <span id="start-title">COSMIC<br/>ADVENTURE</span>
  </center>
</div>
#start-title {
  font-size: 30px;
}

Screenshot: (could this possibly mean it has no dimension? if so how do i fix this?)

image

I see the div #start fine:
image
If you want the div to be fully visible, try adding this code:

main {
margin-top:5vh;
}

Thank you, that’s better. (Also I forgot to set the text color to white :melting_face:)

@Fairies0feast Edit: When I do your suggestion to make the div fully visible, the top navbar is no longer partially transparent. What happened now?

1 Like

This is because the background image is on main, you can use the html tag instead. So, your updated CSS would be:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
  font-family: "Open Sans", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background-image: url("https://cdn.glitch.global/a46ef4ee-032a-46df-8cea-325ae187afbd/space-stars.jpg?v=1707323019391");
}

main {
  width: 100vw;
  height: 100vh; 
  margin-top:5vh;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 5vh;
  background-color: rgba(0, 0, 0, 0.7); /* #TODO: fix alpha colors */
}

.navbutton {
  color: white;
  padding-left: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-top: 10px;
}

.navbutton .selected {
  border-bottom: 2px solid white;
}

#start-title {
  font-size: 30px;
}
1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.