The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Beginner CSS/HTML help with ID's and Classes, I am having trouble using CSS files to hold classes and ID's
nichism
post 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! laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2020, 04:43 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,539
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 22 2020, 05:38 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,539
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd February 2020 - 10:19 PM