Foros del Web » Creando para Internet » CSS »

Caso inexplicable

Estas en el tema de Caso inexplicable en el foro de CSS en Foros del Web. Hoy mientras depuraba un problema de maquetación me he encontrado con un problema que me ha dejado inquieto y todavía no encuentro explicación. Considero que ...
  #1 (permalink)  
Antiguo 28/06/2011, 15:45
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 2 meses
Puntos: 0
Pregunta Caso inexplicable

Hoy mientras depuraba un problema de maquetación me he encontrado con un problema que me ha dejado inquieto y todavía no encuentro explicación.

Considero que tengo bastantes conocimientos en CSS pero he descubierto un caso concreto (bastante sencillo, por cierto) que no logro explicar de ninguna de las maneras. Mejor lo explicaré con código:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<style>
			html, body { width:100%; height:100%; margin:0 }
			#padre { background:blue; height:100% }
			#hijo { background:red; width:500px; height:300px }
		</style>
	</head>
	<body>
		<div id="padre">
			<div id="hijo"></div>
		</div>
	</body>
</html> 
Hasta aquí todo bien. Un div que ocupa toda la pantalla (dentro del body) con un div hijo (dimensionado a 500x300) en su interior. Lo inesperado viene cuando al elemento hijo le damos un margen. Imaginemos:
Código:
margin:100px auto 0
Pues bien, lo esperado, según los principios del diseño CSS, el div hijo debería centrarse al medio y descender 100 píxeles respecto el límite superior de su elemento padre. ¡Pues no!: En realidad lo que hace es descender el padre, no el hijo.

En un principio he pensado que debía ser algún bug particular de Firefox 5. Pero no, esto es general; pasa tanto en el explorador de Mozilla como en Chrome, Safari, Opera, IE...
  #2 (permalink)  
Antiguo 28/06/2011, 17:00
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 6 años
Puntos: 13
Respuesta: Caso inexplicable

Tienes que establecer la relación de posición entre ellos; si no lo haces, el navegador no entenderá la composición.

Una solución:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<style>
			html, body { width:100%; height:100%; margin:0 }
			#padre { background:blue; height:100%; position: relative }
			#hijo { background:red; width:500px; height:300px; position: absolute; margin-left: -250px; left: 50%; top: 100px; }
		</style>
	</head>
	<body>
		<div id="padre">
			<div id="hijo"></div>
		</div>
	</body>
</html> 
  #3 (permalink)  
Antiguo 28/06/2011, 17:17
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 2 meses
Puntos: 0
Pregunta Respuesta: Caso inexplicable

Sí, esa es una manera de posicionar.

Pero lo más natural es colocar un elemento en base a sus márgenes. Y en el ejemplo anterior los navegadores no pintan como deberían.

Añadid al padre:
Código:
padding-top:1px
Veréis por dónde van los tiros y de ahí mi gran interrogante. Sigo sin entenderlo.
  #4 (permalink)  
Antiguo 28/06/2011, 17:31
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años
Puntos: 116
Respuesta: Caso inexplicable

Cita:
En realidad lo que hace es descender el padre, no el hijo.
Esto pasa, por que el hijo tiene un ancho de 500px.

entonces el padre, no tiene un ancho especificado, por lo que sera auto, y se ajustara al del hijo.

si el hijo tiene 500, el padre tambien lo tendra, y no hay base del padre para agarrar el margin, por lo que el hijo se mueve y el ancho del padre lo sigue.

hay varias maneras de hacer eso y que funcione (el 100px de margin, los 500 del hijo y el padre no se mueva)

1) hijo 500px ancho, padre 600px de ancho, margin izq o der de 100px (hijo flotado a left o right)

2) padre 500px ancho, padding left o right de 100px al padre y 500px de ancho al hijo

Saludos.
__________________
Programador jQuery & PHP
  #5 (permalink)  
Antiguo 28/06/2011, 20:21
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 4 meses
Puntos: 66
Respuesta: Caso inexplicable

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
Esto pasa, por que el hijo tiene un ancho de 500px.

entonces el padre, no tiene un ancho especificado, por lo que sera auto, y se ajustara al del hijo.
.
creo que no es asi como pasa, si un elemento de bloque no tiene ancho definido, automaticamente su ancho sera el 100% de su contenedor, en este caso del body, para que el padre se adaptara al tamaño del hijo, nuevamente "en este caso", lo podriamos poner con algun float, asi si adaptaria su tamaño.

volviendo al tema del problema, me ha pasado lo mismo y siempre termino solucionandolo con paddings, no tengo idea de porque pasa esto tampoco, alguien sabe?
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #6 (permalink)  
Antiguo 28/06/2011, 20:33
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 8 años, 4 meses
Puntos: 66
Respuesta: Caso inexplicable

ok probando un poco, si le pongo un overflow:hidden al #padre se soluciona el problema, pero igual sigo sin entender por que pasa esto.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #7 (permalink)  
Antiguo 29/06/2011, 02:30
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 1 mes
Puntos: 995
Respuesta: Caso inexplicable

esto sucede por lo que se llama "collapsing margins"
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #8 (permalink)  
Antiguo 29/06/2011, 03:17
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Caso inexplicable

