aplicacion de padding = aumento de tamaño de la ventana

programeitor · #1 (**permalink**) 24/03/2005, 09:17

.

Hola,foreros, traigo una pregunta que espero tenga solucion.

ahi va:
¿Que pasa con el padding, que hace que aumente el tamaño de la ventana en NS?

tengo una serie de divs que ocupan toda la pantalla, y se ven igual en IE como en NS., pero si quiero darle un margen de separacion para el texto a uno o varios divs., en IE no pasa nada extraño ,pero en NS aumenta el tamaño de la ventana, tanto como padding haya aplicado.

¿Hay alguna forma de corregir esto, o de conseguir el mismo proposito sin aumentos de ventana?

Saludos.

.

kemie · #2 (**permalink**) 24/03/2005, 12:35

Me parece que es cuestion del modelo de cajas:

http://www.disenorama.com/articulos/...o_de_cajas.htm

frijolerou · #3 (**permalink**) 24/03/2005, 16:43

Programeitor, en NS (en realid no estoy seguro si esto vale tambien para NS) debes considerar que si a un elemento de bloque le defines un padding, o border mayor a 0, este se suma al ancho definido en width. En cambio en IE si incluyes un border o padding, este se incluye dentro del ancho especificado en width.

Ejemplo...

#div{
width:100px;
padding-left:20px;
}

en NS en total el div deberia medir de ancho 120px. En IE seguiria midiendo 100px.

programeitor · #4 (**permalink**) 24/03/2005, 17:00

.

Kemie ,gracias por los enlaces

.

Personalmente y fuera de disputas entre navegadores

,prefiero el modelo de IE

.

Por que puedo asignar padding o border sin que me cambie el tamaño de la ventana . De otro modo, si le doy 20px de padding a una capa(que tiene asignada las medidas en tanto por ciento para que se ajuste a todas las resoluciones de pantalla)., para que el contenido no este pegado al borde, cosa bastate normal desde mi punto de vista....

¿como resto 20px a 100%

? ,¿y si quiero que mi documento tenga el 100% de la pantalla? ¿por que tengo que restarle los padding y los bordes de las capas interiores

, cuando forman parte del estilo del documento? ,sinceramente lo encuentro absurdo.

Verdaderamente creo que este sistema es mas versatil ,es mas desearia que el margin tambien entrase dentro de las medidas totales, ahorraria muchos quebraderos de cabeza

.

Saludos Kemie.

.

programeitor · #5 (**permalink**) 24/03/2005, 17:12

.

Exacto frijolerou., ese es el problema. Al final ¿'whith' de que

? ¿de la pantalla

? ,¿de la pantalla menos los margenes

?, ¿de la pantalla menos los margenes, los bordes y menos los paddings

? y ya puestos ,los bordes de las tablas ,sus spacing.......etc....etc....

,llega un momento en que no sabes a que le estas asignando el ancho :-p .
Personalmente prefiero que 'width' se refiera al ancho total de la ventana

.

Bueno, aqui expongo los resultados de la aplicacion del padding para IE y NS.
En IE
para un padding del 20%....... width=100% height=100%, ajuste automatico.
para un padding del30px........ width=100% height=100%, ningun problema con diferentes resoluciones.
En NS
para un padding del 20%....... width=80% height=66%, y todavia queda espacio abajo. en todo caso deberia ser 60% 60%.
para un padding del30px........ width=94% height=90%, aqui habra que contar con las diferentes resoluciones.

Creo que salta a la vista el problema al que me refiero ,y solo para asignar padding a una sola capa.
No tengo instalados mas navegadores. A quien le pueda interesar, seria interesante tener acceso a los resultados de por lo menos los navegadores mas importantes ,todas las aportaciones seran bien recibidas.

Este es el probador que he utilizado:
<body style="overflow:auto;width:100%;height:100%;margin :0px;border:0px;padding:0px;background:#997;">
<div style="overflow:auto;width:100%;height:100%;margin :0px;border:0px;padding:0px;background:#475;">PROB ANDO . . .</div>

Gracias de antemano ,saludos.

.

frijolerou · #6 (**permalink**) 24/03/2005, 19:30

Si a un DIV no le asignas ningún width, automáticamente cubre todo el ancho del elemento contenedor, aun cuando le apliques padding,margin y border al DIV (ojo, esto solo ocurre con "width", para "height" debes seguir adecuandote a la problematica del modelo de cajas). Haz la prueba con el siguiente ejemplo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#contenedor{
background-color:red;
margin-left:20px;
margin-right:20px;
padding-left:20px;
padding-right:20px;
}
</style>
</head>
<body>
<div id="contenedor">
dgf
</div>
</body>
</html>

programeitor · #7 (**permalink**) 16/10/2005, 18:05

Entiendo, .que lo mejor es usar divs contenedores, y dentro de ellos colocar los divs que llevan padding y demas atributos....., me parece una buena solucion. Muchas gracias y perdona el retraso.

Rafael · #8 (**permalink**) 16/10/2005, 19:28

Ciertamente el problema es la implementación del modelo de caja, y también prefiero el modelo de caja de Ie, aunque Mozilla lo implementa como viene en la especificación Css2, en la Css3 parece que van a venir los 2 modelos de caja.

Si el problema es de la manera en que se interpreta por el navegador, la solucuón no creo que sea anidar divs, es casi lo mismo que usar tablas. Más bien es trabajar un poco con el archivo css, para no tocar tu código html.

Para eso están los un poco polémicos "hackeos", básicamente es poner dos instrucciones css, una la entiende un navegador y otra no. El que te puede resultar más útil y sencillo a mi parecer es poner la instrucción general como la interpreta Mozilla primero y luego una excepción para Ie.

Por ejemplo si tu caja la necesitas de 100px.

div.100 {width: 90px; padding: 5px;}
* html div.100 {width: 100px;}

El primero hará que 90+5+5=100 y el segundo leerá el padding: 5px del primero y después usará el width=100 con el mismo padding 5px adentro.

Los margins funcionan igual en ambos casos.