1 votos

Problema con la barra de menu que se encuentra en el lado izquierdo en el navegador de google chrome

Este problema solo pasa en el navegador de google chrome, pasa cuando la barra se posesiona justo donde se encuentra la galería de imágenes como se puede observar en la imagen Si alguien me podría decir como arreglar el problema le estaré agradeció. Gracias de antemano.

enter image description here

este es el codigo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Mi portafolio</title>
    <meta mane="description" content="Primeros Pasos" />
    <link rel="stylesheet" href="style.css">

</head>
<body>
<div id="menu-container"><!--Empieza el menu-->
    <div id="logo-menu">
        <img src="img/logo1.png" alt="">
        <div id="logo-name">
            MI PORTAFOLIO
        </div>
        <div id="logo-desc">
            DESARROLLADOR WEB
        </div>
    </div>
    <ul id="menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Trabajos</a></li>
        <li><a href="#">Quien soy</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</div><!--Cierra el menu-->

<div id="style-container"><!--Empieza el bloque inicio-->
    <div class="seccion" id="seccion-inicio">
        <div id="inicio-logo">
            <img src="img/logo2.png" alt="">
        </div>
        <div id="inicio-text">
            Te legimus omittam iudicabit cum, ne agam eripuit legendos cum. Ad enim abhorreant vis, an alienum voluptatibus cum. Pri no hinc denique signiferumque, pro ne eius probo meliore. Ei malorum percipit per, ea veniam dolore scribentur.    
        </div>
        <div class="separador"></div>
        <div>
            <video src= "Video/rap1.mp4" width= "400" heigt="300" preload controls>
            </video>
        </div>
    </div><!--Cierra el bloque inicio-->

    <div class="seccion" id="seccion-Blog">
    <h2>Blog</h2>
    </div>

<!--_____Empieza el bloque trabajo__-->

    <div class="seccion" id="seccion-Trabajo">
        <h2>Trabajo</h2>
        <div id="slider-miniatura">
            <img src="img/slide1.jpg" alt="">
            <img src="img/slide2.jpg" alt="">
            <img src="img/slide3.jpg" alt="">
        </div><!--slider miniatura--> 
            <div id="descripcion-trabajo">
                <p>Te legimus omittam iudicabit cum, ne agam eripuit legendos cum. Ad enim abhorreant vis, an alienum voluptatibus cum. Pri no hinc denique signiferumque, pro ne eius probo meliore. Ei malorum percipit per, ea veniam dolore scribentur.<p>
            </div><!--descripcion trabajo--> 
                <div class="separador"></div>
                <div id="trabajo-container">
                    <a href="acuarela">
                        <div class="trabajo acuarela">
                            <div class="titulo">DIBUJO A ACUARELA</div>
                        </div>
                    </a>
                    <a href="tinta">
                        <div class="trabajo tinta">
                            <div class="titulo">DIBUJO con tinta</div>
                        </div>
                    </a>
                    <a href="abecedario">
                        <div class="trabajo abecedario">
                            <div class="titulo">ABECEDARIO</div>
                        </div>
                    </a>
                    <a href="dragones">
                        <div class="trabajo dragones">
                            <div class="titulo">DRAGONES</div>
                        </div>
                    </a>
                    <a href="dulces">
                        <div class="trabajo dulces">
                            <div class="titulo">FABRICA DE DULCES</div>
                        </div>
                    </a>
                    <a href="retratos">
                        <div class="trabajo retratos">
                            <div class="titulo">RETRATOS</div>
                        </div>
                    </a>
                    <a href="revistas">
                        <div class="trabajo revistas">
                            <div class="titulo">REVISTAS</div>
                        </div>
                    </a>
                    <a href="mariajose">
                        <div class="trabajo mariajose">
                            <div class="titulo">MARIA JOSE</div>
                        </div>
                    </a>
                    <a href="fotos">
                        <div class="trabajo fotos">
                            <div class="titulo">FOTOS</div>
                        </div>
                    </a>
                    <a href="william">
                        <div class="trabajo william">
                            <div class="titulo">WILLIAM</div>
                        </div>
                    </a>
                </div> <!--TRABAJO CONTAINER--> 

    </div><!--seccion trabajo-->

    <!--__________________________________________ACUARELA__________________________________-->

    <div id="colecciones-container">

        <div class="coleccion-container">
            <div class="galeria" id="acuarela">
                <img src="img/trabajo/coleccion1-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion1-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion1-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion1-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion1-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO ACUARELA</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__TINTA__-->

        <div class="coleccion-container">
            <div class="galeria" id="tinta">
                <img src="img/trabajo/coleccion2-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion2-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion2-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion2-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion2-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO A TINTA</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__ABECEDARIO__-->

        <div class="coleccion-container">
            <div class="galeria" id="abecedario">
                <img src="img/trabajo/coleccion3-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion3-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion3-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion3-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion3-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO ABECEDARIO</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__DRAGONES__-->

        <div class="coleccion-container">
            <div class="galeria" id="dragones">
                <img src="img/trabajo/coleccion4-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion4-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion4-3.jpg" width="400"  alt="">

            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO DRAGONES</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__DULCES__-->

        <div class="coleccion-container">
            <div class="galeria" id="dulces">
                <img src="img/trabajo/coleccion5-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion5-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion5-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion5-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion5-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO DULCES</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__RETRATOS__-->

        <div class="coleccion-container">
            <div class="galeria" id="retratos">
                <img src="img/trabajo/coleccion6-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion6-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion6-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion6-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion6-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO retratos</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__REVISTAS__-->

        <div class="coleccion-container">
            <div class="galeria" id="revistas">
                <img src="img/trabajo/coleccion7-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion7-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion7-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion7-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion7-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO REVISTAS</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__MARIA JOSE__-->

        <div class="coleccion-container">
            <div class="galeria" id="mariajose">
                <img src="img/trabajo/coleccion8-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion8-2.png" width="400"  alt="">
                <img src="img/trabajo/coleccion8-3.png" width="400"  alt="">
                <img src="img/trabajo/coleccion8-4.png" width="400"  alt="">

            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO MARIA JOSE</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__FOTOS__-->

        <div class="coleccion-container">
            <div class="galeria" id="fotos">
                <img src="img/trabajo/coleccion9-1.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion9-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion9-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion9-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion9-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO fotos</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. .</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

