CODEWITHSUNDEEP
htmlcss
Omi in a hellcat
Omi in a hellcat

Reputation: 720

HTML elements change location depending on window size

Hello fellow web developers, I am quite new to web development and have been practicing on my own. I'm trying to create a website and am currently using HTML and CSS. I want the following presentation for the homepage of my website: website home

I have been testing around with wrappers and body wrappers so that when I open the website on one monitor all the elements are displayed in the middle like the picture above, and when I open the website on my other smaller monitor it should be the same and display all the elements with the same layout. The problem is the navigation bar the title and everything changes position once the window size changes.

Here is the code i currently have:

<!DOCTYPE html>
<html>
<title>WUNI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<body>

<!-- !PAGE CONTENT! -->
<div>

        <!-- NAV BAR -->
        <a id="nav">
                <a href="/archive.html" class="item" class="max-width">Archive</a>
                <a href="/index.html" class="item" class="max-width">Home</a>
                <a href="/contact.html" class="item" class="max-width">Contact</a>
        </a>

    <div id="title">
    <h1 class="max-width">WUNI</h1>
    </div>
    <p id="motto" class="max-width">With a wide range of skills, we generate cohesive content that
    span from physical posters to interactive 3D web content
    </p>

</div>

<!-- BODY BORDER XD -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>


<!-- Footer -->
<footer id="footer">
    <i></i>
</footer>

</body>
</html>

and here is my css:

body {
    background-color: red;
    margin-right: auto;
    margin-left:  auto;
    max-width: 960px;
    padding-right: 10px;
    padding-left:  10px;
}


/**
 * Using max-width
 * will improve the browser's handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* end of special */

/* NAV BAR */
#nav{
    display: inline-block;
    padding-top: 20%;
    padding-left: 0%;
}

.item{
    color: white;
    text-decoration: none;
    font-size: 50px;
    padding-bottom: 20px;
    padding-left: 50px;
    font-family: Impact;
}

.item:hover{
    background-color: blue;
}
/* END NAV BAR */

#title{
    position: absolute;
    color: white;
    font-size: 150px;
    text-align: center;
    font-family: Impact;
    top: 10%;
    left: 30%;
}

#motto{
    position: absolute;
    color: white;
    font-size: 20px;
    text-align: center;
    font-family: Impact;
    top: 70%;
    left: 20%;
}

#footer{
    position: fixed;
    left: -3%;
    bottom: 0;
    padding-bottom: 8%;
    width: 100%;
    background-color: transparent;
    color: white;
    text-align: center;
}

/* BODY BORDER */

#top, #bottom, #left, #right {
    background-color: white;
    position: fixed;
}
#left, #right {
    top: 0; bottom: 0;
    width: 30px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
    left: 0; right: 0;
    height: 30px;
}
#top { top: 0; }
#bottom { bottom: 0; }

/* END BODY BORDER */

If anybody could help me out, I would greatly appreciate it! :D

Upvotes: 1

Views: 1622

Answers (2)

Esteban Torres
Esteban Torres

Reputation: 101

Use Css grid system, with template areas and media queries. In this video is a clear example to achieve what you want https://youtu.be/7kVeCqQCxlk

Upvotes: 0

Awad Maharoof
Awad Maharoof

Reputation: 2360

I would recommend using a grid system to achieve this. A grid system solves all the issues you are having currently with your css. One of my personal favorites is bootstrap as it works across browsers, various screen sizes and comes bundled with a bunch of other useful features as well.

As you are new to web development and bootstrap, you can use a visual bootstrap builder such as layitout to get off the ground really quickly.

Also another tip based on your css, you might want to think about making your font sizes responsive too. This answer should be a good starting point

Upvotes: 1

Related Questions