Beginner CSS/HTML help with ID's and Classes, I am having trouble using CSS files to hold classes and ID's |
Beginner CSS/HTML help with ID's and Classes, I am having trouble using CSS files to hold classes and ID's |
nichism |
Jan 22 2020, 12:58 AM
Post
#1
|
Group: Members Posts: 1 Joined: 22-January 20 Member No.: 27,130 |
I am trying to make a video as my background. It works if I have the CSS code written in <style> </style> within my header in the HTML file. When I put it into my CSS file, it suddenly doesn't want to work. Help? I am very new to web programming.
HTML: CODE <!DOCTYPE html> <html> <head> <title>*beep* Zone</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="stuff.css"> <style> .example{ background-color: rgb(0, 0, 0); font-size:200%; text-decoration:none; color:white; } </style> </head> <body> <video autoplay muted loop id="myVideo"> <source src="pFiles/bg2.mp4" type="video/mp4"> </video> <p><a style="background-color: rgb(0, 0, 0);font-size:400%;text-decoration:none;color:white;"> Kansei's Page </a></p> <p><a href="/index" style="background-color: rgb(0, 0, 0);font-size:200%;text-decoration:none;color:white;">Home Page</a></p> <audio autoplay loop id="myMusic"> <source src="pFiles/wintertime.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <script> var music = document.getElementById("myMusic"); music.volume = 0.15; </script> <img src="https://media.giphy.com/media/fe3Rwmc2bBulG/giphy.gif"> <p><a href="https://shoppy.gg/product/3R6l0hG" style="background-color: rgb(0, 0, 0);font-size:200%;text-decoration:none;color:white;">NordVPN</a></p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> CSS: CODE #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } /*img { display: block; margin-left: auto; margin-right: auto; width: 50%; } audio { display: block; margin-left: auto; margin-right: auto; width: 50%; } h1 {text-align:center;} p {text-align:center;} */ Thanks for the help in advanced! |
pandy |
Jan 22 2020, 04:43 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
The below bit works of you put it in a style block?
CODE #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } I don't see anything wrong with that. Is that all you have in the style sheet? Not anything above those lines? |
pandy |
Jan 22 2020, 05:38 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Or did I misunderstand? Did you mean the class you have in the style block in head works?
In that case, the position: fixed won't make the video a background and 100% height doesn't work the way you think. Sorry, I only looked at the syntax the first time since I thought it worked as you wanted if you placed it in HEAD. Do you see the video at all? |
Lo-Fi Version | Time is now: 26th April 2024 - 09:21 AM |