1

¿Cómo separar secciones entre sí?, deseo separar las secciones que están colocadas hacia abajo, esta es la imágen de como se visualizan:

secciones

Este es mi código html:

<section class="general">
  <section class="contenedor">
      <article class="marca1">
        <section class="marca1_1" style="background:url(assets/images/marcas/diesel.jpeg)no-repeat left center; background-size: 100%;"></section>
        <section class="marca1_2" style="background:url(assets/images/marcas/zara.jpeg)no-repeat left center; background-size: 100%;"></section>
        <section class="marca1_3" style="background:url(assets/images/marcas/ck.jpeg)no-repeat left center; background-size:100%;"></section>
        <section class="marca1_4" style="background:url(assets/images/marcas/levis.gif)no-repeat left center; background-size: 100%;"></section>
        <section class="marca1_5" style="background:url(assets/images/marcas/adidas.png)no-repeat left center; background-size: 100%;"></section>
        <section class="marca1_6" style="background:url(assets/images/marcas/pepe.png)no-repeat left center; background-size: 100%;"></section>
        <section class="marca1_7" style="background:url(assets/images/marcas/af.png)no-repeat left center; background-size: 100%;"></section>
         <section class="marca1_7" style="background:url(assets/images/marcas/ae.jpeg)no-repeat left center; background-size: 100%;"></section>

      </article>

      <!-- Seccion de imagenes central -->
  <section class="centro">
    <section class="Inicial">
    <article class="imagen1">
      <a  class="fancybox.iframe fancybox" href="assets/images/pacas/MixtaVerano.jpg"><section class="imagen1_1" style="background:url(assets/images/pacas/MixtaVerano.jpg) no-repeat left center; background-size: 92%;"></section></a>
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/MixtoJuvenil.jpg"><section class="imagen1_2" style="background:url(assets/images/pacas/MixtoJuvenil.jpg) no-repeat left center; background-size: 92%;"></section></a>
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/PacaCredencial.jpeg"><section class="imagen1_3" style="background:url(assets/images/pacas/PacaCredencial.jpeg) no-repeat left center; background-size: 92%;"></section></a>

    </article>

    <article class="imagen2">
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/NiñoVerano.jpg"><section class="imagen2_1" style="background:url(assets/images/pacas/NiñoVerano.jpg) no-repeat left center; background-size: 92%;"></section></a>
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/MixtaVerano.jpg"><section class="imagen2_2" style="background:url(assets/images/pacas/MixtaVerano.jpg) no-repeat left center; background-size: 92%;"></section></a>
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/PacaCredencial.jpeg"><section class="imagen2_3" style="background:url(assets/images/pacas/PacaCredencial.jpeg) no-repeat left center; background-size: 92%;"></section></a>
    </article>

    <article class="imagen3">
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/PacaCredencial.jpeg"><section class="imagen3_1" style="background:url(assets/images/pacas/PacaCredencial.jpeg) no-repeat left center; background-size: 92%;"></section></a>
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/MixtoJuvenil.jpg"><section class="imagen3_2" style="background:url(assets/images/pacas/MixtoJuvenil.jpg) no-repeat left center; background-size: 92%;"></section></a>
      <a class="fancybox.iframe fancybox" href="assets/images/pacas/MixtaVerano.jpg"><section class="imagen3_3" style="background:url(assets/images/pacas/MixtaVerano.jpg) no-repeat left center; background-size: 92%;"></section></a>

    </article>
    </section>
  </section> <!-- fin centro-->


  <article class="marca2">
    <section class="marca2_1" style="background:url(assets/images/marcas/lacoste.jpeg)no-repeat left center; background-size: 100%;"></section>
    <section class="marca2_2" style="background:url(assets/images/marcas/tommy.jpeg)no-repeat left center; background-size: 100%;"></section>
    <section class="marca2_3" style="background:url(assets/images/marcas/converse.jpeg)no-repeat left center; background-size: 100%;"></section>
    <section class="marca2_4" style="background:url(assets/images/marcas/lv.jpeg)no-repeat left center; background-size: 100%;"></section>
    <section class="marca2_5" style="background:url(assets/images/marcas/gap.jpeg)no-repeat left center; background-size: 100%;"></section> 
    <section class="marca2_6" style="background:url(assets/images/marcas/under2.png)no-repeat left center; background-size: 100%;"></section>
    <section class="marca2_7" style="background:url(assets/images/marcas/columbia.png)no-repeat left center; background-size: 100%;"></section>

  </article>

