1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Efecto pinterest

Tema en 'HTML y CSS' comenzado por AngelVA, 23 de Mayo de 2017.

  1. AngelVA

    AngelVA Nuevo Miembro

    Se incorporó:
    8 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Ocupación:
    Estudiante
    Tengo un problema al agregar un menú.

    El agregar un menú a una pagina en donde tenia el efecto pinterest el menú no se superposiciona de las imágenes que tengo, si no que las imágenes se ponen arriba del menú al desplazar hacia abajo.
    [​IMG] upload_2017-5-23_16-44-4.png
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Mascotas E.E.E</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <script src="Masonry.js"></script>
        <script src="jquery.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <header class="header2">
            <div class="wrapper">
                <div class="logo">
                    Mascotas
                </div>
                <nav>
                    <a href="#">Información del Equipo</a>
                </nav>
            </div>
        </header>
        <div class="contenedor">
        <center><h2>Perros</h2></center>  
      <div class="elemento">
              <img src="imagenes/m1.png">
              <h4>Husky Siberiano</h4>
              <p>El husky siberiano es una raza de perro de trabajo originaria del noreste de Siberia (Chukotka, Rusia). Esta raza presenta un acusado parecido con el lobo.</p>
          </div>
      <div class="elemento">
              <img src="imagenes/m2.jpg">
              <h4>Pug</h4>
              <p>El pug o carlino es una raza canina con origen histórico en China, pero con el patrocinio de Reino Unido. Se trata de un perro pequeño de tipo molosoide, utilizado como mascota.</p>
      </div>
      <div class="elemento">
              <img src="imagenes/m3.jpg">
              <h4>Pastor Alemán</h4>
              <p>El pastor alemán es una raza canina que proviene de Alemania. La raza es relativamente nueva, ya que su origen se remonta a 1899. Forman parte del grupo de pastoreo, debido a que fueron perros desarrollados originalmente para reunir y vigilar ovejas.</p>
      </div>
      <div class="elemento">
              <img src="imagenes/m4.jpg">
              <h4>Rottweiler</h4>
              <p>El rottweiler es una raza canina de tipo molosoide originaria de Alemania. Era conocido como perro carnicero de Rottweil porque estaba acostumbrado a pastorear ganado y tirar de los carritos de carnicería cargados de carne, junto con otros productos para el mercado.</p>
      </div>
      <div class="elemento">
              <img src="imagenes/m5.jpg">
              <h4>Dóberman</h4>
              <p>El dóberman es una raza relativamente reciente, debe su nombre al alemán Karl Friedrich Louis Dobermann, quien a finales del siglo XIX, emprende la tarea de crear una nueva raza de perro que sirviera eficazmente a su difícil trabajo como recaudador de impuestos.</p>
      </div>
          </div>


         
          <div class="contenedor2">
          <br>
          <center><h2>Gatos</center></h2>
          <br>
      <div class="elemento">
              <img src="imagenes/m6.jpg">
              <h4>British Shorthair</h4>
              <p>El pelicorto inglés o British Shorthair es una raza de gato que desciende del cruce entre los gatos que llevaron a Britania los romanos y los nativos de la isla. Estos gatos se protegen muy bien del clima británico por su pelaje doble e impermeable.</p>
      </div>
      <div class="elemento">
              <img src="imagenes/m7.jpg">
              <h4>Ragdoll</h4>
              <p>El ragdoll es una raza de gato característica por su gran docilidad. Los Ragdolls adoran a sus dueños humanos y no les gusta estar solos. Reacciona poco al peligro, se muestra dócil y tranquilo. Es un gato exclusivamente casero y dependiente.</p>
      </div>
      <div class="elemento">
              <img src="imagenes/m8.jpg">
              <h4>Gato Persa</h4>
              <p>El Persa es una raza de gato caracterizada por tener una cara ancha y plana y un gran abundante pelaje de variados colores. Son considerados comúnmente como gatos aristocráticos (el 75% de los gatos de pedigree registrados son persas).</p>
      </div>
      <div class="elemento">
              <img src="imagenes/m9.jpg">
              <h4>Maine Coon</h4>
              <p>El Maine Coon, Coon de Maine o Mancoon es una raza de gato doméstico originaria de Estados Unidos.</p>
      </div>
      <div class="elemento">
              <img src="imagenes/m10.jpg">
              <h4>Gato Exótico</h4>
              <p>El Gato exótico es una raza de gato que tiene la complexión del gato persa pero con el pelo corto. Se obtuvo por hibridación del British Shorthair y el American shorthair con los persas, obteniéndose un gato de complexión robusta y pelo corto y denso. Esto se hizo con motivo de agregar el gen del pelo corto al pool de genes del persa.</p>
      </div>

        <script>
            var container = document.querySelector('.contenedor');
            var msnry = new Masonry( container, {
                itemSelector: '.elemento'
            })
        </script>


        </script>  
    </body>
    </html>
    Código (CSS):
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #fff;
    }
    .contenedor{
        width:90%;
        margin: auto;
        padding-top: 100px;
    }
    .contenedor2{
        width: 90%;
        margin: auto;
    }
    .elemento{
        width: 225px;
        background: rgba(0,0,0,0.07);
        float: left;
        margin-right: 15px;
        margin-bottom: 15px;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
    }
    .elemento p{
        padding: 10px;
        font-size: 15px;
    }
    .elemento img{
        width: 100%;
    }
    header{
        width: 100%;
        overflow: hidden;
        background: #252932;
        margin-bottom: 20px;
    }
    .wrapper{
        width: 90%;
        max-width: 1000px;
        margin: auto;
        overflow: hidden;
    }
    header .logo{
        color: #f2f2f2;
        font-size: 50px;
        line-height: 150px;
        float: left;
    }
    header nav{
        float: right;
        line-height: 150px;
    }
    header nav a{
        display: inline-block;
        color: #fff;
        text-decoration: none;
        padding: 10px 20px;
        line-height: normal;
        font-size: 20px;
        font-weight: bold;
        -webkit-webkit: all 500ms ease;
        -moz-webkit: all 500ms ease;
        -o-webkit: all 500ms ease;
        transition: all 500ms ease;
    }
    header nav a:hover{
        background: #f56f3a;
        border-radius: 50px;
    }
    .header2{
        position: fixed;
        height: 100px;
    }
    .header2 .logo{
        line-height: 100px;
        font-size: 30px;
    }
    .header2 nav{
        line-height: 100px;
    }
    Código (Javascript):
    $(document).ready(function(){

        $(window).scroll(function(){
            if( $(this).scrollTop() > 0){
                $('header').addClass('header2');
            } else {
                $('header').removeClass('header2');
            }
        });

    });
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.477
    Me gusta recibidos:
    682
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    siempre que se usa position fixed, se debe de conocer sobre z-index que es el posicionamiento del elemento, cual quieres mas arriba que el otro, en este caso se debe de usar en el menu que tiene fixed y se debe de especificar mayor que el que lo oculta(superposiciona)
    aqui te dejo el ejemplo ;)

    https://codepen.io/anon/pen/JNxWav

    upload_2017-5-23_19-36-6.png
     
    A Dawud le gusta esto.
  3. AngelVA

    AngelVA Nuevo Miembro

    Se incorporó:
    8 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Ocupación:
    Estudiante
    ohh gracias! ya se arreglo:)
     

Comparte esta página