[SOLUCIONADO] Borro "border" y me desplaza toda la página

Iballa · #1 (**permalink**) 17/06/2013, 15:43

Hola, estoy haciendo el header y el navegador de una página.

Para ver donde estoy y no confundirme a veces le pongo un color a las cajas, para ver exactamente donde están, pero esta vez le puse un border: 1px solid black, (ej) simplemente para ver los límites de las cajas y no perderme.

Bueno, seguí haciendo la página hasta el navegador, recurdo de que ese border no tenía que estar ahí, se lo quito en el css y de repente me baja el header y todo su contenido y el navegador, toda la pagina hecha hacia abajo, dejándome un margen blanco por encima del header de unos 100 px aprox.

Si ahora le doy al header un margin negativo de ese tamaño, -100 px pues me lo devuelve al sitio, pero no es plan, no sé por qué paso esto.

O bien, si le vuelvo a poner los border, tal como estaban, me vuelve la página normal.

¿alguien tiene idea de esto tan extraño?

Gracias

pzin · #2 (**permalink**) 17/06/2013, 15:54

Iballa sin código es difícil saber. Más que nada porque hay bastante variedad de errores posibles. Yo diría que tiene algo que ver con colapsamiento de margin/padding. Pero es como escupir al aire, igual me da en la cara o si hace viento no.

Iballa · #3 (**permalink**) 17/06/2013, 16:35

No no, escupir al aire no, que el aire no te ha hecho nada XD

Bueno, aquí va el código:
(las imagenes no salen porque no las indexé).

Código HTML:

Ver original<!DOCTYPE HTML>
<head>
    <title></title>
 
    <meta charset="utf-8"/>
    
    <link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body>
    <div id="wrapper">
        <header>
              <div class="imagenes">
                  <p>xxxx</p>
                  <div class="logo-facebook">
                     <a href="https://www.facebook.com/" target="_blank"><img src="" ></a>
                  </div>
              </div>
        </header>
         <nav>
       <div id="caja-navegador">
          <ul>
             <a href=""><li>INICIO</li></a>
             <a href=""><li>INICIO</li></a>
             <a href=""><li>INICIO</li></a>
             <a href=""><li>INICIO</li></a>
             <a href=""><li>INICIO</li></a>
          </ul>
       </div>
    </nav>
    </div>
 
   
</body>
</html>

Código CSS:

Ver original/*Reseteo Universal*/
*{
    border: 0;
    margin: 0;
    padding: 0;
}
header,footer,section,article,hgroup,{
    display: block;
}
/*Estilos*/
 
 
/*HEADER*/
#wrapper {
    background: pink;
    height: 900px;
    margin: 0;
}
header {
    background: #5E803F;
    /*aquí iva el border*/
    width: 100%;
    height:202px;
}
header p  {
    color: #5E803F;
    font-family: arial;
    font-size: 1.6em;
    font-weight: bold;
    margin-top: 5em;
    margin-left: 1em;
}
.imagenes {
    background-image: url();
    /*aquí iva el border*/
    height: 202px;
    width: 941px;
    margin: 0 auto;
}
.logo-facebook {
    margin-top: 0.2em;
    margin-left: 1.5em;
}
 
 
/*NAV*/
nav #caja-navegador ul  {
    
    background: #5C4E30;
    list-style: none;
    text-align: center;
}
 
nav #caja-navegador ul li {
    
    background: #594F34;
    color: white;
    display: inline-block;
    font-family: arial;
    font-size: 0.9em;
    font-weight: bold;
    width: 10.3em;
    padding: 0.7em;
 
}
 
nav #caja-navegador ul li:hover {
   background:#667B43;
}

pitufoweb · #4 (**permalink**) 17/06/2013, 16:43

Hola,

Tienes:

header p {
margin-top: 5em;

}

Ese es el margen que causa tu problema. Al no tener un borde, el margen sale por encima de header.

Una manera de solucionar seria aplicarle un averflow:hidden a header.

Saludos

Iballa · #5 (**permalink**) 18/06/2013, 04:07

Cita:

Iniciado por pitufoweb

Hola,

Tienes:

header p {
margin-top: 5em;

}

Ese es el margen que causa tu problema. Al no tener un borde, el margen sale por encima de header.

Una manera de solucionar seria aplicarle un averflow:hidden a header.

Saludos

Hola pitufoweb, no lo entiendo, el parrafo <p> está dentro de otra caja, tiene un padre, <div>, que debería ser el origen del margen, no entiendo por qué se sale.

pzin · #6 (**permalink**) 18/06/2013, 04:43

Pues al final es una cuestión de la extraña formar que tiene CSS de colapsar márgenes. Digo extraño porque las consecuencias es una de esas cosas que nadie entiende muy bien porqué son como son.

La cuestión es que, al colapsa el margen superior, este termina por fuera de su contenedor.

Cuando no existe borde, padding, contenido en linea o un clear —por eso va el overflow también— para separar el margen superior de un elemento con el margen superior de su primer elemento hijo —siempre y cuando este sea un elemento de bloque—, los márgenes se colapsan. Luego el margen colapsadao sale por fuera del contenedor.

Luego tu problema, como ya comentó pitufoweb, es realmente margen superior del párrafo. Lo que al añadir un borde desaparece el problema. En realidad solucionaste un problema sin entender que existía.

El overflow de pitufoweb es una solución, seguramente la más limpia. Pero siempre y cuando evites que la situación sea la arriba menciona, todo vale.

Por ejemplo:

Código CSS:

Ver originalheader p {
  display: inline; /* o inline-block */
}

El porqué, como digo, a mi me sigue siendo un misterio. Cosas de la W3C. Al menos sabes cómo solucionarlo.

Iballa · #7 (**permalink**) 18/06/2013, 07:18

Pues según leí, era para los margenes entre filas, para que al darle un margen
igual a todas las filas, los márgenes que ivan entre fila y fila no midieran el doble y se quedara la medida entre fila y fila de cualquier bloque igualada...no sé si me explico, pero me parece una cagada, con perdón, porque complica las cosas y se puede poner simplemente un tag para quien quiera poner a la mitad una medida entre filas. No sé.

Gracias a los dos¡

pzin · #8 (**permalink**) 18/06/2013, 07:40

No si eso está bien, que se colapsen en esos casos. Pero cómo se trata en el que caso que no haga falta es un poco raro. No sé, igual en vez de echar ese margen hacia afuera lo suyo sería anularlo directamente. Pero bueno, conociendo el asunto, en realidad ya nos las apañamos.