Tienes el problema que hemos tenido todos al principió o peor al final como a mi ;) , pero bueno hay solución para todo y mas en esta lista, sin ir mas lejos te paso un articulo de modelo de cajas [1] escrito por kemie, una gran colaboradora de esta lista, que comenta y explica bastante bien tus problemas, y de paso también a si gratis por la cara otro que me ha resuelto muchos problemas [2], por supuesto también de kemie.

[1] http://www.disenorama.com/articulos/css/el_modelo_de_cajas.htm
[2] http://www.disenorama.com/tutoriales/css/como_solucionar_problemas_en.htm


Saludos.

Iban Rodriguez wrote:

Hola,

Estoy empezando un nuevo proyecto que voy a desarrollar con DIVs utilizando
CSS.
Tengo un "contenido" que tiene 780px de ancho, y está dividido a su vez en
una parte izquierda para el menú lateral (ocupa toda la vertical), y una
derecha para el contenido.
En la parte derecha está la cabecer, arriba del todo (un "layout" similar al
de microsoft.com, pero quitando toda la banda corporativa azul superior).

El tema es que los menus de la izquierda tienen un hueco de unos 7px a su
alrededor (una especie de margen... o padding? ;-) ), y el cotenido tambien.
Es decir, están como separados entre sí, dejando a la vista el fondo de la
página, quedando algo asi como flotantes.

Claro... yo he definido un "contenido" a 760px, un lado "izquierdo" a 160px
y un lado "derecho" a 620px. (todas las divs van dentro de "contenido")

Después de conseguir tener todo maquetado perfectamente con simples DIVs
coloreados en colorines para ver que todo encaja, me he puesto a meterle las
imagenes, asignarles más propiedades, etc.. y aqui es donde empieza mi
locura, termina todo este rollo que he metido, y doy paso mi pregunta.

Asigno al lado izqueirdo un padding de 7px.
Tachan! El "contenido" ahora pasa a ocupar 794px. Es decir, NO se asignan
padding hacia dentro... sino que parece ser que mantiene sus 160px de
anchura y además le AÑADE 7+7 px... ¿esto es normal? Consultando
documentación por ahí parece que si pero... no le veo sentido.

Me explico... he probado a bajar las medidas de "izquierdo" de 160px a 156px
con padding 7px y ahora claro... va perfecto.
Después me ha pasado lo mismo con el lado derecho... media 620 y he tenido
que bajarlo a 610 porque lleva 5px a los lados.
Y ahora resulta que intentando ajustar la imagen de la cabecera para que
quede encajada entre ese lio de paddings, el DIV se me salta de linea porque
no entra en "contenido" y la cabecera se me va pa tudela.

Es decir, me estoy volviendo loco. No termino de entender esto por más
tutoriales que he leído.
Necesito saber cuáles serían las pautas a seguir en estos casos, cómo se
suele hacer.... he leído por ahi poner subcontenedores y hacer algo asi:
Contenedor:
width: xxx
Contenedor subcontenedor
        Padding:
        Margin:

Pero me sigue pareciendo una chapuza.

Voy a seguir haciendo pruebillas... a ver si alguien me da un rayo de luz.

Gracias de antemano,
Un saludo.

__________________________
. · Iban Rodriguez · .
{ Programador, <THE MOVIE> }
www.themovie.org



_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo




_______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo

Responder a