3

I have been trying to edit my code such that when my webpage is moved from my 1980x1080 monitor to the 2560x1440 laptop screen the elements (i.e the text, the menu bar...) does not change the position. I have tried wrapping all the HTML code with a wrapper function to ensure a fixed position but it does not work either. The code is attached below; any suggestions would be greatly appreciated. Thank you.

<html>

    <head>
        <title> My Name | My Website </title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="wrapper">
        <header>   
            <div class="row">
                <div class="logo">
                    <img src="uw_logo.png">
                </div>
                <ul class="main-nav">
                    <li class="active"> <a href=""> MAIN </a> </li>
                    <li> <a href=""> PROFILE </a> </li>
                    <li> <a href=""> INTERESTS </a> </li>
                    <li> <a href=""> PROJECTS </a> </li>
                    <li> <a href=""> HOBBIES </a> </li>
                    <li> <a href=""> CONTACT </a> </li>
                </ul>
            </div>

            <div class ="name">
            <h1>My Name.</h1>
                <!-- <div class="button">
                    <a href="" class="btn btn-one"> Watch Video. </a>
                    <a href="" class="btn btn-two"> Explore.</a>
                </div> -->
            </div>

            <div class="major">
            <h2>Astrophysics Student.</h2>
            </div>
        </header>
        </div>
    </body>

</html>

CSS:

*

{
    margin: 0;
    padding: 0;
}

@keyframes fadeIn
{
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}

header /* Linear Gradient makes background darker:  */
{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(spaceship.png);
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
}

.main-nav /* Place menu bars on right side, take out bullets, space from top */
{
    float: right;
    list-style: none;
    margin-top: 2%;
    margin-right: 1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

.main-nav li /* Place menu bars in a horizontal line */
{
    display: inline-block;
}

.main-nav li a{ /* Change text style of menu bars */
    color: white;
    text-decoration: none;
    padding: 2px 2px;
    font-family: "Impact", sans-serif;
    font-size: 100%;
}

.main-nav li.active a
{
    border: 2px solid white;
}

.main-nav li a:hover
{
    border: 2px solid white;
}

.logo img
{
    height: auto;
    width: 300px;
    float: left;
    margin-top: -0.5%;
    margin-left: -1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
} 

body
{
    font-family: monospace;
}

.name 
{
    position: absolute;
    margin-top: 30%;
    margin-left: 62.5%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h1
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

.major
{
    position: absolute;
    width: 40%;
    margin-left: 17%;
    margin-top: 18%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h2
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}
r656
  • 31
  • 1
  • Does this answer your question? [How to set page content to the middle of screen?](https://stackoverflow.com/questions/11093603/how-to-set-page-content-to-the-middle-of-screen) – Divarrek Jul 24 '20 at 07:26

2 Answers2

0

I think what you want is a somewhat responsive Design, so the content kinda keeps its position with changing screen sizes. I recommend using CSS Flex-Box for this. First of all, here is a fantastic tutorial / Insight for that: Tutorial for CSS Flexbox

Okay, and here is my way of solving your problem:

HTML: (unchanged)

        <div id="wrapper">
    <header>   
        <div class="row">
            <div class="logo">
                <img src="uw_logo.png">
            </div>
            <ul class="main-nav">
                <li class="active"> <a href=""> MAIN </a> </li>
                <li> <a href=""> PROFILE </a> </li>
                <li> <a href=""> INTERESTS </a> </li>
                <li> <a href=""> PROJECTS </a> </li>
                <li> <a href=""> HOBBIES </a> </li>
                <li> <a href=""> CONTACT </a> </li>
            </ul>
        </div>

        <div class ="name">
        <h1>My Name.</h1>
            <!-- <div class="button">
                <a href="" class="btn btn-one"> Watch Video. </a>
                <a href="" class="btn btn-two"> Explore.</a>
            </div> -->
        </div>
        <div class="major">
        <h2>Astrophysics Student.</h2>
        </div>
    </header>
    </div>

CSS:

*

{
    margin: 0;
    padding: 0;
}

@keyframes fadeIn
{
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}

header /* Linear Gradient makes background darker:  */
{
    display: flex;/* makes header a css Flex container*/
    flex-direction: column; /* defines that your elements are below each other*/
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(spaceship.png);
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
}
.row{
    display: flex;/* makes row a CSS Flex-container*/
    flex-direction: row; /*this makes a real row out of your container*/
    justify-content: space-between; /* this makes your navbar position on the right*/
    order: -1;/* this positions your Navbar at the top*/
}
.main-nav /* Place menu bars on right side, take out bullets, space from top */
{
    list-style: none;
    margin-top: 2%;
    margin-right: 1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

.main-nav li /* Place menu bars in a horizontal line */
{
    display: inline-block;
}

.main-nav li a{ /* Change text style of menu bars */
    color: white;
    text-decoration: none;
    padding: 2px 2px;
    font-family: "Impact", sans-serif;
    font-size: 100%;
}

.main-nav li.active a
{
    border: 2px solid white;
}

.main-nav li a:hover
{
    border: 2px solid white;
}

.logo img
{
    height: auto;
    width: 300px;
    float: left;
    margin-top: -0.5%;
    margin-left: -1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
} 

body
{
    font-family: monospace;
}

.name 
{
    margin-top: 30%;
    margin-left: 62.5%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h1
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

.major
{
    order: -1; /*this positions your major above the name (like it was in your code 
     example), even tho the order is different in HTMl (works only inside of Flexbox- 
    Elements (header in this case)*/
    width: 40%;
    margin-left: 17%;
    margin-top: 18%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h2
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

Please check out the Tutorial or other tutorials so you understand whats going on here

Warden330
  • 999
  • 1
  • 5
  • 11
0

I must say the question is not 100% clear, but if keeping the 'wrapper' div centered on your screen is what you are after, you should also define the (max) width of your 'wrapper' div.

Add this rule to your css:

#wrapper {
   max-width: 1600px; // a maximum width that should apply to the centered element
   margin:0 auto; // always keep this element horizontally centered.
}

Now, your 'wrapper' div should be centered regardless of screensize, with a maximum width of 1600px.

If you also wish to vertically keep the elements on screen, you should add a position:relative property to the header element , and change your margin-left and margin-top properties on .name and .major to left and right and adjust the values slightly.

Please see this fiddle

Note that you should change some other rules, since you applied background color to the wrapper div. You can fix this by adding the background color to the body element, or wrapping the div again for instance.

Jeroen W
  • 832
  • 6
  • 9