As I work on constructing a website with a video background, my goal is to ensure that all divs are centered and responsive by setting the width and height to 100%. Additionally, I have implemented an overlaying div that fades in and out upon clicking using jQuery. However, I am facing an issue where I cannot achieve an evenly spaced margin around this div after it appears. The specific div that requires margin adjustment has the id "info".
The structure of my HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords"content=""/>
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#info").fadeToggle("slow");
});
});
</script>
</head>
<header>
<div id="nav">
<p><a id="btn" href="#">+</a></p>
</div>
</header>
<body>
<div id="container">
<div id="info">
</div>
</div>
</body>
<video id="video_background" src="vid/147000037.mp4" autoplay>
</html>
Below is the CSS style sheet utilized for styling:
* {
margin: 0;
padding: 0;
}
body {
font-family: "HelveticaNeue-UltraLight","HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}
header {
z-index: 999;
display: block;
height: auto;
width: 100%;
position: fixed;
}
header a {
text-decoration: none;
font-size: 1.8em;
color: #000000;
}
#nav {
position: relative;
float: right;
top: 15px;
right: 20px;
color: #000000;
}
#container {
height: 100%;
width: 100%;
display: block;
}
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
#info {
height: 100%;
width: 100%;
background: rgba(255,255,255,0.97);
z-index: 900;
display: none;
position: fixed;
margin: 10px;
vertical-align: center;
}