<!--__WILLIAM__-->

        <div class="coleccion-container">
            <div class="galeria" id="william">
                <img src="img/trabajo/coleccion10-1.png" width="400"  alt="">
                <img src="img/trabajo/coleccion10-2.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion10-3.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion10-4.jpg" width="400"  alt="">
                <img src="img/trabajo/coleccion10-5.jpg" width="400"  alt="">
            </div><!--Cierre de galeria-->
            <div class="descripcion">
                <h3>DIBUJO WILLIAM</h3>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
                <div class="controles">
                    <a href="#" class="anterior">Anterior</a>
                    <a href="#" class="siguiente">Siguiente</a>
                </div><!--controles-->

                <div class="cerrar">
                    <a href="#">Cerrar</a>
                </div><!--cerrar-->
            </div><!--descripcion-->
        </div><!--coleccion container-->

    </div><!--colecciones container-->

<!--__ACERCA__-->

    <div class="seccion" id="seccion-acerca">
        <h2>Acerca</h2>
        <div id="foto-autor">
            <img src="img/1.jpg" alt="">
            <div id="descripcion-inicial">
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
            </div>
            <div class="separador"></div>
        </div>
        <div id="acordeon-container">
        <div class="tab">
            <div class="titulo">
                Estudio
            </div>
            <div class="contenido">
                <img src="img/escuela.jpg" width="100%" alt="">
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
            </div>
        </div>

        <div class="tab">
            <div class="titulo">
                Experiencia profecional
            </div>
            <div class="contenido">
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
            </div>
        </div>

        <div class="tab">
            <div class="titulo">
                Clientes frecuentes
            </div>
            <div class="contenido">
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
            </div>
        </div>

        <div class="tab">
            <div class="titulo">
                Reconocimiento
            </div>
            <div class="contenido">
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
                <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
            </div>
        </div>
    </div>
</div><!--SECCION ACERCA-->
<!--__________________________________________CONTACTO__________________________________-->

    <div class="seccion" id="seccion-contacto">
        <h2>Contacto</h2>
        <p>los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
        <div id="redes-sociales">
            <a href="#"><img src="img/facebook.jpg" alt="" width="65"> </a>
            <a href="#"><img src="img/twitter.jpg" alt="" width="65"> </a>
            <a href="#"><img src="img/youtube.jpg" alt="" width="65"> </a>
            <a href="#"><img src="img/vine.jpg" alt="" width="65"> </a>
            <a href="#"><img src="img/linkedin.jpg" alt="" width="65"> </a>
            <a href="#"><img src="img/instagrans.jpg" alt="" width="65"> </a>
        </div>
        <div id="formulario">
            <form action="direccion.php">
                <p>Nombre Completo<br/>
                <input name= "name" type="text" placeholder = "juanito perez" required>
                </p>
                <p>Correo Electronico<br/>
                <input name= "email" type="email" placeholder = "juanito@hotmail.com" required>
                </p>
                <p>Asunto <br/>
                    <select name="subject" id="">
                        <option value="cotizaciong">Contizacion General</option>
                        <option value="cotizacionp">Contizacion Poster</option>
                        <option value="cotizacionsw">Contizacion Sitio</option>
                        <option value="info">Mas informacion</option>
                        <option value="otro">Otro</option>
                    </select>
                </p>
                <p>
                    Comenterio<br/>
                    <textarea name="comment" id="" cols="30" rows="10" required></textarea>
                </p>
                <div id ="capa-boton">
                    <input type="submit" class="boton" value="Enviar el formulario">
                </div>
            </form>
        </div>
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.slider.js"></script>
<script src="js/galeria.js"></script>
<script src="js/jquery.acordeon.js"></script>
<script src="js/jquery.scroll.js"></script>

<script>
$(document).on("ready", function(){
    $("#slider-miniatura").slider({time: 5000});
    $("#acordeon-container").acordeon();
    $("#menu a").on("click",function(){
        $(".seccion").eq($(this).parent().index()).scrollTo({padding: 200});

    });

});

function adaptScreen(){
    $(".seccion").css("heigt", $(window).height() - 20);

}
adaptScreen();
$(window).resize(function(){
    adaptScreen();

});

</script>

</body>
</html>

1voto

aEscarcha Puntos 220

El problema tiene pinta de estar en tu CSS, el cual no sale aquí... la imagen y la sección izquierdas son demasiado grandes, a modo de arreglo rápido prueba a ponerle a la barra izquierda un css parecido a esto:

.menu-sidebar{
    position: relative; /* Si no tienes ya alguna position como fixed */
    z-index: 999999; /* Eso debería hacer que la imagen se quedase por detrás */
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: