I have a simple CSS3 animation in my code which was working absolutely fine before I loaded another page, and when I went back to my page, the animation had stopped working.
This problem might of occurred because of my browser (Opera GX) or because of a change in my code. I will give my full code as the issue could be occurring anywhere in my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #002233;
font-family: 'Noto Sans', sans-serif;
color: white;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 132.5px;
position: fixed;
top: 0px;
}
li a {
display: block;
background-color: #001621;
text-decoration: none;
text-align: center;
font-size: 32.5px;
color: white;
}
a1{
color: white;
font-size: 40px;
position: fixed;
top: 0px;
left: 7px;
z-index: 5;
}
.spacer{
aspect-ratio: 960/300;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.layer1{
background-image: url('/wave.svg');
}
}
#keyframes bob {
0%{
transform: translateY(-5px);
}
50%{
transform: translateY(5px);
}
100%{
transform: translateY(-5px);
}
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
</head>
<body onload="hideshow();">
<div style="background-color: #5500ff; color: #5500ff; padding: 40px 100%; position: fixed; top: 0px;">placeholder text</div>
<div class="spacer layer1" style="position: fixed; top: 55px"></div>
<h1 style="position:fixed; top: -15px; left: 41.57vw; font-size: 75px; text-align: center;">AuraPy</h1>
<a1 onclick="hideshow()">☰</a1>
<script>
function hideshow() {
var x = document.getElementById("navbar");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<div Id="navbar" class="navbar">
<ul>
<li><a><br></a></li>
<li> Home</li>
<li>snippets</li>
<li>Apps</li>
<li>Tutorials</li>
<li>About</li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
<li><a><br></a></li>
</ul>
</div>
<h2 style="background-color: #360696; position: fixed; top:235px; left: 43vw; padding: 20px 30px; font-size: 40px;"><b>Bored?</b></h2>
<h3 style="position: fixed; left: 47.75vw; top: 337.5px; animation: bob 2.5s infinite; font-size: 40px; display: inline-block;">👇</h3>
<p style="font-size: 20px; text-align: center; position: fixed; left: 41vw; top: 420px;">Enjoy apps, snippets of code<br>and learning how to make<br>them yourself at Aurapy!</p>
</body>
</html>
Related
As I tried to add a video on my top-wrapper previously.
(Thank you so much for those who leave me some comments.)
However, I still cannot solve the problem.
Well, I could upload a video, but still cannot style properly.
After I uploaded a video like in top-wrapper, then very struggling to style....
please teach me how to code css so that i can place a video in my top-wrapper,,,
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
a {
text-decoration: none;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
}
.top-wrapper {
padding: 100px 0 50px 0;
text-align: center;
background:rgba(255,0,0,0.1);
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TakashiKaida</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<div class="video" src="video3344.mov" autoplay loop muted type="video/mp4"></video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p><br><br>Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of <strong>FLOW</strong></p>
</div>
</div>
</div>
See the description of Mozilla with an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
In your code add the absolute positioning for container to overlay the content. Second thing add the transparent background color :before for top-wrapper class. And also I adjusted the padding based on header height.
body {
margin: 0;
font-family: "Hiragino Kaku Gothic ProN";
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
.mt-50 {
margin-top: 50px;
}
.container {
max-width: 1170px;
width: 110%;
padding: 0 15px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index: 1;
}
.top-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 0, 0, 0.1);
}
.top-wrapper {
padding: 65px 0 0px 0;
text-align: center;
position: relative;
}
.top-wrapper h1 {
font-size: 75px;
letter-spacing: 5px;
padding-top: 5px;
color: white;
text-align: center;
}
.top-wrapper p {
font-size: 25px;
color: white;
text-align: center;
}
header {
height: 65px;
width: 100%;
background-color: rgba(34, 49, 52, 0.9);
top: 0;
position: fixed;
z-index: 10;
}
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
Home
About
Blog
CV
</div>
</div>
</header>
<div class="top-wrapper">
<video autoplay loop width="100%">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div class="container">
<h1>HELLO, IT'S ME.</h1>
<h1>I AM TAKASHI</h1>
<p class="mt-50">Marketing Analyst/Assistant</p>
<p>Co-Founder and CEO of
<strong>FLOW</strong>
</p>
</div>
</div>
I'm not sure how to add a grid below the current background picture and continue adding info. When I try adding a grid now, it just creates one below the navbar and not below the current background.
/**********BODY GENERAL**********/
body {
margin: 0;
}
/* Fix this one day */
.bg-img {
background: url('https://images.unsplash.com/photo-1508781015212-46d58946bb05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39b69f4b9e54ea449f90e3d714bf9215&auto=format&fit=crop&w=1951&q=80') no-repeat center center;
background-size: cover;
height: 100vh;
}
strong {
font-weight: bold;
}
/*********NAVIGATION*********/
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: auto;
text-align: center;
align-items: center;
background: /*rgba(255, 51, 0, .95);
*/
z-index: 10;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.menu1 {
grid-column: 1;
}
.menu2 {
grid-column: 2;
}
.logo {
grid-column: 3;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
font-size: 28px;
width: 500px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 7vh;
margin-bottom: 25px;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
}
.menu3 {
grid-column: 4;
}
.menu4 {
grid-column: 5;
}
/**************HOVER ANIMATION**************/
div>a {
font-family: 'Raleway';
text-transform: uppercase;
text-decoration: none;
color: #000;
position: relative;
font-size: 0.8rem;
}
div>a:hover {
color: #000;
}
div>a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -4px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
div>a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/**********MAIN HEADER***********/
header {
color: white;
justify-content: center;
align-content: center;
top: 0;
bottom: 0;
left: 0;
}
/**********BODY*****************/
.Minfo {
color: red;
width: 100%;
padding-top: 100px;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
}
.subtitle {
padding-left: 4em;
padding-top: 29em;
font-size: 100%;
color: #fff;
}
.title {
font-size: 3em;
text-align: left;
color: #FFF;
padding-bottom: 0px;
}
.subtext {
padding-top: 0px;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centennial It's Academic</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<header>
<nav class="container">
<div class="menu1">
<a class="navLinks" href="#home">Home</a>
</div>
<div class="menu2">
<a class="navLinks" href="#upcoming">Tournaments</a>
</div>
<div class="logo">
<p>It's Academic</p>
</div>
<div class="menu3">
<a class="navLinks" href="#history">History</a>
</div>
<div class="menu4">
<a class="navLinks" href="#faq">Contact Info</a>
</div>
</nav>
<!-- This cluster of info -->
<div class="Minfo">
<div class="subtitle">CENTENNIAL
<br>
<div class="title"> It's Academic</div>
<br>
<div class="subtext">Meets every Tuesday in Room 506</div>
</div>
</div>
</header>
<!--Don't even -->
</div>
</body>
</html>
codepen (Please open in full page mode):
An example of how I would want it to look is like on this website, where all the info is under that background.
I'm not sure what you mean. There are 2 options in my mind:
Push the grid below the image. In this case, just move the header tag from .bg-img and put it after. https://codepen.io/moshfeu/pen/ERWVdZ
You want the fixed effect (just like the website you attached). In this case, you need to use position: fixed on the header.
https://codepen.io/moshfeu/pen/aKJvXW
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/position
So I've been stuck on this issue for over a week now and it's driving me crazy. I want to position my footer at the bottom of my web page. For some reason, it just wants to float in the middle of the page, right underneath my last div. I've done a lot of research and tried a million different things, and none of them have given me the results that I need.
Here are a few of the solutions that I've tried:
I played around with the position property, setting it to 'absolute', 'relative' and 'fixed'. 'Relative' pushed the footer down, but also pushed the content underneath it down as well. 'Absolute' worked in positioning it at the very bottom, but for some reason it cut the width of the footer off. (I tried manually adjusting the width back, but no luck). Same thing with 'fixed'.
I set the margins and padding of the body and html content to 0.
I set the height of the body to 100%.
I checked to make sure all tags were closed.
I tried placing the footer outside of the body.
I've tried creating new divs before and around the footer.
At this point, I'm not sure what the issue is. Can someone assist me?
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
In your css Change
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
to
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
Or you can try
.footer p {
padding-bottom: 0px !important;
}
You have a p element inside your footer that has padding-bottom: 200px;.
You will need to remove it or change the style of the p that inside a footer.
Try this. This will stick your footer at the bottom of the page. I also removed the padding of the paragraph inside of your footer.
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.footer p {
padding-bottom: 0;
}
Working fiddle : https://jsfiddle.net/zrbzf22v/
Change your html like that :
<footer class="footer">
<p style=" bottom: 0px;
padding-bottom: 0px; ">Here's the footer</p>
</footer>
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
bottom: 0;
}
p {
padding-bottom: 0px;
}
Check this Your footer at bottom
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
margin:0px;
width:100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
I use this and i have tested it in your project. its working
footer{
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
text-align: center;
}
I'm learning html/css/javascript by myself, and I've come across a dilemma. For some reason the content of the page is overlapping the header to the page, making the header useless. How do I make the header go on top of the content. I'll include pictures below of the code and how to page looks.
html file,
<!DOCTYPE html>
<html>
<head>
<title>Abismuth Homepage</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css">
<meta charset="UTF-8">
<meta name="description" content="Homepage">
<meta name="keywords" content="Homepage">
<meta name="author" content="Riley">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="../aboutus.html">Abismuth</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Latest story</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<h1><u>Welcome</u></h1>
<p>Demo Text</P
</div>
</div>
<div class="footer">
<div class="container">
<div class="logo">
<h1></h1>
</div>
</div>
</div>
</body>
</html>
Css file,
body {
margin: auto;
background: linear-gradient(132deg, #ffffff, #000000);
background-size: 1500% 1500%;
animation: BackgroundGradient 30s ease infinite;
}
#keyframes BackgroundGradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
.container {
width: 955px;
margin: 0 auto;
word-wrap: break-word;
}
.header {
text-align: centre;
background: #D50000;
width: 100%;
height: 50px;
top: 0;
position: fixed;
}
.footer {
text-align: centre;
background: #D50000;
width: 100%;
bottom: 0;
position: fixed;
}
.logo {
float: left;
color: white;
font-family: 'Helvetica', 'Arial', 'sans-serif';
font-size: 15px;
}
.content {
text-align: center;
padding-top: 50px;
font-family: 'Helvetica', 'Arial', 'sans-serif';
background-color: #ffffff;
opacity: 0.5;
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.nav {
float: right;
font-family: 'Helvetica', 'Arial', 'sans-serif';
}
Since your nav is position: fixed, other elements on the page will not be aware of it's layout and will overlap it, and it will overlap other elements.
Since you've defined a height to the nav, you can use that height as the padding-top on body to offset the nav and start the content below it.
body {
margin: auto;
background: linear-gradient(132deg, #ffffff, #000000);
background-size: 1500% 1500%;
animation: BackgroundGradient 30s ease infinite;
padding-top: 50px;
}
#keyframes BackgroundGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
width: 955px;
margin: 0 auto;
word-wrap: break-word;
}
.header {
text-align: centre;
background: #D50000;
width: 100%;
height: 50px;
top: 0;
position: fixed;
}
.footer {
text-align: centre;
background: #D50000;
width: 100%;
bottom: 0;
position: fixed;
}
.logo {
float: left;
color: white;
font-family: 'Helvetica', 'Arial', 'sans-serif';
font-size: 15px;
}
.content {
text-align: center;
padding-top: 50px;
font-family: 'Helvetica', 'Arial', 'sans-serif';
background-color: #ffffff;
opacity: 0.5;
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.nav {
float: right;
font-family: 'Helvetica', 'Arial', 'sans-serif';
}
<!DOCTYPE html>
<html>
<head>
<title>Abismuth Homepage</title>
<link rel="stylesheet" type="text/css" href="../../css/styles.css">
<meta charset="UTF-8">
<meta name="description" content="Homepage">
<meta name="keywords" content="Homepage">
<meta name="author" content="Riley">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="../aboutus.html">Abismuth</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Latest story</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<h1><u>Welcome</u></h1>
<p>Demo Text</P </div>
</div>
<div class="footer">
<div class="container">
<div class="logo">
<h1></h1>
</div>
</div>
</div>
</body>
</html>
Below my Navigation Bar I have a picture that is covered by a gradient, which fades into the div below it. After this div I have a footer.
I am having a problem trying to embed a YouTube video over my picture div and my gradient div that will extend slightly over my main div.
Essentially, the div that holds my YouTube video needs to go on top of these divs and be positioned in the center of the screen (from left to right), and be responsive.
However, I can't seem to be successful in doing this and all of the tutorials on responsive YouTube videos isn't working.
Can anyone help me please? Thanks!
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<link href="images/favicon.ico" rel="icon" />
<title>Aduro Pictures</title>
</head>
<body>
<header>
<div id="logo_home">
<img id="logo" src="images/logo.jpg" alt="logo">
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a></li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a></li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a></li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a></li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a></li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="main_wrapper">
<div id="image_container"></div>
<div id="gradient"></div>
<div id="main_container"></div>
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016.</p>
</footer>
</body>
</html>
CSS Code:
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 17.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#main_wrapper {
height: 2000px;
width: 100%;
}
#image_container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 580px;
background: url('../images/background5.jpg') no-repeat;
}
#gradient {
position: absolute;
top: 90px;
left: 0px;
width: 100%;
height: 580px;
background: transparent linear-gradient(to bottom, rgba(29, 29, 29, 0.65) 0px, #1D1D1D 100%) repeat scroll 0% 0%;
}
#main_container {
background-color: #1d1d1d;
height: 1420px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
top: 0px;
position: relative;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
margin: 0px;
padding: 0px;
}
Also, I've probably made some mistakes, or have positioned things incorrectly, in which case I apolgize ahead of time. I am new to HTML & CSS.
Thanks!
Simply add a position: absolute to your div#video_container: https://jsfiddle.net/1aa87g9b/