Este modelo de cajas es tan bochornoso como disparatado. De todos modos, tomando en cuenta los sarcasmos de unos, las sugerencias de otros y las "soluciones" de quien más y de quién menos (a todos ellos gracias), el asunto está solucionado... pero ahora tengo que apelar a comentarios condicionales para decirle a Explorer que lo correcto no es lo correcto... (esto es porque Explorer interpreta las cosas de un modo similar a como las entiendo yo). Es decir que me deja espacios vacíos allí en donde los otros interpretan que van los bordes y los padding externos... :)
En definitiva, el estándar del W3C sobre las cajas, deja mucho que desear si se lo compara con el estándar de los chinos unos cuantos miles de años antes de Gutenberg (siglo XIV) en dode el borde de un objeto, los márgenes inferiores (padding) y las calles (medianiles) que dividen las columnas de texto... van por dentro y no se suman. Dicho de otro modo, una botella de 12cm con un vidrio de 2mm sigue siendo una botella de 12cm de ancho (aquí los chinos, Gutenber y la lógica van de la mano). Y el alma de la botella es de 11,6cm: aquí en la Argentina (a pesar de ser "el Reino del Revés"), en Alemania y en la China. El mejor ejemplo lo tenemos con las tablas. Los bordes "de fábrica" van por dentro y no por fuera. Lo mismo que los cellspacing y los cellpadding. No ocurre lo mismo con los bordes de una imagen que sí se suman a la misma por la sencilla razón de que, de otro modo, la taparía en parte o en su total según el caso. Otra razón práctica: una imagen "es algo que ya es", es algo definido "per se", en cambio una caja "es algo a definir": material virgen para el diseñador. El tema de los bordes es un viejo tema de discusión entre los diseñadores de la vieja escuela. El QuarkXPress, por ejemplo, crea todos los bordes hacia adentro de la caja. Lo mismo hace con los márgenes inferiores en una caja de texto (padding). Y eso es lo correcto. De modo que una caja de 20x20cm con un borde de 2mm y un padding de 5mm sigue siendo una caja de 20x20. Illustrator, en cambio, crea el borde tomando el vector de origen como "alma" del borde, de modo que parcializa su influencia de un modo extraño y caprichoso: 50% adentro y 50% afuera. Y Photoshop nos da las 3 opciones: externa, centrada o interna. Pero por defecto lo hace internamente. De ahí mi permanente pataleo, porque lo que el W3C dictaminó es anticientífico: "lo que debe restar hacia adentro, no puede sumar hacia afuera" (ley de compensación). En fin... Mi proyecto ya está listo, salvo que tuve que parchearlo con el defensor de los pobres: "JavaScript". Ahora tengo que llenarlo. El comportamiento es similar al de Opera con esa pestañita que muestra o oculta el panel de control de la izquierda. O al de Explorer 5.5 de Macintosh quien fue precursor de muchas cosas. Clic "se expande", clic: "se contrae". Pero igual... "sigo enojado"...¡Buh! ;-) Almirante von Web/. -------------------------------------- "Educando al asno, por no apalearlo." ©2007 ;-) ----- Original Message ----- From: "Christian Roque Geldres" <[EMAIL PROTECTED]> To: "'Ovillo, la lista de CSS en castellano'" <[email protected]> Sent: Tuesday, April 24, 2007 4:53 PM Subject: Re: [Ovillo] ¡Y dale con las convenciones! Lo mío fue solo sarcasmo, es facil echarle la culpa a alguien (o algo) cuando las cosas no te salen Christian Roque G. -----Mensaje original----- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Victoria Gracia Enviado el: Martes, 24 de Abril de 2007 02:12 p.m. Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] ¡Y dale con las convenciones! ¿Probaste la definición de elementos superiores como html o body? Mi experiencia dice que cuando defines esos elementos y los utilizas para asegurar que los márgenes serán 0 y el padding también, se reducen muchos de los problemas de interpretación de las "cajas" contenedoras de los elementos. En el fondo tienes un elemento contenedor superior, así que utilizarlo no creo que sea malo: body { margin: 0; padding: 0; } Por otro lado, la propiedad width será acumulativa (como ha indicado Juan R. aunque no de la manera más afortunada a juzgar por la respuesta obtenida), esto es, 14px+125px+100% > 100% (sea cual sea la pantalla del usuario final). Si lo que quieres indicar es que ".central" ocupe el resto del espacio disponible, o adoptas un diseño realmente líquido (todas las anchuras especificadas en % y procurando que sumen como mucho 99) o te la juegas a que quede un espacio en blanco a la derecha y especificas un porcentaje menor que 100 y creas que será oportuno (a mi me da buen resultado con 85%, deja margen en blanco a la derecha pero es correcto). Si además quieres asegurar que ".central" estará a la derecha, puedes cambiar las características e indicar que la posición sea absoluta desde la derecha y no desde la izquierda (right:0;) .columna { display: block; position: absolute; top: 0px; left: 0 px; width: 14px; height: 100%; background: #ccffcc; border: solid blue 1px; padding: 1px; text-align: center; } .menu { display: block; position: absolute; top: 0px; left: 16px; width: 125px; height: 100% background: #ccd8e6; border: solid black 1px; padding: 2px; } .central { display: block; position: absolute; top: 0px; right: 0; width: 85%; height: 100%; background: #ffffcc; border: solid red 1px; padding: 7px; overflow: hidden; } .marco { -moz-border-radius:30px; margin: 0px; width: 100%; height: 100%; border: solid blue 2px; padding: 10px; overflow: auto; } Espero que te sea de ayuda y que desesperes un poco menos. Como apuntaba Ernesto el enojo te lleva al lado oscuro, y Christian te hacía una llamada desde ahí para que utilizaras Flash... no te dejes caer en la tentación, simplemente estudia (arduamente) casos de uso y sigue practicando. Un saludo El mar, 24-04-2007 a las 11:15 -0300, LISTAS escribió: > Estoy diseñando/programando un sitio de pantalla interactiva de > comportamiento relativo (líquido); esto es: que todo ocurre en una misma > ventana con un IFRAME como destino y sin importar la resolución del monitor > del usuario. > > El objeto en ciernes está dividido en 3 DIV alineados con la propiedad de > posición "absolute". > > El primero, llamado "columna", de 14px de ancho, está a cero píxel (0px) del > margen; el segundo, llamado "menú", de 125px, a 14px del margen; y el > tercero, llamado "central" está a 141px y es de ancho líquido (100%) ya que > se ajusta a la pantalla de usuario. > > | 14px | 125px | 100% | > | Algo | Links | IFRAME | > | | | | > > Dentro del DIV "central" calza un IFRAME de destino. > > El código es este: > > <html> > <head> > <title>Malditas reglas</title> > <style> > .columna { > margin: 0px; position: absolute; background: #CCFFCC; width: 14px; height: > 100%; top: 0px; left: 0px; border: solid blue 1px; padding: 1px; text-align: > center; display: block; > } > .menu { > margin: 0px; position: absolute; background: #CCD8E6; width: 125px; height: > 100%; top: 0px; left: 16px; border: solid black 1px; padding: 2px; display: > block /* ("none" en el original) */; > } > .central { > margin: 0px; position: absolute; background: #FFFFCC; width: 100%; height: > 100%; top: 0px; left: 141px; border: solid red 1px; padding: 7px; overflow: > hidden; display: block; > } > .marco { > -moz-border-radius:30px; > margin: 0px; border: solid blue 2px; padding: 10px; overflow: auto; width: > 100%; height: 100%; > } > </style> > </head> > <body> > <div class="columna"></div> > <div class="menu"></div> > <div class="central"> > <iframe id="destino" name="Destino" scrolling="yes" width="100%" > height="100%" frameborder="0" marginwidth="20" marginheight="20" > class="marco" src="central.htm"> > <a href="central.htm" target="Destino"> > Su navegador no acepta iframes</a> > </div> > </body> > </html> > > Ahora bien. ¿Qué creen uds. que obtengo cuando lo visualizo todo con Opera, > Explorer y Firefox? ¡Pura mierda! > > Ninguno de los 3 "ven" lo mismo. Hay estúpidos y absurdos desbordamientos en > ancho y alto. Absurdos escalonamientos (ver al pie) de 3 objetos con los > mismos parámetros. De modo que para corregir estos bodrios deformes tengo > que recurrir a un truco de JavaScript que me he inventado hace añares y que > "emprolija" todo y para todos los navegadores. Pero, ¿y por qué tengo que > ponerle un bonete al sombrero para cubrirme del sol, si ya compré el > sombrero? > > Pero no entiendo porqué, con tantas convenciones por allí, y el W3C en el > medio, el perro no ladra, el gato pía y el canario caza ratones. Es como si > habiendo comprado una pistola de rayos láser tenga que matar al monstruo a > patadas. > > ¿Enojado es la palabra? "Enojadísimo" pues. ¡HOY ESTOY ENOJADO! Me he leído > el manual de CSS2 y los proyectos del CSS3 y nada, che. Mucha "teoría" > intelectual, pero "en la práctica", el pescado todavía sin vender y cada día > huele peor... :( > > Y después, nos quieren seguir haciendo creer que el hombre llegó a la luna. > ¡Bah! > > Almirante von Web/. > -------------------------------------- > "Educando al asno, por no apalearlo." > ©2007 ;-) _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
