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 Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.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://lists.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://lists.ovillo.org/mailman/listinfo/ovillo

Responder a