Help with getting a box to stay the same across pages

[lamreii]

Hi!

I'm working on my website and come across a snag that I can't work out myself after a while of trying. The site is here: boop ! I'd like to have the central box stay the same across pages of the site, but it keeps changing height between the Home and Shrine pages. I'm sure it's just me doing something silly here, but I've tried several things to keep it consistent and I'm not sure why it keeps floating up on the Shrine page.

I do want to add a right sidebar as well, so solutions would ideally leave room for that too.

If it's important, I've been using the guide from here about using Javascript to keep your html consistent without copy/pasting it into each page.

I'd love some help making the content boxes on the site stay in the same place regardless of what's in them! Thank you <3

Relevant code below:

Spoiler

My CSS:

Code

.playwrite-fr-moderne{
    font-family: "Playwrite FR Moderne", serif;
    font-weight: 200;
    font-style: normal;
  }
    
    h1 {
      font-family: "Playwrite FR Moderne";
      font-size: 90px;
      text-align: center;
      color: #f8eaaa;
      padding: 0px;
      margin-top: 100px;
      line-height:10px;
    }

    a {
      text-decoration: none;
      color: #ffffff;
    }
    
body {    
        background-image: url("/IMAGES/starcloudbg.png");
        background-color: #639e91;
        background-size: cover;
        color: #ffffff;
        font-family: "Montserrat Alternates";
        line-height: 40px;
        margin-top: 50px;
      }

content {
        box-sizing: border-box;
        display: inline-block;
        border: #f8eaaa 2px solid;
        border-radius: 40px;
        position: absolute;
        width: 700px;
        margin-top: -20px;
        margin-left: 550px;
        padding: 40px;
        font-size: 15px;
        line-height: -10;
      }

      aside {
        border: #f8eaaa 2px solid;
        border-radius: 40px;
        padding-left: 4px;
        margin-top: -50px;
        margin-left: 300px;
        text-align: center;
        align-items: center;
        width: 180px;
        position: absolute;
        padding: 10px;
        line-height: 25px;

      }
    .montserrat-alternates-thin {
        font-family: "Montserrat Alternates", serif;
        font-weight: 100;
        font-style: normal;
      }
      
      .montserrat-alternates-extralight {
        font-family: "Montserrat Alternates", serif;
        font-weight: 200;
        font-style: normal;
      }
      
      .montserrat-alternates-light {
        font-family: "Montserrat Alternates", serif;
        font-weight: 300;
        font-style: normal;
      }
      
      .montserrat-alternates-regular {
        font-family: "Montserrat Alternates", serif;
        font-weight: 400;
        font-style: normal;
      }
      
      .montserrat-alternates-medium {
        font-family: "Montserrat Alternates", serif;
        font-weight: 500;
        font-style: normal;
      }
      
      .montserrat-alternates-semibold {
        font-family: "Montserrat Alternates", serif;
        font-weight: 600;
        font-style: normal;
      }
      
      .montserrat-alternates-bold {
        font-family: "Montserrat Alternates", serif;
        font-weight: 700;
        font-style: normal;
      }
      
      .montserrat-alternates-extrabold {
        font-family: "Montserrat Alternates", serif;
        font-weight: 800;
        font-style: normal;
      }
      
      .montserrat-alternates-black {
        font-family: "Montserrat Alternates", serif;
        font-weight: 900;
        font-style: normal;
      }
      
      .montserrat-alternates-thin-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 100;
        font-style: italic;
      }
      
      .montserrat-alternates-extralight-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 200;
        font-style: italic;
      }
      
      .montserrat-alternates-light-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 300;
        font-style: italic;
      }
      
      .montserrat-alternates-regular-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 400;
        font-style: italic;
      }
      
      .montserrat-alternates-medium-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 500;
        font-style: italic;
      }
      
      .montserrat-alternates-semibold-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 600;
        font-style: italic;
      }
      
      .montserrat-alternates-bold-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 700;
        font-style: italic;
      }
      
      .montserrat-alternates-extrabold-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 800;
        font-style: italic;
      }
      
      .montserrat-alternates-black-italic {
        font-family: "Montserrat Alternates", serif;
        font-weight: 900;
        font-style: italic;
      }
      

Home page html:

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LAMREII</title>
        <link rel="stylesheet" type="text/CSS" href="homestyle.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playwrite+FR+Moderne:wght@100..400&display=swap" rel="stylesheet">
    </head>
<body>
<br>
<content> 
    <i>Please excuse the jank while I try to remember how html/css works! This site will undergo a lot of changes in the next weeks.</i><br>
    Hello! My name is Ryan or Lam. I am an artist trying to remember how css and html work. Like a lot of artists, I've grown sick of mainstream social media and yearn for a totally customisable space like this without coporations butting their heads in.
    I'll post art here, things about my interests, hopefully keep a blog up about my projects...everything you can do with a personal website!
</content>
<script src="layout.js"></script>
</body>

Shrine page html:

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LAMREII</title>
        <link rel="stylesheet" type="text/CSS" href="homestyle.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playwrite+FR+Moderne:wght@100..400&display=swap" rel="stylesheet">
    </head>
<body>

<content>
    <ul>
    <u>SHRINES</u>
    <li><a href="/gale.html">Gale Dekarios (WIP)</a> </li>
    <li>Early Tomb Raider (Coming soon)</li> 
    <li>Arthurian Legend (Coming soon)</li> 
    <li>FFXIV (Coming soon)</li> 
    </ul>
</content>
<script src="layout.js"></script>
</body>

[close]

(Apologies if my code is a mess, I'm somewhat new to this!) 

[holly]

OK! first of all, change the background image to be a jpeg, it's around 4k resolution & kind of overkill, just like play around with making sure it doesnt load like really slow and ruin the immediate experience with ur website. SO the little content box u have moves up a little on the shrine page because u are missing ur < br > tag from the homepage, u can make it more uniform without the < br > tag by using clever margin's, i.e. margin-top, & if u wanted it to stay the same like size u would need to set the height property or min-height

[Kallistero]

I'd like to have the central box stay the same across pages of the site, but it keeps changing height between the Home and Shrine pages. I'm sure it's just me doing something silly here, but I've tried several things to keep it consistent and I'm not sure why it keeps floating up on the Shrine page.

There's a < br > element in the body of the home page, and there isn't a < br > element in the body of the shrines page. Make those match, and the problem goes away.

Because you're using only elements with "absolute" positioning, the < body > element of the document isn't stretching with the content on the page. But when you add that < br > element, which does NOT have absolute positioning, it stretches the size of the body, which makes the "margin-top" CSS attribute on the < content > tag see a different bottom height for the body on that page.

I suggest:

• getting rid of the < br > on the home page
• getting rid of the "margin-top: -20px" line of the "content" CSS selector on BOTH pages

 

[lamreii]

Thank you both very much! 

OK! first of all, change the background image to be a jpeg, it's around 4k resolution & kind of overkill, just like play around with making sure it doesnt load like really slow and ruin the immediate experience with ur website.

I totally forgot to resize the image when I was taking it out of Procreate when I made it, haha. Thank you for pointing this out, put a much smaller jpg one up now and it does indeed load much quicker :D

Because you're using only elements with "absolute" positioning, the < body > element of the document isn't stretching with the content on the page. But when you add that < br > element, which does NOT have absolute positioning, it stretches the size of the body, which makes the "margin-top" CSS attribute on the < content > tag see a different bottom height for the body on that page.

Thanks for this and your suggestions, I understand better now how absolute positioning works and fixed it! :)