[eside-ghost] De CSS y <div>...

[Jon Ander Hernández]

Aupi!

El vie, 27-04-2007 a las 19:52 +0200, Javier Ortega Conde (Malkavian)
escribió:

> Bueno al meollo:
> 
> Has ajustado la capa del menu de la izquierda y del contenido a la derecha 
> para que ocupen casi todo el ancho. El ancho del menu es 20% y del 
> contenido 78%. Eso es un total del 98% y al sumarle los pixelitos de 
> padding y border que pones llegara al 99 o 100% supongo. Al reducir la 
> resolución esos pixelitos que no están en porcentaje pueden suponer que 
> llegue a más del 100% y por ello hay descuadre. 

Exacto :-)

> Soluciones:
> 
> 1- Reducir el padding y/o el border.
> 2- O mejor supongo: Reducir el ancho al 19% y al 77% y así he comprobado 
> que se descuadra por debajo de los 660 píxeles de ancho de resolución. Si 
> quieres que se vea también bien a 640x480 pues quita un poquito más y 
> prueba. Eso si el menu y el contenido te quedarán más separados al hacer 
> esto, pero bueno, también podrías corregirlo con alineación o cambiando 
> paddings o algo...

Una solución mucho más correcta y sencilla es cambiar el comportamiento
del box-model, osease usar una propiedad CSS3 que te permitirá asignar
los anchos a los objetos tal y como esperas que sea.
Osease me explico, el problema es que tu al hacer width:x% estás
diciéndole al navegador que el contenido del ese objeto debe tener un
ancho del x% respecto del padre, pero el problema es que la definición
de ancho para casi todo el mundo y para la W3C es diferente, para la W3C
el padding y el borde no entran dentro de la definición de ancho del
objeto, pero... al reflotar los elementos (osea calcular si tienen que
ir para abajo o no dependiendo si caben en la linea) se calcula si cabe
el objeto teniendo en cuenta el ancho del contenido del objeto, el
padding y el borde, por lo tanto en cuanto pones un tamaño al ancho, un
padding y un borde con porcentajes hay tamaños a los cuales el ancho
total del objeto es superior al espacio disponible y salta para abajo.
Si has probado a ver la página con IE habrás descubierto que se ve bien,
bueno, esto es porque los de m$ no siguieron el standard y consideraron
el ancho como lo lógico (tamaño del contenido del elemento + padding +
borde)... pero... tenemos una solución, la solución es usar una
propiedad de las CSS3 que nos permite cambiar el modo para usar el
modelo lógico y voilá, te funcionará perfectamente :

#contenedor, #encabezado, #menu, #contenido, #footer {
       -moz-box-sizing:border-box;
       box-sizing:border-box;
}

Si quieres una explicación con dibujitos donde se vea más claro como va
el tema te aconsejo que eches un vistazo a esta página :

http://www.quirksmode.org/css/box.html

Un saludete!

JonAn.