Html Question posted in
Some basic documentation can be found here.

centered text gets decentered when trying to add other text (html)

so i’m trying my hand at making a neocities, and i’m making a 404 page and i wanna add a note that the gif background is broken on firefox. however, when i try to add new text to appear in the top left corner, the text in the centre becomes decentered.
here’s the code for the css file

html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        
        body {
              display: table
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
                  color: #4c00b0;
                  font-family: utcomicsans;
            
        }
        
        .normal {
          color: #ffffff;
          font-family: 'Times New Roman', serif;
          display: table-cell;
        }
          
        body {
          background-color: #000000;
        }
        body{
          background-image: url(starstwinkle.gif);
          background-size: cover;
    
    
    
          height: 100vh;
          padding:0;
          margin:0;
        }
        
        @font-face {
            font-family: utcomicsans;
            src: url(comic-sans-ut.ttf);
        }

and here’s the code and screenshot for the page with and without the note

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Not Found</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    
    <div class="my-block">
       <h1>oops! nothing here!</h1><br />
       <h2>dw it's probably my fault that you're here</h2>
    </div>
    
  </body>
</html>

404 page without the note

and here it is with the note

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Not Found</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <div class="normal">for some reason the background doesn't work on firefox, you have to click constantly for the to animate. idk why and i can't be bothered to fix it, sowwy :(</div>
    <div class="my-block">
       <h1>oops! nothing here!</h1><br />
       <h2>dw it's probably my fault that you're here</h2>
    </div>
    
  </body>
</html>

404 page with the note

i tried like removing certain parts to see what they did and if they were maybe causing the problem (i didn’t write the code that centres the text) but that did nothing and just messed it up more. i also tried switching to a different centering method but it didn’t even work without the note. so yeah i’m kinda lost. any help would be appreciated!

Tags:

2

Answers


  1. 0

    you can try absolutely positioning the normal text (your note) in relative to your parent div.

    You can position your parent div i.e. your body using

    position: relative;

    And give absolute position to the normal text with some margins.

    position: absolute;
top: 1rem; /*based on your preference*/
left: 1rem; /*based on your preference*/

    Hope this helps and correct me if I am wrong!

    Login or Signup to reply.
  2. 0

    If you want to center the div with class=’normal’ you can try this. If you don’t wish to add many lines, you can just use the option 2.

    Option 1:

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
      display: table
}

.my-block {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
          color: #4c00b0;
          font-family: utcomicsans;
    
}

.normal {
  color: #ffffff;
  font-family: 'Times New Roman', serif;
  display: table-cell;
}
  
body {
  background-color: #000000;
}
body{
  background-image: url(starstwinkle.gif);
  background-size: cover;



  height: 100vh;
  padding:0;
  margin:0;
}

@font-face {
    font-family: utcomicsans;
    src: url(comic-sans-ut.ttf);
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Not Found</title>
  <link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>

  <div style="
       display: flex;
       flex-direction: column;
       height: 100%;
   ">
    <div class="normal">for some reason the background doesn't work on firefox, you have to click constantly for the to animate. idk why and i can't be bothered to fix it, sowwy :(</div>
    <div class="my-block" style="
       flex-grow: 1;
       display: flex;
       align-items: center;
       justify-content: center;
   ">
      <h1>oops! nothing here!</h1><br>
      <h2>dw it's probably my fault that you're here</h2>
    </div>
  </div>


</body>

</html>

</html>

    Option 2:

    Just add

    position: absolute to the class normal. The will act itself as a relative parent.

    .normal {
  color: #ffffff;
  font-family: 'Times New Roman', serif;
  display: table-cell;
  position:absolute
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search