[SOLUCIONADO] Margin fantasma encima de un div

[blancoarnau]

Hola a todos. Antes de empezar, quiero aclarar que tengo muy claro todas las propiedades de CSS pero no tengo mucha experiencia en el campo y siempre surgen errores en mi página web.

Mi problema consiste en que aparece un "margin fantasma" encima de unos div que he posicionado en un nav. Aquí tenéis una imagen:



El fondo lo he puesto de color azul porque quería ver si estaba bien posicionado, pero veo que no. Aquí tenéis el CSS:

Código CSS:

body{
    margin:0 0 0 0;
}
nav{
    height:50px;
    width:100%;
    background-color:#1A1C1C;
    text-align:center;
    color:white;
}
.page{
    display:inline-block;
    height:100%;
    width:20%;
    background-color:blue;
}
 

Y el HTML por si acaso:

Código HTML:

<nav>
    <div class="page">Text</div><div class="page">Text</div><div class="page"><img src="logo.jpg"></div><div class="page">Text</div><div class="page">Text</div>
</nav>
 

¿Alguien tiene alguna idea? He intentado de eliminar márgenes y paddings pero no pasa absolutamente nada. ¿Es un error de CSS? Si es así, ¿cómo puedo arreglarlo? GRACIAS :)

[NSD]

Puedes agregar a .page el atributo float:left; con eso se soluciona.

[alzacon]

Código CSS:

display:inline-block;
 

¿Por qué lo usas teniendo la posiblididad de usar float? El comportamiento de los elementos inline es diferente a los block. La forma chapucera de corregirlo es con el line-height.

[blancoarnau]

Porque los problemas que tengo siempre con posicionamento suceden con el float. Porque, aunque haya leído como se comporta, nunca me sale bien. Si tuviese que usar "float:left", ¿cómo tendría que usarlo?

[alzacon]

Usar float es sencillo, que algo no este flotado es mas bien porque no entra y para solucionarlo hay que usar matemáticas básicas, la suma de todas las propiedades que modifiquen el ancho del elemento.

¿Dondé? Si es en este caso, quita la linea de display y sustituyela por la de float

[blancoarnau]

Pero después los divs no me quedan centrados, se corren todos hacia la izquierda... ¿Cómo debo corregirlo?

[alzacon]

http://codepen.io/anon/pen/mDjiI
¿Después? No entiendo, si son 5 y tienen 20% de ancho, ocupan todo el nav.

[blancoarnau]

¡Ah, sí! Perdón, es que después de escribir el post, he cambiado las propiedades del div dónde hay la imagen por width:10% y ahora no se me centra.

[alzacon]

Iniciado por alzacon

Usar float es sencillo, que algo no este flotado es mas bien porque no entra y para solucionarlo hay que usar matemáticas básicas, la suma de todas las propiedades que modifiquen el ancho del elemento.

¿Dondé? Si es en este caso, quita la linea de display y sustituyela por la de float

¿4*20+10 =100?

Una cosa es que quieres que el menu de navegación te ocupe toda la pantalla y otra tener uno mas estrecho pero centrado. Piensa bien lo que quieres y explicate lo mejor que puedas, porque no me entero muy bien.

[blancoarnau]

A ver, te paso de nuevo el código:

Código CSS:

body{
    margin:0 0 0 0;
}
nav{
    height:50px;
    width:100%;
    background-color:#1A1C1C;
    text-align:center;
    color:white;
}
.page{
    display:inline-block;
    height:100%;
    width:20%;
    background-color:blue;
}
.page3{
width:10%;
}
 

Código HTML:

<nav>
    <div class="page">Text</div><div class="page">Text</div><div class="page" id="page3"><img src="logo.jpg"></div><div class="page">Text</div><div class="page">Text</div>
</nav>
 

[Zeromm]

Iniciado por alzacon

Código CSS:

display:inline-block;
 

¿Por qué lo usas teniendo la posiblididad de usar float? El comportamiento de los elementos inline es diferente a los block. La forma chapucera de corregirlo es con el line-height.