La verdad desconocía la razón de este tema. gracias webosiris.
Otra cosa que nunca me quedó bien claro es como usar el haslayout. en fin termino haciendo una hoja de estilo alternativa para la version 6 y 7 de ie por no comprenderlo, si tienes a bien de compartir un link o un ejemplo desde ya que te estoy muy agradecido.

Saludos.
  #9 (permalink)  
Antiguo 29/06/2011, 03:31
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 1 mes
Puntos: 995
Respuesta: Caso inexplicable

Cita:
Iniciado por cristian_cena Ver Mensaje
Otra cosa que nunca me quedó bien claro es como usar el haslayout.
el haslayout es algo un poco difícil de entender al principio pero cuando lo haces se transforma en algo bastante tonto

básicamente es una "propiedad" que IE le asigna a cada elemento, que puede estar apagada (valor 0, por defecto) o prendida (valor 1) y muchos bugs se solucionan "prendiendo" ese estado. El problema es que es una propiedad indirecta, osea, no puedes poner haslayout:1; directamente en el css.

El haslayout se prende cuando se usan determinadas propiedades de css (como height o width por ejemplo). Sin embargo la forma más fácil de activarlo es usando la propiedad zoom (que es privativa del ie, su efecto es simular la opción zoom del navegador) porque con un valor de 1, dicha propiedad activa el haslayout SIN modificarte ninguna otra cosa y es aplicable a cualquier caso (width por ejemplo no, porque siempre tendrás casos donde no quieras fijar un width)

espero que se haya entendido
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 29/06/2011, 03:57
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Caso inexplicable

Gracias webosiris, se entiende perfecto la explicación, comentarte que a este tema lo archirecontraleí en muchos lugares pero la vez que apliqué zoom:1; por ejemplo o el también recomendado height:1%; nunca me hizo caso ie jajaja, asi que en ultima dije chau, pongo hojas de estilo alternativas y listo.
Supongo que se debe aplicar para casos específicos, me gustaría saber esta lista de casos o ver algún ejemplo de algún sitio que lo este usando, a modo de destriparlo con firebug y hacerme con el "ahhhh, así era".

gracias por el aporte, saludos.
  #11 (permalink)  
Antiguo 29/06/2011, 05:47
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 2 meses
Puntos: 0
Desacuerdo Respuesta: Caso inexplicable

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
Esto pasa, por que el hijo tiene un ancho de 500px.

entonces el padre, no tiene un ancho especificado, por lo que sera auto, y se ajustara al del hijo.

si el hijo tiene 500, el padre tambien lo tendra, y no hay base del padre para agarrar el margin, por lo que el hijo se mueve y el ancho del padre lo sigue.

hay varias maneras de hacer eso y que funcione (el 100px de margin, los 500 del hijo y el padre no se mueva)

1) hijo 500px ancho, padre 600px de ancho, margin izq o der de 100px (hijo flotado a left o right)

2) padre 500px ancho, padding left o right de 100px al padre y 500px de ancho al hijo

Saludos.
El padre sí tiene dimensiones propias. La altura viene de height:100% y el ancho es automático por lo que, como bien ha dicho tredio, para los bloques es el 100%.

Y, aunque no las tuviera, un elemento padre no tiene porqué verse afectado por su descendencia en lo que respecta a los márgenes, rellenos, bordes, contornos... En todo caso son los elementos hijos los que se ven afectados por los padres.
  #12 (permalink)  
Antiguo 29/06/2011, 05:53
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 2 meses
Puntos: 0
Sonrisa Respuesta: Caso inexplicable

Cita:
Iniciado por cristian_cena Ver Mensaje
... en fin termino haciendo una hoja de estilo alternativa para la version 6 y 7 de ie...
No sé si seré de los pocos que lo hace pero yo personalmente al crear webs prefiero utilizar hojas de estilo y scripts aparte específicos para IE.
  #13 (permalink)  
Antiguo 29/06/2011, 06:23
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 2 meses
Puntos: 0
De acuerdo Respuesta: Caso inexplicable

Cita:
Iniciado por webosiris Ver Mensaje
esto sucede por lo que se llama "collapsing margins"
Gracias. Tu enlace me ha sido de ayuda.
  #14 (permalink)  
Antiguo 29/06/2011, 10:01
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Caso inexplicable

mikeliu, de hecho la hoja de estilos que contenga el zoom:1; debe ser exclusiva para ie si quieres validar el css. Mi inquietud con haslayout es solo porque creo que quedaría mas profesional el trabajo.

Saludos.
  #15 (permalink)  
Antiguo 29/06/2011, 13:37
 
Fecha de Ingreso: enero-2011
Ubicación: Palma
Mensajes: 49
Antigüedad: 6 años, 2 meses
Puntos: 0
Sonrisa Respuesta: Caso inexplicable

Cita:
Iniciado por cristian_cena Ver Mensaje
mikeliu, de hecho la hoja de estilos que contenga el zoom:1; debe ser exclusiva para ie si quieres validar el css. Mi inquietud con haslayout es solo porque creo que quedaría mas profesional el trabajo.

Saludos.
Sí, y por eso mismo y demás "empreños" suelo separar el código IE del resto.

Etiquetas: divs, maquetacion, margen, posicionamiento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:01.