[SOLUCIONADO] Eliminar el espacio o margen superior diseño web

Llunetica · #1 (**permalink**) 01/07/2016, 18:25

Hola, tengo un problemilla que no logro arreglar. Hice esta web hace un tiempo pero ahora estoy en algunos cambios. Quiero quitar ese espacio que hay arriba de la cabecera dónde hay el menú, pero no encuentro el error ni en el CSS ni en el HTML. También me aparece en la versión móbil (es un diseño responsive). Lo hago todo con notepad++.

Os dejo aquí los códigos.

Código PHP:

  <!DOCTYPE html>

 

<html lang="es">

    <head>

        <meta charset="character_set">

        <meta name="msvalidate.01" content="348DF41C1249B2998721BE3B7B7F85E0" />

        <title>Mareño Surf Tours</title>

        

        

        <!-------hoja css ------->

        <link rel="stylesheet" href="estilo.css" type"text/css"/>

 
        <!-------slider ------->

        <script type="text/javascript" src="jquery.min.js"></script>

 
        <!-------webfonts de gogle ------->

        <link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400,600|Raleway:400,100,200,700,900' rel='stylesheet' type='text/css'>

 
        <!-------jq menú fijo------->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <script>

        posicionarMenu();

    

        $(window).scroll(function() {    

            posicionarMenu();

        });

 
        function posicionarMenu() {

            var altura_del_header = $('.cabecera').outerHeight(true);

            var altura_del_menu = $('.menu').outerHeight(true);

 
            if ($(window).scrollTop() >= altura_del_header){

                $('.menu').addClass('fixed');

                $('.contenido').css('margin-top', (altura_del_menu) + 'px');

            } else {

                $('.menu').removeClass('fixed');

                $('.contenido').css('margin-top', '0');

            }

        }

        </script>

 
        <!------- plugin para que se vea en IE ---------->

        <!--[if lt IE 9]>

            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

 
    </head>

 
 
<body>

    

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script src="jquery.backstretch.min.js"></script>

    

        <script>

        // <![CDATA[

        jQuery.backstretch([ 

        "imgs/index/index1bn.jpg", "imgs/index/index2bn.jpg", "imgs/index/index3bn.jpg", "imgs/index/index4bn.jpg" 

        ], {duration: 4000, fade: 1000} ); 

        // ]]>

        </script>

 
    <div class="cabecera">    

 
    </div>

 
 
<div class="contenido">

Código:

body, html {
 margin:0;
 padding:0;
 top:0;
 color:#313030;
 font-family: 'Raleway', sans-serif;
 font-style: normal;
 font-weight: 400;
 font-size: 16px;
 text-transform: none;
 text-decoration: none;
 letter-spacing: 0.032em;
 word-spacing: 0.066em;
 line-height: 2.00;
 text-align: justify;
}

.cabecera { 
 top:0;
 width: 100%; 
 max-width: 100%;
 overflow:hidden;
 box-sizing:border-box;
 margin:0 auto;
 padding: 20px 100px 0 100px;
 color: #fff; 
 font-size: 11px;
 background: #fff;
}

Llunetica · #2 (**permalink**) 02/07/2016, 18:15

Hola de nuevo, conseguí solucionar el problema cambiando los estilos del interlineado y tamaño de tipografía del body a cero :)

Llunetica · #3 (**permalink**) 05/08/2017, 19:01

Hola de nuevo, regreso con un problema similar!

En la página web desde el pc no me sucede, pero en los teléfonos móbiles mi web con versión responsive se ve con un marge superior blanco de aproximadamente 10px y no entiendo por qué!!! Uso Notepad y tengo el siguiente código CSS el cual en principio debiera prevenir estos márgenes:

Código:

*{
 margin: 0;
 padding: 0;
 font-family: 'Dosis', sans-serif;
}

body, html {
 margin:0;
 padding:0;
 top:0;
 bottom:0;
 font-size:0;
 line-height:0; 
 background:#fff;
}

No sé qué más puedo hacer y no encuentro nada al respecto por el foro o por internet. Espero que me puedan ayudar!!!! Gracias.