This is my first web page, therefore there will be failures in the structure of the code. I have created a button , I have applied CSS in a stylesheet for the position, but in no page is the position of the button equal.
How can I solve this?
Here I leave the CSS and HTML (what fails is the dropdown-button , the position is different in these two pages, but the CSS is the same):
<!DOCTYPE html>
<html>
<head>
<title>HomePage</title>
<link rel="stylesheet" type="text/css" href="Opmaak.css">
<link rel="shortcut icon" href="logo.ico">
</head>
<body>
<h1>WELKOM OP MIJN SITE!</h1>
<div class="nav">
<div class="body">
<hr>
<div class="warning">
<img src="warning_icon.png" alt="warning icon" style="width:40px;height:40px;border:0px;">
</div>
<i>Deze website is een test voor informatica.</i>
<p style="text-align:left;margin-left:14%;margin-right:5%;">Hey, welkom op mijn site. Dit is een test site, dus het is niet definitief. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Proin pharetra nonummy pede. Mauris et orci.
</p>
</div>
<hr>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="aboutme"><a href="aboutme.html">About</a></li>
<li><a class="games" href="games.html">Games</a></li>
</ul>
<div class="dropdown">
<button class="dropbtn">Multimedia</button>
<div class="dropdown-content">
<a href="mp4.html">MP4</a>
<a href="png.html">PNG</a>
<a href="gif.html">GIF</a>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="shortcut icon" href="logo.ico">
<link rel="stylesheet" type="text/css" href="Opmaak.css">
</head>
<body>
<h1>CONTACT</h1>
<div class="nav">
<hr>
<div class="body">
<p>Hieronder zie je een aantal mogelijkheden van hoe u mij kan bereiken: </p>
<p>Email : [email protected]</p>
<p>Mobiele nummer : +31689675394</p>
<p>Twitter : @RandomName</p>
</div>
<hr>
<div class="dancingman">
<img src="dancingman.gif-c200" alt="dancingman" style="width:200px;height:200px;border:0px;">
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="active" href="contact.html">Contact</a></li>
<li class="aboutme"><a href="aboutme.html">About</a></li>
<li><a class="games" href="games.html">Games</a></li>
</ul>
<div class="dropdown">
<button class="dropbtn">Multimedia</button>
<div class="dropdown-content">
<a href="mp4.html">MP4</a>
<a href="png.html">PNG</a>
<a href="gif.html">GIF</a>
</div>
</div>
</div>
</body>
</html>
h1 {text-align:center;background:linear-gradient(to right, gray, black);color:white;position:fixed;top:0px;width:100%;height:7.4%;z-index:1000; margin:0; font-family:font_h1;font-size:33px; }
body {text-align:center;background-color:#fffff;font-size:20px; margin:0;}
a {font-size:30px;}
@font-face {
font-family: font_h1;
src: url(lifestyle.ttf);
}
.warning {position:relative;top:34px;right:200px;}
.nav{margin-left:10%;margin-top:5%;padding:1px 16px;height:1000px;}
.pikachu{position:relative;right:25px;bottom:38px;}
.dancingman{position:relative;right:27px;bottom:29px;}
.icon_home{font-size:30px;position:relative;bottom:1001px;left:3px;}
.icon_contact{font-size:30px;position:relative;bottom:51px;left:3px;}
.mario {position:relative;bottom:10px;height:400px;width:300px;}
.manmetjas{position:relative;top:10px;height:400px;width:400px;}
.textbody {margin-left:10%;margin-right:4%;text-align:left;}
.textbody2 {margin-left:10%;margin-right:4%;text-align:left;}
.textbodygif {margin-left:18%;margin-right:4%;text-align:left;}
.teamfoto {position:relative;top:50px;}
.games {position:fixed;top:203px;width:13.2%;}
.aboutme {position:fixed;top:250px;width:15.6%;}
.pingpong {position:relative;height:170px;width:200px;right:206px;top: 60px;}
.mariobros {position:relative;height:170px;width:200px;right:196px;top: 100px;}
iframe {
position:relative;
top:40px;
padding-bottom:50px;
}
a.game:link {color:blue; background-color:transparent; text-decoration:none;font-size:25px;}
a.game:visited{color:blue; background-color:transparent; text-decoration:none;font-size:25px;}
a.game:hover{color:red; background-color:transparent; text-decoration:underline;font-size:25px;}
p.pingpong2{position:relative;bottom:100px;left:415px;text-align:left; width:500px; margin-top:20px; }
p.mario2{position:relative;bottom:60px;left:423px;text-align:left; width:500px; margin-top:20px;}
span.titlegame1 {position:relative; bottom:88px; right: 187px;font-size: 25px;}
span.titlegame2 {position:relative; bottom:48px; right: 170px;font-size: 25px;}
hr {opacity:0.6; margin-left:5.3%;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15.6%;
background-color: #e0e0e0;
position: fixed;
height: 600px;
overflow: auto;
right:1129px;
top:47px;
border:1px solid #939496;
left:0px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-size:30px;
}
button:hover{
background-color: #4dd6e2;
color: white;
}
li a.active {
background-color: #309ba5;
color: white;
}
li a:hover:not(.active) {
background-color: #4dd6e2;
color: white;
}
.dropbtn {
background: #e0e0e0 url('dropdown_icon.png') no-repeat 0;
background-size: 25px 25px;
background-position:96% 65%;
color: black;
padding: 16px 25px;
font-size: 30px;
border: none;
outline: none;
cursor: pointer;
font-family: Times New Roman;
position:fixed;
left: 1px;
top:148px;
width: 210px;
height: 55px;
z-index:0;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 90px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
bottom:20px;
right:439px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #4dd6e2;
}