<html>
<style>
body { background-color:#F1EEF2; }
header {
width:800px;
margin-left:auto;
margin-right:auto;
}
layout {
min-width: 100%;
min-height: 100%;
}
nav.header {
width:800px;
height:40px;
background-color:#000000;
color:#fef8f0;
}
nav.footer {
width:800px;
height:30px;
color:#fef8f0;
}
footer {
width:800px;
height:80px;
background:url(images/footer_beans.png) no-repeat #000000;
margin-left:auto;
margin-right:auto;
}
span {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#c29a5f;
}
p.s1 {
font-family: sans-serif;
font-size:15px;
color:#ffffff;
margin:0px;
padding:10px 24px 0;
}
p.s2 {
font-family: sans-serif;
font-size:15px;
color:#000000;
margin:0px;
padding:12px 10px 15px 12px;
}
ul.header {
width:500px;
margin:0;
padding:0;
padding-top:13px;
float:right;
list-style-type:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
ul.footer {
width:500px;
float:right;
list-style-type:none;
margin: 0;
padding:0;
padding-top:47px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
li {
float:left;
font-size:11px;
font-weight:bold;
margin:0;
}
a {
padding:8px;
color:#fef8f0;
text-decoration:none;
}
section {
width:800px;
margin:0 auto;
}
article {
width:800px;
height:600px;
}
#left, #right {
background: #000000;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 10px;
}
#left { left: 265; }
#right { right: 265; }
#hm_topleft {width:434px; height:300px; float:left;}
#hm_topright {width:366px; height:300px; float:left; background:#570401; margin=0; overflow=hidden;}
#hm_content {width:800px; height:300px; margin:auto; float:left; background-color:#000000;}
#hm_contentbox {width:760px; height:130px; margin:25px; background:#F1EEF2; border:3px solid #000000;}
</style>
<div id="layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta charset=iso-8859-1>
<title>MAJID JORDAN - Home</title>
</head>
<body>
<header>
<nav class="header";>
<ul class="header">
<li><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
<li><a href="#">Albums</a>|</li>
<li><a href="#">Gigs & Tours</a>|</li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
</header>
<section style="width:800px; margin:0 auto;">
<article style=" width:800px; height:600px; ">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\logo.jpg" width="200" height="170" alt="MAJID JORDAN"/>
<div
style="
padding: 10px;
top: 10;
right: 480;
position: absolute;
z-index: 1;
visibility: show;
font-size:35px;">
<h1><center><font face="verdana"><strong>MAJID JORDAN</font></center</strong><h1>
</div>
<div id="hm_contentbox">
<p class="s2">Majid Jordan is a Canadian R&B duo, composed of singer Majid Al Maskati and producer Jordan Ullman. They are signed to OVO Sound, the record label co-founded by rapper Drake, producer Noah "40" Shebib and Oliver El-Khatib.
Jordan, originally from Toronto, and Majid, arriving in Toronto by way of Bahrain, met as students at the University of Toronto in 2011. Working between Ullman's dorm room and his parents' basement, they launched their first joint EP titled Afterhours on SoundCloud under their previous name Good People.</p>
</div>
<div
style="
position: absolute;
top: 390px;
right: 285px;
border: 3px solid black;">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\home.jpg" width="400" height="300" alt="MAJID JORDAN"/>
</div>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:400;left:300;"><strong>
Members
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:480;left:300;"><strong>
Albums & Songs
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:560;left:300;"><strong>
Gigs & Tours
</button></strong>
<button style="border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:640;left:300;"><strong>
Gallery
</button></strong>
<footer style="position:absolute;top:710;>
<nav class="footer">
<ul class="footer">
<li class="hf1"><a>Members </a>|</li>
<li class="hf1"><a>Albums & Songs </a>|</li>
<li class="hf1"><a>Gigs & Tours </a>|</li>
<li class="hf1"><a>Gallery</a></li>
</ul>
</nav>
</footer>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>I'm just starting out with HTML and I'm working on a website for a band I like. It looks good on my computer, but when I view it on another computer with a different resolution, everything gets messed up. Objects start overlapping and the layout is all wrong.
Any guidance for a novice like me would be incredibly helpful. I'm open to providing more information if needed. Thanks in advance for any assistance you can offer!