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
