I need help with this script:( Header, background, logo

HTML & CSS
1

Okei so im very new to coding. and i will make a website where i have a background video with a logo in the center and a header menu on top center that is transparent. and i really dont know what im ding at this point. Can somone look at the script and help me understand what to do? or show me a better script?

And i dont know when to use CLASS and ID tags.

And this is my script: HTML

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="style.css">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<video autoplay muted loop id="myVideo">
    <source src="TV.mp4" type="video/mp4">
  </video>

<body>

    
    <div class="overlay">
    <div class="nav">
        <img class="img"src="logo maad.png" alt="MAAD logo">
        <ul>
          <li class="home"><a href="#">Home</a></li>
          <li class="tutorials"><a href="#">Tutorials</a></li>
          <li class="about"><a href="#">About</a></li>
          <li class="news"><a href="#">Newsletter</a></li>
          <li class="contact"><a href="#">Contact</a></li>
        </ul>
      </div>
</body>
</html>

CSS:


body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
 
.nav ul {
  list-style: none;
  background-color: transparent;
  text-align: center;
  padding: 0;
  margin: 0;
    justify-content: center;
}
.nav li {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #005f5f;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
 
@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
  }

  .overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}
2

Just a very quick look.

Your link to the stylesheet should be after the <head> tag (and before the </head>). And your video tag needs to be within the body.

1 Like
3

@CaMeX, I suggest you make friends with the W3C validators, which are there to help you and will pick up any errors in your code. Check frequently to avoid major headaches. smile

For HTML:

For CSS:
https://jigsaw.w3.org/css-validator/

1 Like
4

An ID attribute is a unique identifier, so any ID value can only be given to any one element on a page.
An ID is referenced in CSS by prefixing the ID name with # , for example #myVideo

A class however, may be used multiple times on the page, and is referenced by prefixing the class name with . in the CSS.

When applying these attribute for the purpose of CSS styling, it is probably better to avoid using IDs unless you have a good reason to do so, and you know what you are doing with it and why.

If as it sounds, you copied this code from elsewhere (rather than wrote it yourself), the author maybe chose an ID for a reason. But the fact the code has very obvious validation errors, does not instil much confidence in the author. This wasn’t written by someone who knows what they are doing.

3 Likes
5

Oh okei thank you:) This helped:)

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.