I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.
I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’
The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.
Is there any way that the position of the posted message works for all the inches of the screens? How could I solve this? Can someone tell me if this has a solution? Thank you.
Here is my code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script>
function customAlert(msg,duration)
{
var styler = document.getElementById("welcomeMessage")
styler.setAttribute("style","" );
styler.innerHTML = "<h1>"+msg+"</h1>";
setTimeout(function()
{
styler.parentNode.removeChild(styler);
},duration);
document.body.appendChild(styler);
}
</script>
<style>
#welcomeMessage{
font-family: Arial, Helvetica, sans-serif;
color:#4d4d4d;
background: rgba(0, 0, 255,0.6);
position:fixed;
padding:10px;
text-align:center;
left: 75%;
top:0;
margin-left:-5px;
width:500px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
}
#div2 { /* Style the header */
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/*Navigation bar*/
ul {
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;/*f1f1f1/*#333*/
}
li {
float: left;
}
li a {
display: block;
color: #333333; /*333333*/
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
}
li a.active {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="welcomeMessage"></div>
<script> customAlert("Hello!", 2000)</script>
<div id="div2">
<h1>Project</h1>
</div>
<div class="tab" id="navbar">
<ul>
<li><a class="active">Tab 1</a></li>
<li><a target="_blank">Tab 2</a></li>
<li><a target="_blank">Tab 3</a></li>
</ul>
</div>
</body>
</html>
