1

Tengo el siguiente código:

  .left {
        padding-left: 10px;
        margin-left: 57px;
        float: left;
        position: relative;
        width: 45%;
        height: auto;
        overflow: hidden;
    }
    
    .right {
        padding-left: 10px;
        margin-left: 10px;
        position: relative;
        float: left;
        width: 45%;
        height: auto;
        overflow: hidden;
    }
    #opacity {
        background: rgba(0, 0, 0, 0.72);
        top:0;
        bottom:0;
        margin: 0;
    
    }
<div>
    <div id="opacity">
                <h2> 4Coach, Entrena con nosotros!</h2>
                <div class="left">
                    <p class="texto_c">
                        Las ideas que comunica un texto están contenidas en lo que se suele denominar «macroproposiciones», unidades estructurales de nivel superior o global, que otorgan coherencia al texto constituyendo su hilo central, el esqueleto estructural que cohesiona elementos lingüísticos formales de alto nivel, como los títulos y subtítulos, la secuencia de párrafos, etc. En contraste, las «microproposiciones» son los elementos coadyuvantes de la cohesión de un texto, pero a nivel más particular o local. Esta distinción fue realizada por Teun van Dijk en 1980.1
    
                    </p>
                </div>
                <div class="right">
                    <video width="800" height="600" controls class="video">
                        <source src="video/prueba1.mp4" type="video/mp4">
                        <!--PONER VARIOS FORMATOS PARA ASEGURAR LA REPRODUCCION mp4 compatible con todos los navegadores-->
                        Your browser does not support HTML video.
                    </video>
                </div>
            </div>
            <hr style="clear: both;" />
    </div>
    
  

La estructura del código necesito que se mantenga asi, soy consciente de que hay un div que contiene los demás pero es porque después le daré un diseño a parte. El error que tengo es que solo me sale el la parte opaca en el titulo del div, el texto y el vídeo se quedan completamente fuera, es como si el id=opacity no los englobara.

1 respuesta 1

1

Es tan sencillo como subir un nivel la opacidad:

 .left {
   padding-left: 10px;
   margin-left: 57px;
   float: left;
   position: relative;
   width: 45%;
   height: auto;
   overflow: hidden;
}

.right {
  padding-left: 10px;
  margin-left: 10px;
  position: relative;
  float: left;
  width: 45%;
  height: auto;
  overflow: hidden;
}
#opacity {
  background: rgba(0, 0, 0, 0.72);
  top:0;
  bottom:0;
  margin: 0;

}
<div id="opacity">
  <div>
    <h2> 4Coach, Entrena con nosotros!</h2>
    <div class="left">
      <p class="texto_c">
        Las ideas que comunica un texto están contenidas en lo que se suele denominar «macroproposiciones», unidades estructurales de nivel superior o global, que otorgan coherencia al texto constituyendo su hilo central, el esqueleto estructural que cohesiona elementos lingüísticos formales de alto nivel, como los títulos y subtítulos, la secuencia de párrafos, etc. En contraste, las «microproposiciones» son los elementos coadyuvantes de la cohesión de un texto, pero a nivel más particular o local. Esta distinción fue realizada por Teun van Dijk en 1980.1

      </p>
    </div>
    <div class="right">
      <video width="800" height="600" controls class="video">
        <source src="video/prueba1.mp4" type="video/mp4">
        <!--PONER VARIOS FORMATOS PARA ASEGURAR LA REPRODUCCION mp4 compatible con todos los navegadores-->
        Your browser does not support HTML video.
      </video>
    </div>
  </div>
  <hr style="clear: both;" />
</div>

Al apuntar a un id css interpreta que el siguiente elemento es al que quieres dar el formato, entonces al subirlo un nivel coge el siguiente div como elemento al que quieres dar el estilo y te cubre lo completamente, si no solo te coge el h2

1
  • Toda la razón del mundo, muchas gracias. el 1 jul. 2020 a las 7:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.