</section> <!-- fin contenedor -->

</section> <!-- fin general -->

Y este es mi código en css:

.general{
    margin-top: -19px;
}
.contenedor .centro .imagen1 .imagen1_1, .contenedor .centro .imagen1 .imagen1_2,.contenedor .centro .imagen1 .imagen1_3,.contenedor .centro .imagen1 .imagen1_4,.contenedor .centro .imagen1 .imagen1_5,.contenedor .centro .imagen1 .imagen1_6,
.contenedor .centro .imagen2 .imagen2_1,.contenedor .centro .imagen2 .imagen2_2,.contenedor .centro .imagen2 .imagen2_3,.contenedor .centro .imagen2 .imagen2_4,.contenedor .centro .imagen2 .imagen2_5,.contenedor .centro .imagen2 .imagen2_6,
.contenedor .centro .imagen3 .imagen3_1,.contenedor .centro .imagen3 .imagen3_2,.contenedor .centro .imagen3 .imagen3_3,.contenedor .centro .imagen3 .imagen3_4,.contenedor .centro .imagen3 .imagen3_5,.contenedor .centro .imagen3 .imagen3_6 {
    height: 280px;
    padding-bottom: 3px !important;
    width: 95%;
    margin-left: 8px;
    -webkit-box-shadow: -7px -7px 10px #01A9DB;
    -moz-box-shadow: 10px -10px 10px #01A9DB;
    border-bottom-color:#01A9DB ;
    border-top-color: #01A9DB; 
    border-right-color: #01A9DB;
    border-left-color: #01A9DB;
    border-radius: 8px;
}

Deseo que entre cada imagen exista un espacio hacia abajo ya que se encuentran muy pegadas, ¿Alguna sugerencia?

1 respuesta 1

0

Prueba esto:

.general{ margin-top: -19px; } .contenedor .centro .imagen1 .imagen1_1, .contenedor .centro .imagen1 .imagen1_2,.contenedor .centro .imagen1 .imagen1_3,.contenedor .centro .imagen1 .imagen1_4,.contenedor .centro .imagen1 .imagen1_5,.contenedor .centro .imagen1 .imagen1_6, .contenedor .centro .imagen2 .imagen2_1,.contenedor .centro .imagen2 .imagen2_2,.contenedor .centro .imagen2 .imagen2_3,.contenedor .centro .imagen2 .imagen2_4,.contenedor .centro .imagen2 .imagen2_5,.contenedor .centro .imagen2 .imagen2_6, .contenedor .centro .imagen3 .imagen3_1,.contenedor .centro .imagen3 .imagen3_2,.contenedor .centro .imagen3 .imagen3_3,.contenedor .centro .imagen3 .imagen3_4,.contenedor .centro .imagen3 .imagen3_5,.contenedor .centro .imagen3 .imagen3_6{ height: 280px; padding-bottom: 3px !important; width: 95%; margin-left: 8px; -webkit-box-shadow: -7px -7px 10px #01A9DB; -moz-box-shadow: 10px -10px 10px #01A9DB; border-bottom-color:#01A9DB ; border-top-color: #01A9DB; border-right-color: #01A9DB; border-left-color: #01A9DB; border-radius: 8px;margin-top:10%; }
1
  • Excelente! Muchísimas gracias! @Gustavo Piris el 24 may. 2016 a las 17:17

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.