¿Que te hizo el "inline-block? xD. De echo "casi" se puede considerar más óptimo usar "inline-block" que floats, ya que para solucionar problemas de flotado de los floats hay que andar metiendo "truquitos" en el html que con inline-block no hacen falta, y tampoco hace falta saber ni matematicas basicas, ya que con un "font-size: 0" en el padre, entre otras posibles soluciones css, queda solucionado el problema de los margenes. Eso si, con flexbox, ni floats, ni "inline-block" ni chorradas.. flexbox!

Por cierto, para solucionar el problema basta con meterle al .page un "vertical-align: top;" y queda listo

[alzacon]

Iniciado por Zeromm

¿Que te hizo el "inline-block? xD. De echo "casi" se puede considerar más óptimo usar "inline-block" que floats, ya que para solucionar problemas de flotado de los floats hay que andar metiendo "truquitos" en el html que con inline-block no hacen falta, y tampoco hace falta saber ni matematicas basicas, ya que con un "font-size: 0" en el padre, entre otras posibles soluciones css, queda solucionado el problema de los margenes. Eso si, con flexbox, ni floats, ni "inline-block" ni chorradas.. flexbox!

Por cierto, para solucionar el problema basta con meterle al .page un "vertical-align: top;" y queda listo

Hablas de truquitos para usar float y dices de modificar el font-size en el elemento padre para el inline-block
También lo podría solucionar como dije con la altura de linea.

blancoarnau, ¿que quieres que haga? tu eres quien sabe como quiere tenerlo, si los otros 4 iguales, de 20% y no ocupen todo o ocupar todo, etc etc

[Zeromm]

Iniciado por alzacon

Hablas de truquitos para usar float y dices de modificar el font-size en el elemento padre para el inline-block
También lo podría solucionar como dije con la altura de linea.

blancoarnau, ¿que quieres que haga? tu eres quien sabe como quiere tenerlo, si los otros 4 iguales, de 20% y no ocupen todo o ocupar todo, etc etc

Para solucionar determinados problemas de los floats es cierto que tienes que andar metiendo cosas en el html, ¿verdad? osea, para corregir cosas de css hay que irse al html!!!... bueno, si a ti te parece mejor idea corregir cosas de css mediante el html en vez de mediante el propio css.. pues perfecto. Yo el html lo uso para cuestiones de semantica, no para corregir cosas de css. Y encima con inline-block no hace falta ni saber matematicas... no tengo tan claro como tú que el "float" sea mejor que el "inline-block"

[pzin]

Iniciado por Zeromm

Para solucionar determinados problemas de los floats es cierto que tienes que andar metiendo cosas en el html, ¿verdad? osea, para corregir cosas de css hay que irse al html!!!...

Hay tres formas para «solucionar» eso, dos de ellas no requieren tocar nada de HTML.

[Zeromm]

Pensé que había dejado claro que es cierto cuando puse "solucionar determinados problemas"... veo que no me expresé lo suficientemente bien, y no lo digo ironicamente... no no, me expresé como el culo .

La solución del "overflow:hidden" y el "height: 1%" son seguramente las menos conocidas y las que los usuarios que comienzan no conocen ni de cerca y por eso se lian con los floats. Con "inline-block" solo en casos concretos, como los de blancoarnau, hay que solucionar algún "problemilla" mediante "vertical-align: top" o "font-size: 0" por ejemplo.

Practicamente todas las propiedades css que tienen algún "problemilla" tienen varias soluciones, pero siempre hay alguna que son mas conocidas y que puede que a la gente que comienza les resulten confusas, como sucede con los floats. Razón por la cual yo aconsejo usar "inline-block"

[blancoarnau]

Buff... Llevaba unas horas sin abrir el ordenador y cuando he visto todo esto me he quedado un poco 'flipao'. En fin, supongo que, como dijo Zeromm, todas propiedades tienen algunos errores.

GRACIAS POR LA AYUDA A TODOS

[Zeromm]

¿horas sin entrar al foro? uuy yuuyy que mal!! aquí no te puedes despistar, que si pasas cinco minutos sin entrar cuando vuelvas tendrás 40 mensajes mas!!