HTML/CSS - Animations problems

Question

I am trying to make different website animations and using responsive design.

The problem is when I try to apply this changes to my header and affects also to my .heading element. I realized that something is happening with the height in the #main where apparently its height is 0.

Its probably bacuse the structure is not well made.

Could you help me with that? Hope my explanation is clear.

I share with you my code:

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}


/* Esto es para las animaciones */

header {
  float: left;
  top: 0;
  left: 0;
  width: 100%;
  animation-name: moveInLeft;
  animation-duration: 2s;
  animation-timing-function: 1s;
  overflow: hidden;
}

#container {
  overflow: hidden;
}

html {
  font-size: 62.5%;
  font-family: 'Ubuntu', sans-serif;
}

body {
  font-size: 2rem;
  box-sizing: border-box;
}

.options {
  background-color: #777;
  width: 100%;
  display: block;
  z-index: 1;
  height: 3.5rem;
  margin-bottom: 3rem;
}

.select-active {
  background: green;
}

.options ul {
  list-style-type: none;
}

.options ul li {
  float: left;
  transition: all 1000ms;
}

.options ul li a {
  display: block;
  padding: 0.55rem;
  color: white;
  text-decoration: none;
}

.special {
  word-spacing: 0px;
}

.submenu {
  width: 15%;
  float: left;
  background-color: white;
  margin-top: 1.3rem;
}

.body {
  width: 80%;
  float: left;
  padding: 1.5rem;
}

.heading {
  color: black;
  text-align: center;
  font-size: 5rem;
  padding: 0.6rem;
  background-image: linear-gradient( to right bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)), url(/images/logo.png);
  margin-left: 5rem;
  width: 95%;
}

.text {
  text-align: left;
  text-align: justify;
  padding-top: 5.5rem;
  padding-right: 1rem;
  margin-top: 3rem;
  margin-left: 5rem;
  font-size: 1.5rem;
}

h2 {
  text-align: left;
  padding-right: 1rem;
  margin-top: 4rem;
}

.footer {
  background-color: grey;
  float: left;
  width: 100%;
  color: white;
  padding: 4.2rem;
  margin-top: 7rem;
}

.submenu ul li {
  list-style-type: none;
  border: solid 2px white;
  padding: 1rem;
  background-color: rgb(220, 220, 220);
  margin-left: 2rem;
  font-size: 1.5rem;
  transition: all 1000ms;
}

ul li {
  cursor: pointer;
}

.submenu ul li:hover {
  background-color: rgb(0, 150, 255);
  border-radius: 30px;
}

.options ul li:hover {
  background: black;
  transform: translate(5px, 5px);
}

.picture {
  float: right;
  position: relative;
  top: -6.5rem;
  left: -11rem;
}

.logo {
  width: 2.5rem;
}

.footer .bg-video__content {
  object-fit: fill;
  height: 15rem;
  opacity: .5;
}

@media screen and (max-width:992px) {
  header,
  .submenu {
    display: none;
  }
}

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

<div id=container>
  <header id="header">
    <nav class="options">
      <ul>
        <li class="select-active"><a href="">CSS</a></li>
        <li>
          <a href="">
                                SASS
                            </a>
        </li>
        <li><a href="">Javascript</a></li>
        <li span style="word-spacing: 0px"><a href="">Front End vs Back End</a></li>
      </ul>
    </nav>
    <div class="picture">
      <img class="logo" src="https://seeklogo.com/images/C/css3-logo-8724075274-seeklogo.com.png" alt="">
    </div>
  </header>

  <main id="main">
    <aside class="submenu">
      <ul>
        <li>Introducción</li>
        <li>Styling block</li>
        <li>Selectores</li>
        <li>Propiedades</li>
        <li>Cascada y herencia</li>
        <li>The Box Model</li>
        <li>Responsive</li>
      </ul>
    </aside>
    <section class="body">
      <header class="heading">CSS
      </header>
      <article class="text">
        <h2>Styling Blocks</h2><br><br>

        <p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
          establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
          como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
          (como Firefox OS).</p><br>

        <p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
          establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
          como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
          (como Firefox OS).</p><br>

        <p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
          establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
          como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
          (como Firefox OS).</p> <br>

        <p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
          establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
          como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web,y GUIs para muchas aplicaciones móviles
          (como Firefox OS).</p><br>

        <p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
          establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,como
          las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como
          Firefox OS).</p><br>

        <p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
          establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,como
          las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como
          Firefox OS).</p><br>
      </article>
    </section>
  </main>

  <footer class="footer">

    <div class="bg-video">
      <video class="bg-video__content" autoplay muted loop>
                    <source src="vid.mp4" type="video/mp4">
                    <source src="vid.webm" type="video/webm">
                        Your browser is not supported!
                </video>
    </div>
  </footer>
</div>

Welcome, to improve your experience on Stack Overflow please read [how to ask](https://stackoverflow.com/help/how-to-ask) an [On Topic question](https://stackoverflow.com/help/on-topic), and the [Question Check list](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) and [the perfect question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and if not already done, [take the tour](https://stackoverflow.com/tour). — Bsquare ℬℬ, Dec 07 '18 at 10:23
@Bsquare is there somewhere I can copy this comment so I can paste it to other new members? It's clear and not rude, like some of the others I've seen — markmoxx, Dec 07 '18 at 10:25
@markmoxx Thanks :) I build it manually, taking inspiration from some I've seen. Like me, I think you will have to copy paste, and to replace all link with the [ link name ] ( link URI ) syntax. — Bsquare ℬℬ, Dec 07 '18 at 10:27

score 0 · Answer 1 · answered Dec 07 '18 at 10:35

0

You're using floats inside your #main div, which is why the height is 0. You need a 'clearfix' (see What is a clearfix?). Specifically:

#main:after {
  content: "";
  display: table;
  clear: both;
}

Resource

You'd be better off using flexbox for your layouts (as my first link mentions), floats are becoming out of date for page layouts and are no longer best practice.

answered Dec 07 '18 at 10:35

markmoxx

1,492
1
11
21

your code fixed some problems. Also the main problem was because I used the same class for header and other part of my code. I didnt realized until I updated it... By the way thanks a lot for your help and quick response! Have a nice day! – Dec 11 '18 at 08:37

HTML/CSS - Animations problems

1 Answers1