2

Buenas esta es mi primera pregunta y espero hacerlo bien, estoy copiando una pagina web para practicar html y css, lo que me sucede es que al intentar poner el background azul de page-section-2 en realidad se pone azul la page-section-1 y no tengo idea de que puede si alguien me puede ayudar se aprecia, si no se me entiende la pregunta mis disculpas y si me dicen como mejorar se agradece

html{
	box-sizing: border-box;
}
*, *:before,*:after{
	box-sizing: inherit;
}

body{
	font-family: verdana, geneva, serif;
}
div.contenedor-body::after {
  clear: both;
  content: '';
  display: block;
}
/*--------Contenedor principal-------------*/
.contenedor-body{
  width: 1200px;/*80%*/
  margin: 0 auto;
}
h2{
	text-align:center;
}
h3{
  text-align:center;
}
p{
  text-align: center;
}
.material-icons{
	font-size: 300%;
}

.material-icons{
text-align: center;
width: 100%;
margin:0 auto;
}

.page-section-2{
  background-color: blue;
}

/*--------Contenedor principal-------------*/

@media only screen and (min-width: 768px){
  /********PAGE SECTION 1*********/
  .colum-1{ 
  width:75%;
  text-align: center;
  padding-left: 364px ;/*24%*/
  }
  .colum-2, .colum-3, .colum-4{
  width: 33.3%;
  float:left;
  padding-left: 15px%;/*15px*/
  padding-right:15px%;/*15px*/
    
  }
}
  /**********PAGE SECTION 2********/
  @media only screen and (min-width: 768px){

  div.col-A{
  width: 33.3%;
  float: left;
  padding-left: 15px%;
  padding-right: 15px;
  
  padding-bottom: 15px;
  }  

  div.col-B{
  width: 33.3%;
  float: left;
  padding-left: -0.5%;
  padding-right: 15px;

  height: 1px; 
  padding-bottom: 1px;/*60%*/
  }

  div.col-C{
  width: 33.3%;
  float: left;
  padding-left: 15px;
  padding-right: 15px; 

  padding-bottom: 475px;/*15%*/
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cursos de Diseño Web - CSS</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet"  href="css/normalize.css">
    <link rel="stylesheet"  href="css/stilos.css">
  </head>
  <body>
    <div class="contenedor-body">
      <div class="top-banner">

       <!--PRIMERA SECCION DE LA PAGINA-->
      <header> 
        <div class="navegacion">
           <nav class="menu-principal">
             <ul>
               <li>
                 <a href="#">Inicio</a>
               </li>
               <li>
                 <a href="#">Empresa</a>
               </li>
               <li>
                 <a href="#">Servicios</a>
               </li>
               <li>
                 <a href="#">Productos</a>
               </li>
               <li>
                 <a href="#">Registro</a>
               </li>
               <li>
                 <a href="#">Contacto</a>
               </li>
             </ul>
          </nav>
          </div>   
        </header>
        <div class="page-section-1">
          <div class="contenedor">
            <div class="columnas">
              <div class="colum-1">
                <h2>PACIFIC ALIANCE CAPITAL</h2>
                  <p>Con la inclusión de nuevas tecnologías y productos de inversión, pretendemos contribuir al desarrollo de dichos mercados siendo líderes de la industria del Trading e Inversiones.</p>
              </div>

              <div class="colum-2">
                
                  <a href="#"><i class="material-icons">devices</i></a>
                  <h3>Acceso Mundial</h3>
                 
                  <p>1-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
              </div>

              <div class="colum-3">
                
                  <a href="#"><i class="material-icons">devices</i></a>
                  <h3>Acceso Mundial</h3>
                  
                  <p>2-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
              </div>

              <div class="colum-4">
               
                  <a href="#"><i class="material-icons">devices</i></a>
                  <h3>Acceso Mundial</h3>  
                  <p>3-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
              </div>
            </div>
          </div>
        </div>

         <!--FIN DE LA PRIMERA SECCION DE LA PAGINA-->

        <!--SEGUNDA SECCION SECCION DE LA PAGINA-->

        <div class="page-section-2">
          <div class="contenedor">
            <div>
              <h2>ASESORIAS A SU MEDIDA</h2>
              <p>En Pacific Alliance Capital brindamos asesorías personalizadas, adaptándonos día a día a los cambios de los mercados financieros. Si quiere lograr que su cartera de inversiones tenga óptimos resultados no dude en consultarnos.</p>
            </div>
            <div class="col-A">
              <div>
                <a href="#"><i class="material-icons2"></i></a>
                <h3>Informacion en tiempo real</h3>
                <p>Analizamos los mercados para ofrecer las mejores opciones de negociación.</p>
                </div>
                <div>
                <a href="#"><i class="material-icons2"></i></a>
                <h3>Noticias y Analisis</h3>
                <p>Obtenga acceso a la totalidad de nuestros datos e informes del mercado.</p>
                </div>
            </div>

            <div class="col-B">
              <img src="img/cellphone.jpg" alt="Imagen-de-aprobacion">
            </div>

           <div class="col-C">
            <div>
              <a href="#"><i class="material-icons2"></i></a>
              <h3>Portafolio de Inversion</h3>
              <p>Negocie con nuestra amplia gama de instrumentos en cualquier mercado que desee.</p>
            </div>
            <div>
               <a href="#"><i class="material-icons2"></i></a>
              <h3>Listo para comenzar</h3>
              <p>Proporcionamos las mejores condiciones de trading, la mayor velocidad de ejecución que se adaptan a sus necesidades.</p>
            </div>
          </div>
          </div> 
        </div>

          <!--FIN DE LA SEGUNDA SECCION DE LA PAGINA-->

          <!--Intermedio de la pagina-->

        <div class="page-intermedio">
          <div class=contenedor">
            <div>
              <p class="pacific">Pacific Aliance Capital | Una gran oportunidad para invertir</p>
            </div>
          </div>
        </div>

        <!--Intermedio de la pagina-->
        
        <!--TERCERA SECCION DE LA PAGINA-->
        <div class="page-section-3">
          <div class="contenedor">
            <div >
              <h2>POR QUE ELEGIRNOS</h2>
              <p>Le ofrecemos claridad, simplicidad y transparencia. Le ofrecemos formación y posibilidad de elegir Sus prioridades son nuestras prioridades. Y si necesita ayuda para cualquier cosa, estamos disponibles para ayudarle de inmediato. Trabajamos sin descanso para conseguir que sus operaciones le resulten más sencillas y ofrecerle una experiencia única al operar.</p>

              <p>El principal componente de Pacific Alliance Capital son nuestros clientes y el enfoque en sus necesidades. Ofrecemos servicios de calidad, además de un trabajo continuo en la mejora de las tecnologías, que nos ayudan a mantenernos en una posición líder en asesorias de mercados financieros.</p>
              <a href="#">Contactanos</a>
              <a href="#">Registrate</a>
            </div>
          </div>
        </div>

        <!--FIN DE LA TERCERA SECCION DE LA PAGINA-->

         <!--Intermedio de la pagina-->

        <div class="page-intermedio-2">
          <div class=contenedor">
            <div>
              <p>ACCEDE A MAS DE 10.000 INSTRUMENTOS SUBYACENTES</p>
            </div>
          </div>
        </div>

        <!--Fin de el Intermedio de la pagina-->
        
        <!--Contacto-->
        <div class="Contacto">
          <div>
            <div>
              <textarea name="Mensaje" id="Mensaje" cols="30" rows="10" placeholder="Mensaje"></textarea>
            </div>
            <div>
              <input type="text" name="Nombre" placeholder="Nombre">
              <input type="text" name="Email" placeholder="Email">
              <input type="text" name="Asunto" placeholder="Asunto">
              <input type="submit" value="enviar">
            </div>
          </div>
          
        </div>
      </div>
      <footer>
        <p class="copyright">&copy;Copyright2018 Pacific Aliance  Capital | Todos los derechos reservados </p>
        <div class="navegacion">
          <nav class="menu-principal">
           <ul>
             <li>
               <a href="#">Inicio</a>
             </li>
             <li>
               <a href="#">Empresa</a>
             </li>
             <li>
               <a href="#">Servicios</a>
             </li>
             <li>
               <a href="#">Productos</a>
             </li>
             <li>
               <a href="#">Registro</a>
             </li>
             <li>
               <a href="#">Contacto</a>
             </li>
           </ul>


         </nav>
        </div>
      </footer>
    </div>
  </body>
</html>

1 respuesta 1

3

Te falta usar la propiedad clear.

Especifica en qué lados de un elemento flotante no se permite flotar.

Se te ponía el otro trozo azul porque el div flotaba en el de encima.

html{
	box-sizing: border-box;
}
*, *:before,*:after{
	box-sizing: inherit;
}

body{
	font-family: verdana, geneva, serif;
}
div.contenedor-body::after {
  clear: both;
  content: '';
  display: block;
}
/*--------Contenedor principal-------------*/
.contenedor-body{
  width: 1200px;/*80%*/
  margin: 0 auto;
}
h2{
	text-align:center;
}
h3{
  text-align:center;
}
p{
  text-align: center;
}
.material-icons{
	font-size: 300%;
}

.material-icons{
text-align: center;
width: 100%;
margin:0 auto;
}

.page-section-2{
clear:both;
  background-color: blue;
}

/*--------Contenedor principal-------------*/

@media only screen and (min-width: 768px){
  /********PAGE SECTION 1*********/
  .colum-1{ 
  width:75%;
  text-align: center;
  padding-left: 364px ;/*24%*/
  }
  .colum-2, .colum-3, .colum-4{
  width: 33.3%;
  float:left;
  padding-left: 15px%;/*15px*/
  padding-right:15px%;/*15px*/
    
  }
}
  /**********PAGE SECTION 2********/
  @media only screen and (min-width: 768px){

  div.col-A{
  width: 33.3%;
  float: left;
  padding-left: 15px%;
  padding-right: 15px;
  
  padding-bottom: 15px;
  }  

  div.col-B{
  width: 33.3%;
  float: left;
  padding-left: -0.5%;
  padding-right: 15px;

  height: 1px; 
  padding-bottom: 1px;/*60%*/
  }

  div.col-C{
  width: 33.3%;
  float: left;
  padding-left: 15px;
  padding-right: 15px; 

  padding-bottom: 475px;/*15%*/
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cursos de Diseño Web - CSS</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet"  href="css/normalize.css">
    <link rel="stylesheet"  href="css/stilos.css">
  </head>
  <body>
    <div class="contenedor-body">
      <div class="top-banner">

       <!--PRIMERA SECCION DE LA PAGINA-->
      <header> 
        <div class="navegacion">
           <nav class="menu-principal">
             <ul>
               <li>
                 <a href="#">Inicio</a>
               </li>
               <li>
                 <a href="#">Empresa</a>
               </li>
               <li>
                 <a href="#">Servicios</a>
               </li>
               <li>
                 <a href="#">Productos</a>
               </li>
               <li>
                 <a href="#">Registro</a>
               </li>
               <li>
                 <a href="#">Contacto</a>
               </li>
             </ul>
          </nav>
          </div>   
        </header>
        <div class="page-section-1">
          <div class="contenedor">
            <div class="columnas">
              <div class="colum-1">
                <h2>PACIFIC ALIANCE CAPITAL</h2>
                  <p>Con la inclusión de nuevas tecnologías y productos de inversión, pretendemos contribuir al desarrollo de dichos mercados siendo líderes de la industria del Trading e Inversiones.</p>
              </div>

              <div class="colum-2">
                
                  <a href="#"><i class="material-icons">devices</i></a>
                  <h3>Acceso Mundial</h3>
                 
                  <p>1-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
              </div>

              <div class="colum-3">
                
                  <a href="#"><i class="material-icons">devices</i></a>
                  <h3>Acceso Mundial</h3>
                  
                  <p>2-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
              </div>

              <div class="colum-4">
               
                  <a href="#"><i class="material-icons">devices</i></a>
                  <h3>Acceso Mundial</h3>  
                  <p>3-Acceda a datos de mercado 24 horas al día y seis días a la semana para estar en conexión con todos los mercados internacionales.</p>
              </div>
            </div>
          </div>
        </div>

         <!--FIN DE LA PRIMERA SECCION DE LA PAGINA-->

        <!--SEGUNDA SECCION SECCION DE LA PAGINA-->

        <div class="page-section-2">
          <div class="contenedor">
            <div>
              <h2>ASESORIAS A SU MEDIDA</h2>
              <p>En Pacific Alliance Capital brindamos asesorías personalizadas, adaptándonos día a día a los cambios de los mercados financieros. Si quiere lograr que su cartera de inversiones tenga óptimos resultados no dude en consultarnos.</p>
            </div>
            <div class="col-A">
              <div>
                <a href="#"><i class="material-icons2"></i></a>
                <h3>Informacion en tiempo real</h3>
                <p>Analizamos los mercados para ofrecer las mejores opciones de negociación.</p>
                </div>
                <div>
                <a href="#"><i class="material-icons2"></i></a>
                <h3>Noticias y Analisis</h3>
                <p>Obtenga acceso a la totalidad de nuestros datos e informes del mercado.</p>
                </div>
            </div>

            <div class="col-B">
              <img src="img/cellphone.jpg" alt="Imagen-de-aprobacion">
            </div>

           <div class="col-C">
            <div>
              <a href="#"><i class="material-icons2"></i></a>
              <h3>Portafolio de Inversion</h3>
              <p>Negocie con nuestra amplia gama de instrumentos en cualquier mercado que desee.</p>
            </div>
            <div>
               <a href="#"><i class="material-icons2"></i></a>
              <h3>Listo para comenzar</h3>
              <p>Proporcionamos las mejores condiciones de trading, la mayor velocidad de ejecución que se adaptan a sus necesidades.</p>
            </div>
          </div>
          </div> 
        </div>

          <!--FIN DE LA SEGUNDA SECCION DE LA PAGINA-->

          <!--Intermedio de la pagina-->

        <div class="page-intermedio">
          <div class=contenedor">
            <div>
              <p class="pacific">Pacific Aliance Capital | Una gran oportunidad para invertir</p>
            </div>
          </div>
        </div>

        <!--Intermedio de la pagina-->
        
        <!--TERCERA SECCION DE LA PAGINA-->
        <div class="page-section-3">
          <div class="contenedor">
            <div >
              <h2>POR QUE ELEGIRNOS</h2>
              <p>Le ofrecemos claridad, simplicidad y transparencia. Le ofrecemos formación y posibilidad de elegir Sus prioridades son nuestras prioridades. Y si necesita ayuda para cualquier cosa, estamos disponibles para ayudarle de inmediato. Trabajamos sin descanso para conseguir que sus operaciones le resulten más sencillas y ofrecerle una experiencia única al operar.</p>

              <p>El principal componente de Pacific Alliance Capital son nuestros clientes y el enfoque en sus necesidades. Ofrecemos servicios de calidad, además de un trabajo continuo en la mejora de las tecnologías, que nos ayudan a mantenernos en una posición líder en asesorias de mercados financieros.</p>
              <a href="#">Contactanos</a>
              <a href="#">Registrate</a>
            </div>
          </div>
        </div>

        <!--FIN DE LA TERCERA SECCION DE LA PAGINA-->

         <!--Intermedio de la pagina-->

        <div class="page-intermedio-2">
          <div class=contenedor">
            <div>
              <p>ACCEDE A MAS DE 10.000 INSTRUMENTOS SUBYACENTES</p>
            </div>
          </div>
        </div>

        <!--Fin de el Intermedio de la pagina-->
        
        <!--Contacto-->
        <div class="Contacto">
          <div>
            <div>
              <textarea name="Mensaje" id="Mensaje" cols="30" rows="10" placeholder="Mensaje"></textarea>
            </div>
            <div>
              <input type="text" name="Nombre" placeholder="Nombre">
              <input type="text" name="Email" placeholder="Email">
              <input type="text" name="Asunto" placeholder="Asunto">
              <input type="submit" value="enviar">
            </div>
          </div>
          
        </div>
      </div>
      <footer>
        <p class="copyright">&copy;Copyright2018 Pacific Aliance  Capital | Todos los derechos reservados </p>
        <div class="navegacion">
          <nav class="menu-principal">
           <ul>
             <li>
               <a href="#">Inicio</a>
             </li>
             <li>
               <a href="#">Empresa</a>
             </li>
             <li>
               <a href="#">Servicios</a>
             </li>
             <li>
               <a href="#">Productos</a>
             </li>
             <li>
               <a href="#">Registro</a>
             </li>
             <li>
               <a href="#">Contacto</a>
             </li>
           </ul>


         </nav>
        </div>
      </footer>
    </div>
  </body>
</html>

1
  • Oh muchisimas gracias en serio no sabes lo mucho que me ha costado, te agradezco mucho
    – Alejandro
    el 19 ago. 2018 a las 11:02

Tu Respuesta

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

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