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:
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
