Re: [Ovillo] Reemplazar cadena de texto sobre el body
Si, más bien sería que ajax es el hijo bastardo del DOM. O más bien habría que decir que ajax es utilizar el objeto XMLHttpRequest desde Javascript y luego si te apetece utilizas DOM. Por que si yo hago una petición ajax que me devuelva el contenido como texto y luego simplemente utilizo un alert.. pues que no entró en acción mucho el DOM Ahhh, quien no se acuerda de artefactos como: if (document.getElementById) // DOM elseif (document.all) elseif (document.layers) Saludos - Original Message - From: Victor Lopez [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Tuesday, April 24, 2007 3:06 AM Subject: Re: [Ovillo] Reemplazar cadena de texto sobre el body El 23/04/07, NetVicious [EMAIL PROTECTED] escribió: DOM es el hijo bastardo de AJAX Creía que los padres son antes que los hijos, y, si no estoy pero que muy equivocado, DOM tiene bastantes mas años que AJAX. -- o---( )---o Saludos de Victor Lopez Sabio [EMAIL PROTECTED] ___ 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
Re: [Ovillo] UTF-8
Hola lista. Yo tuve un problema similar, sin consulta a base de datos, y creo recordar que estaba directamente relacionado con el doctype. Espero que mi mala memoria no te complique más. Salu2. El día 24/04/07, Alejandro Salamanca [EMAIL PROTECTED] escribió: Alejandro Salamanca wrote: Hola El problema no está ni en los clientes (obviamente) ni en los datos, por lo que te recomiendo fervientemente :-) que no cambies a IE7 ni a ISO-8859-1 sólo por el pequeño detalle de que no funciona. Hay que recalcar que tampoco está el problema en el PHP. Sin embargo hay que hacer coincidir el archivo de código php con la codificación final: vale decir que si queremos generar utf-8, nuestros archivos *deben* estar grabados con esa codificación. (Sobra decir que muchas veces los programadores de PHP y de HTML caen en este error trivial donde algunos archivos se encuentran en una codificación y otros en otra, y unos son invocados por los otros teniendo al final segmentos de código HTML bien presentados y otros no tanto.) En realidad el problema (tengo una certeza del 99%) está en tu servidor web. Si es apache, te recomiendo que coloques las siguientes instrucciones en el archivo de configuración y luego reinicies el apache: AddType text/html;charset=UTF-8 html AddType text/plain;charset=UTF-8 txt y todas las páginas que atienda el servidor web serán utf-8 En cualquier caso, si no tienes acceso de root, puedes colocar también en un archivo .htaccess que es más recomendable si es que tu servidor atiende varios sitios, donde unos pueden ser utf-8 y otros iso-8859-1 u otros. Si no usas apache, que tengas suerte (por lo menos no la tuviste hasta ahora :-). Saludos. coque wrote: Hola Tengo algunos documentos web en utf-8 (codificación del archivo, charset utf-8 y el servidor sirve también en utf-8). Con internet explorer 7 se ve bien la codificación en utf-8 y lo reconoce como tal. Sin embargo, en mozilla y ópera no me los sigue reconociendo como ISO y me aparecen  en situaciones donde utilizo algo de php. Muchísimas gracias de antemano por vuestra ayuda. c. ___ 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 -- Alejandro Salamanca Gerente de Desarrollo/Development Manager RedCetus S.R.L Of. La Paz: (+591) 2-2410521/(+591) 2-2118123 Of. Santa Cruz: (+591) 3-397622 www.redcetus.com Servicios: Aplicaciones e Instalaciones Linux Telefonia de Voz sobre IP Desarrollo de Aplicaciones en Linea Partners: www.astaro.com (Security Gateways) www.vmware.com (Servidores Virtuales) www.digium.com (Telefonia VoIP) www.abptech.com (VoIP Products) ___ 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
Re: [Ovillo] Medidas de fuentes: % y em
El artículo que has leído de las fuentes es probablemente de los mejores que he visto, es relativo al tamaño de fuente que tenga la tipografía por defecto, y si está definido por el usuario, pues también al mismo. El método que se explica es cómodo, porque te permite modificar todos los tamaños de una sola vez, yo normalmente lo pongo a 84% y a partir de ahí ajusto los ems en las diferentes etiquetas, y según como quede bajo o subo. Lo de mantenerlo entre 76 y 100 es por mantener el especto lo más parecido posible entre diferentes navegadores. -- Juan Jorge Muñoz Herrero http://www.taarq.com (0034) 635 10 7142 ___ 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
Re: [Ovillo] Divs con esquinas redondeadas y sombras degradadas
Almirante von Web/. escribió: ¿PNG más liviano que GIF de paleta indexada? ¿Así de firme? ¡Ojo, sólo en algunos casos! Tengo el Photoshop delante de mis ojos y veo que me muestra variadito... PNG de 8 bits Vs. GIF de 8 bits... en unos casos pesa más el gif y en otros el png. Almirante von Web/. -- Educando al asno, por no apalearlo. ©2007 ;-). - Original Message - From: Francisco Adolfo Álvarez Alonso [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Thursday, April 19, 2007 11:51 AM Subject: Re: [Ovillo] Divs con esquinas redondeadas y sombras degradadas Saludos! NetVicious escribió: Hola Francisco, El jueves, 12 abr 2007 a las 09:35, escribiste: Tu argumentación no me convence ¿cual es la tontería exactamente? hablo de guardar un png con color indexado y transparencia binaria (como un gif) ocupando menos y haciendo uso de un formato de imagen que es recomendación de la w3c desde 1996. A ver si quieres usar un PNG trasparencia binaria con el IE6 te da igual que sea GIF que PNG. Si usas una paleta indexada para el PNG ocupa menos que GIF, así que ya no es igual.Además PNG es estandar y recomendación. PNG ocupa más que GIF normalmente por la compresión que emplea. PNG tiene más paleta no lo niego. GIF está más estandarizado. Si intentans comparar un PNG de color real con un GIF de 256 colores por supuesto. Pero repito, si usas una paleta indexada para el PNG ocupa menos que GIF. Personalmente para web uso generalmente GIFs y PNGs cuando la imagen en cuestión necesita transparencia con canal alpha fijando el fondo del PNG al color de fondo de la web. Si el fondo de la web no es mono color hay que tirar de behavios o de otros fix para los IE6 o inferiores. Perfecto, es una elección como otra cualquiera, yo solo doy una alternativa a gif. ___ 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 Comprueba que versión de photoshop tienes, en las nuevas no se que tal andará, pero hasta hace poco photoshop hacia una mala implementación de la librería de compresión de PNG, metiendo además metadatos innecesarios que hacen el fichero final más grande. Saludos. ___ 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
[Ovillo] problemas con capas
buenos dias lista
estoy teniendo un problema con un HTML que estoy creando (soy novato)
tengo dos capas (div) superpuestas y visualizo uno u otro cambiandoles el
Z-INDEX con javascript
dentro de cada div tengo etiquetas, cajas de texto etc
todo funciona bien menos una cosa y ese es el motivo de este correo
en una de las capas tengo puesto un combo desplegable, y sin importar que
Z-INTEX tenga (me refiero a que se le coloque una capa por encima) sigo
viendo el desplegable es como si ese desplegable no perteneciera a esa
capa, con lo cual el Z-INDEX no le afecta ...
no se como solucionar esto o que es lo que estoy haciendo mal
como dije soy novato
les envio el codigo fuente copiado mas abajo (no coloco el javascritp ni los
estilos)
salu2 y gracias
html
head
!--[if IE]
LINK rel=stylesheet href=templates/css/estilos_explorer.css
type=text/css
![endif]--
script language=JavaScript src=javascript/funciones.js
type=text/javascript/script
/head
!-- coloco una funcion que posicione las capas una sobre otra si tiene
javascript activo --
body onload=posicion('110','div_clientes,div_Contactos'); return
false;
!-- contador de zindex --
span id=posicioninput type=hidden value=2
name=max_posicion id=max_posicion/span/br
!-- coloco un formulario --
form name=formulario method=POST
action=abm_cliente.php
!-- div clientes--
div id=div_clientes
span class=menu_capas
ul
li
a
href=javascript:z_index('div_clientes') title=clientesClientes/a
/li
li
a
href=javascript:z_index('div_Contactos') title=ContactoContacto/a
/li
/ul
/spanbr
select name=SDSempresa class=pepe id=h
option value=100 seleccione una
opcion/option
/select
CCC input type=text value= name=CCC
/div
!-- cierro div clientes--
!-- div Contactos--
div id=div_contactos
span class=menu_capas
ul
li
a
href=javascript:z_index('div_clientes') title=clientesClientes/a
/li
li
a
href=javascript:z_index('div_Contactos') title=ContactoContacto/a
/li
/ul
/span
input type=text value= name=contacto
/div
!-- cierro div contacto--
/form
!-- cierro formulario --
/body
/html
___
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
Re: [Ovillo] problemas con capas
Sin ver los estilos es difícil saber qué estás haciendo mal, no obstante, un par de comentarios: - /br Dependiendo de qué tipo de documento estés usando (HTML o XHTML), ésto debería ser br o br /, pero no /br - span class=menu_capasul [...] /ul/span ¿Alguna razón para meter la lista en un span? - select name=SDSempresa class=pepe id=h Llamar a un componente de menú pepe e identificarlo como h será sólo para hacer pruebas, ¿no? ^_^ ___ 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
Re: [Ovillo] problemas con capas
Roberto Barreiro escribió:
buenos dias lista
estoy teniendo un problema con un HTML que estoy creando (soy novato)
tengo dos capas (div) superpuestas y visualizo uno u otro cambiandoles el
Z-INDEX con javascript
dentro de cada div tengo etiquetas, cajas de texto etc
todo funciona bien menos una cosa y ese es el motivo de este correo
en una de las capas tengo puesto un combo desplegable, y sin importar que
Z-INTEX tenga (me refiero a que se le coloque una capa por encima) sigo
viendo el desplegable es como si ese desplegable no perteneciera a esa
capa, con lo cual el Z-INDEX no le afecta ...
no se como solucionar esto o que es lo que estoy haciendo mal
como dije soy novato
les envio el codigo fuente copiado mas abajo (no coloco el javascritp ni los
estilos)
salu2 y gracias
html
head
!--[if IE]
LINK rel=stylesheet href=templates/css/estilos_explorer.css
type=text/css
![endif]--
script language=JavaScript src=javascript/funciones.js
type=text/javascript/script
/head
!-- coloco una funcion que posicione las capas una sobre otra si tiene
javascript activo --
body onload=posicion('110','div_clientes,div_Contactos'); return
false;
!-- contador de zindex --
span id=posicioninput type=hidden value=2
name=max_posicion id=max_posicion/span/br
!-- coloco un formulario --
form name=formulario method=POST
action=abm_cliente.php
!-- div clientes--
div id=div_clientes
span class=menu_capas
ul
li
a
href=javascript:z_index('div_clientes') title=clientesClientes/a
/li
li
a
href=javascript:z_index('div_Contactos') title=ContactoContacto/a
/li
/ul
/spanbr
select name=SDSempresa class=pepe id=h
option value=100 seleccione una
opcion/option
/select
CCC input type=text value= name=CCC
/div
!-- cierro div clientes--
!-- div Contactos--
div id=div_contactos
span class=menu_capas
ul
li
a
href=javascript:z_index('div_clientes') title=clientesClientes/a
/li
li
a
href=javascript:z_index('div_Contactos') title=ContactoContacto/a
/li
/ul
/span
input type=text value= name=contacto
/div
!-- cierro div contacto--
/form
!-- cierro formulario --
/body
/html
___
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
Es preferible que dejes un enlace a un sitio publico para visualizar tu
problema, si no es posible, por lo menos deja a disposición todos los
ficheros.
___
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
Re: [Ovillo] problemas con capas
Los combos tienen la particularidad de que siempre se ven, les pongas todas las capas que quieras ponerles por encima, ¿por qué no pruebas a jugar con el display (none/block) o con visibility (visible/hidden) para ver u ocultar las capas? ___ 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
Re: [Ovillo] problemas con capas
buenos dias esto que me dices es lo que estaba empezando a creer y me lo has confirmado ... lo arreglare con visible/hidden muchas gracias a todos salu2 El día 24/04/07, cmik22 [EMAIL PROTECTED] escribió: Los combos tienen la particularidad de que siempre se ven, les pongas todas las capas que quieras ponerles por encima, ¿por qué no pruebas a jugar con el display (none/block) o con visibility (visible/hidden) para ver u ocultar las capas? ___ 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
Re: [Ovillo] problemas con capas
cmik22 escribió: Los combos tienen la particularidad de que siempre se ven, les pongas todas las capas que quieras ponerles por encima, ¿Siempre se ven?, hice un par de pruebas con el código de roberto y no tuve ningún problema para ocultar las capas con z-index. ¿por qué no pruebas a jugar con el display (none/block) o con visibility (visible/hidden) para ver u ocultar las capas? ___ 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
[Ovillo] Oferta de empleo
Hola, la empresa donde trabajo busca programadores Front-End con conocimientos en: -XHTML, conocimientos avanzados de CSS. -JavaScript no intrusivo -Accesibilidad Web. -Conceptos de usabilidad. El trabajo sería presencial en Valladolid con jornada completa y horario flexible. Los interesados enviar su cv a [EMAIL PROTECTED] En caso de querer más información, mandad también un correo a la misma dirección 1 saludo -- *Félix Zapata Berlinches* Responsable Técnico Logotipo de Brainet c/ Santa María de la Cabeza nº 9, 47012 Valladolid. Teléfono: 983 10 09 07 http://www.brainet.es Este correo electrónico y, en su caso, cualquier fichero anexo al mismo, pueden contener información de carácter confidencial exclusivamente dirigida a la persona o entidad a la que se le envía. Queda prohibido cualquier uso indebido, revisión, retransmisión o diseminación del contenido por personas o entidades ajenas al destinatario. Si recibe usted este correo por error, le rogamos que nos lo comunique por la misma vía al remitente y proceda a borrar este material de todo ordenador. Gracias. The information in this e-mail and in any attachments is confidential and solely for the attention and use of the named addressee(s). You are hereby notified that any distribution, copy or dissemination of this communication is prohibited without the prior written consent of the sender. If you received this in error and are not the formal receiver of this message please destroy it without making any digital or physical copy and inform the sender by e-mail of the reception of the present message. Thank you ___ 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
Re: [Ovillo] problemas con capas
Matizando un poco la cuestión de los combos, decir que esto sólo ocurre en IE6 (IE7 no lo he confirmado), el que los combos se muestren por encima de cualquier capa, sin importar su z-index. La solución; ocultar los combos en el momento de mostrar las capas que vayan a estar por encima, ya sea con display: none o visibility: hidden. Y como ya habrás notado Francisco, en Firefox y Opera no ocurre, sólo es un capricho del Exploter. El día 24/04/07, Francisco Adolfo Álvarez Alonso [EMAIL PROTECTED] escribió: cmik22 escribió: Los combos tienen la particularidad de que siempre se ven, les pongas todas las capas que quieras ponerles por encima, ¿Siempre se ven?, hice un par de pruebas con el código de roberto y no tuve ningún problema para ocultar las capas con z-index. ¿por qué no pruebas a jugar con el display (none/block) o con visibility (visible/hidden) para ver u ocultar las capas? ___ 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
Re: [Ovillo] problemas con capas
SkuNk escribió: Matizando un poco la cuestión de los combos, decir que esto sólo ocurre en IE6 (IE7 no lo he confirmado), el que los combos se muestren por encima de cualquier capa, sin importar su z-index. Ya confirmo yo que en explorer 7 no pasa. Decir que ocurre siempre (sin especificar navegador) me parecía una inducción a error. Gracias por la matización. La solución; ocultar los combos en el momento de mostrar las capas que vayan a estar por encima, ya sea con display: none o visibility: hidden. Y como ya habrás notado Francisco, en Firefox y Opera no ocurre, sólo es un capricho del Exploter. El día 24/04/07, Francisco Adolfo Álvarez Alonso [EMAIL PROTECTED] escribió: cmik22 escribió: Los combos tienen la particularidad de que siempre se ven, les pongas todas las capas que quieras ponerles por encima, ¿Siempre se ven?, hice un par de pruebas con el código de roberto y no tuve ningún problema para ocultar las capas con z-index. ¿por qué no pruebas a jugar con el display (none/block) o con visibility (visible/hidden) para ver u ocultar las capas? ___ 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 ___ 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
Re: [Ovillo] Divs con esquinas redondeadas y sombras degradadas
La última... CS2. De todos modos PNG sigue siendo un problema para algunos navegadores. Creo que Explorer 7 incorporó las librerías necesarias para un correcto proceder. Firefox y Opera lo resuelven bien de antaño. Explorer 6, como ya sabemos, no. ¿Y Konqueror? ¿Y Safari? ¿Qué cuentan los amigos que usan otros navegadores, sobre otras plataformas? Otro caso, del que JAMAS sentí hablar en esta u otra lista es el uso de SVG. Un estándar que el W3C apoya incondicionalmente. Pues bién, Illustrator fue uno de los primeros programas que exportaban para ese formato. ¿Y...? Pues que al tratar de visualizarlo con nuestros navegadores tira error de string. ¡Mierda! Es como haber construido el edificio más grande del mundo y haberse olvidado de instalar un ascensor... :) He creado SVG con programas de código libre (open source) y quedé maravillado: todo funcionaba como era de esperar. En fin, en esto del diseño todavía hay mucha tela para cortar. Almirante von Web/. -- Educando al asno, por no apalearlo. ©2007 ;-) -Mensaje original- De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Francisco Adolfo Álvarez Alonso Enviado el: Martes, 24 de Abril de 2007 04:12 a.m. Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Divs con esquinas redondeadas y sombras degradadas Comprueba que versión de photoshop tienes, en las nuevas no se que tal andará, pero hasta hace poco photoshop hacia una mala implementación de la librería de compresión de PNG, metiendo además metadatos innecesarios que hacen el fichero final más grande. Saludos. Almirante von Web/. escribió: ¿PNG más liviano que GIF de paleta indexada? ¿Así de firme? ¡Ojo, sólo en algunos casos! Tengo el Photoshop delante de mis ojos y veo que me muestra variadito... PNG de 8 bits Vs. GIF de 8 bits... en unos casos pesa más el gif y en otros el png. Almirante von Web/. -- Educando al asno, por no apalearlo. ©2007 ;-). - Original Message - From: Francisco Adolfo Álvarez Alonso [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Thursday, April 19, 2007 11:51 AM Subject: Re: [Ovillo] Divs con esquinas redondeadas y sombras degradadas Saludos! NetVicious escribió: Hola Francisco, El jueves, 12 abr 2007 a las 09:35, escribiste: Tu argumentación no me convence ¿cual es la tontería exactamente? hablo de guardar un png con color indexado y transparencia binaria (como un gif) ocupando menos y haciendo uso de un formato de imagen que es recomendación de la w3c desde 1996. A ver si quieres usar un PNG trasparencia binaria con el IE6 te da igual que sea GIF que PNG. Si usas una paleta indexada para el PNG ocupa menos que GIF, así que ya no es igual.Además PNG es estandar y recomendación. PNG ocupa más que GIF normalmente por la compresión que emplea. PNG tiene más paleta no lo niego. GIF está más estandarizado. Si intentans comparar un PNG de color real con un GIF de 256 colores por supuesto. Pero repito, si usas una paleta indexada para el PNG ocupa menos que GIF. Personalmente para web uso generalmente GIFs y PNGs cuando la imagen en cuestión necesita transparencia con canal alpha fijando el fondo del PNG al color de fondo de la web. Si el fondo de la web no es mono color hay que tirar de behavios o de otros fix para los IE6 o inferiores. Perfecto, es una elección como otra cualquiera, yo solo doy una alternativa a gif. ___ 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
Re: [Ovillo] un problema con IE
El día 24/04/07, Jorge L. Batista [EMAIL PROTECTED] escribió:
Hola lista, tengo un problema con IE... otro problema de tantos.
Es sobre los PNG transparentes. He puesto una barra de navegación con un
fondo transparente
#navbar{
font-family: Georgia, serif;
font-size: 125%;
position: absolute;
top: 7em;
padding: .2em 0;
background: transparent url(../images/pixel.png);
width: 100%;
}
#navbar li{
list-style-type: none;
display: inline;
padding: 0 .6em;
}
#navbar a{
color: #FF;
text-decoration: none;
}
Esto funcionaba bien pero en IE no era transparente, entonces vino el
parcho:
!--[if IE]
link href=styles/iefix.css rel=stylesheet type=text/css
![endif]--
dentro de iefix.css incluí lo que arregla el asunto, al menos visualmente
#navbar{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/pixel.png',
sizingMethod='scale');
}
Pero adivinen qué?
Ahora los links de las etiquetas a NO FUNCIONAN EN IE!
este es el culpable:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/pixel.png',
sizingMethod='scale');
Alguien sabe cómo sulucionar esto?
Gracias de antemano.
ss
PB
Los enlaces solo funcionaran si le an~ades position: relative; tambien
funciona con absolute, pero creo que en tui caso relative va al dedo.
--
http://hightechweb.net -- Directorio web
http://webtech2you.com Diseño y desarrollo web
directorio.equiposeo.com Directorio seo
___
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
Re: [Ovillo] ¡Y dale con las convenciones!
100% de acuerdo. algo huele a mal en ésto de los estándares. si eres diseñador/programador para la web en base a los estándares estoy seguro de que el pestazo apenas te deja trabajar... huelga? ___ 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
Re: [Ovillo] un problema con IE
Lo he probado en ambos casos y nada!
Juan Jorge Muñoz Herrero escribió:
Prueba a ponerselo a las 'li' en vez de a las 'a' ...
El día 24/04/07, Jorge L. Batista [EMAIL PROTECTED] escribió:
Hola lista, tengo un problema con IE... otro problema de tantos.
Es sobre los PNG transparentes. He puesto una barra de navegación con un
fondo transparente
#navbar{
font-family: Georgia, serif;
font-size: 125%;
position: absolute;
top: 7em;
padding: .2em 0;
background: transparent url(../images/pixel.png);
width: 100%;
}
#navbar li{
list-style-type: none;
display: inline;
padding: 0 .6em;
}
#navbar a{
color: #FF;
text-decoration: none;
}
Esto funcionaba bien pero en IE no era transparente, entonces vino el
parcho:
!--[if IE]
link href=styles/iefix.css rel=stylesheet type=text/css
![endif]--
dentro de iefix.css incluí lo que arregla el asunto, al menos visualmente
#navbar{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/pixel.png',
sizingMethod='scale');
}
Pero adivinen qué?
Ahora los links de las etiquetas a NO FUNCIONAN EN IE!
este es el culpable:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/pixel.png',
sizingMethod='scale');
Alguien sabe cómo sulucionar esto?
Gracias de antemano.
ss
PB
**Las siguientes líneas de texto son agregadas por los Servidores
Centrales de Correo de la Oficina del Historiador de la Ciudad de la
Habana.**
Visite la Cartelera interactiva de Opus Habana, con el calendario de la
programación cultural del Centro Histórico.
http://opushabana.ohc.cu/cartelera.php
Redacción Opus Habana
___
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
Re: [Ovillo] ¡Y dale con las convenciones!
Usa flash, así cuando no te salga con eso podrás culpar a Adobe, que estoy
seguro te hará mas caso que el w3c
Christian Roque Geldres
Encargado de Contabilidad
Del Pilar Miraflores Othon Hotel
Telf. 712-0712 Anexo 5109
[EMAIL PROTECTED]
* http://www.delpilarmiraflores.com.pe
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de LISTAS
Enviado el: Martes, 24 de Abril de 2007 09:16 a.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] ¡Y dale con las convenciones!
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
titleMalditas 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: #CC; 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
Re: [Ovillo] ¡Y dale con las convenciones!
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
titleMalditas 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: #CC; 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
Entiendo que estés enojado por la interpretación tan diversa que hay.
De todas formas revisa la especificación (Computando alturas y márgenes)
, así de primeras veo que aplicas padding teniendo definido un height
(100%), este se va a sumar al espacio en vertical que ocupa el
elemento(de ahí tus escalones sin sentido)Si me equivoco que alguien
me corrija please.
___
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
Re: [Ovillo] Representar documento de datos
En otras oportunidades ya se ha hablado esto en la lista. te recomiendo leer estos dos hilo - http://www.mail-archive.com/ovillo@lists.ovillo.org/msg09523.html - http://www.mail-archive.com/ovillo@lists.ovillo.org/msg15319.html Para resumirte un poco: A mi enterder sería correcto usar una lista de definiciones (dl dt dd) y si es de tu agrado podrías agregarle algo de microformatos: - http://es.wikipedia.org/wiki/Microformatos - http://microformats.org/wiki/hcard Un Saludo. Federico. El día 19/04/07, Héctor Fernández [EMAIL PROTECTED] escribió: Hola Me gustaría saber que opinais sobre la mejor forma de crear una ficha de datos del estilo: Nombre: Juan Apellidos: López Fernández Edad:12 años Estado: Soltero Ciudad: Madrid Clase: A Yo pienso que con una tabla, no?? al fin y al cabo son datos tabulares donde la negritas son celdas cabecera y para el tema de accesibilidad, también es lo más facil. Pero tengo un compañero que insiste es que la mejor forma es con una lista de definición y que lo recoloque con CSS. Gracias de antemano. Héctor Fdez Román. ___ 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
Re: [Ovillo] ¡Y dale con las convenciones!
Enojado es la palabra? Enojadísimo pues. ¡HOY ESTOY ENOJADO! Me he leído
el manual de CSS2
¿Seguro que te lo has leido? Los que se deberían enojar contigo son los
navegadores y darte un cate
A vuela pluma, tienes algo como esto:
.marco {
-moz-border-radius:30px;
margin: 0px; border: solid blue 2px; padding: 10px; overflow: auto; width:
100%; height: 100%;
}
Calculemos el ancho: 2px (x2) + 10px(x2) + 100% hacen un total
de...de...de
y el navegador te debería decir: ¿como coño sumo pixeles con porcentajes??
- Original Message -
From: Ernesto Rodríguez (C7D) [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, April 24, 2007 5:41 PM
Subject: Re: [Ovillo] ¡Y dale con las convenciones!
¿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... :(
Pequeño Padawan, no te dejes llevar por la ira.
La ira lleva al odio, y el odio lleva al Lado Oscuro.
___
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
Re: [Ovillo] ¡Y dale con las convenciones!
El día 24/04/07, LISTAS [EMAIL PROTECTED] escribió: ... 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. XD Totalmente cierto... Sin embargo debes tomar en cuenta lo que apunta JuanR, pues el modelo de cajas del w3c es de lo mas ilogico y al ancho determinado por width debes sumarle aparte el padding, pues no lo engloba, asi si quieres tener una mona caja del 100% con un margen interior o padding del 20% resulta que tu caja mide 120% 0_o Es ahi donde ie parece ser un tanto mas sensato y despliega tu caja de acuerdo al width que le determinaste sin importar el padding que quieras darle, pues este, como seria lo mas natural, va pa dentro y no interfiere con el ancho total. En fin, si quieres menos quebradera de cabeza lo mejor es que diseñes para FF, que con esto en Opera y Konkeror se vera igual, y al final solo deberas agregar unos cuantos hacks para ie. Pero sobretodo, conten tus ansias de parcharlo todo con js, que ya veras que aunque laborioso la mayoria de los contratiempos tienen su solucion en el css... con sus respectivos hacks :-S ___ 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
Re: [Ovillo] Reemplazar cadena de texto sobre el body
Hola Victor, El martes, 24 abr 2007 a las 03:06, escribiste: Creía que los padres son antes que los hijos, y, si no estoy pero que muy equivocado, DOM tiene bastantes mas años que AJAX. Cierto me refería a que en el termino AJAX se olvidaron de DOM. Cierto es que se puede emplear AJAX sin hacer mucho uso de DOM, pero si los combinas se pueden hacer auténticas maravillas. -- /\/ / \ / \ / /\/ e t \/ i c i o u s ___ 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
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: #cc;
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
titleMalditas 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: #CC; 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
[Ovillo] modelo de cajas ilógico
Hola a todas y todos,
tengo un problema grave con una página (http://www.gamco.es/~pablo/) y
el modelo de cajas.
No entiendo cómo en Opera (y supongo que en IE) se monta .logo sobre
.barsup (dejándola inútil). Y tampoco entiendo cómo .barsup puede ser
más largo que .direccion (no creo que influye, pero ambos están dentro
de .frame, que únicamente marca un margen del 6%).
En Firefox funcionan como deberían, pero necesito que funcionen en IE.
La verdad es que necesito ayuda porque no entiendo por qué no funciona
algo que debería funcionar (según alcanzo a comprender). Debajo están
los elementos definidos.
Muchas gracias de antemano,
Pablo
.logo {
position: relative;
width: 100%;
text-align: center;
margin-left: 0%;
margin-top: 0%;
margin-bottom: 3%;
padding: 0%;
z-index: 1;
}
.barsup {
position: relative;
margin-top: 1%;
margin-bottom: 5%;
margin-left: 10%;
margin-right: 10%;
text-align: center;
font-weight: bold;
z-index: 2;
}
.barsup p {
width: 16.6%;
float: left;
text-align: center;
background-color: #0086F6;
font-size: 80%;
margin: 0%;
padding: 0%;
}
.direccion {
color: #ff;
position: relative;
background-color: #0086f6;
width: 80%;
margin-top: 5%;
margin-left: 10%;
font-size: 70%;
text-align: center;
font-weight: bold;
clear: both;
}
___
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
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: #cc;
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
titleMalditas 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: #CC; 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
Re: [Ovillo] ¡Y dale con las convenciones!
Entendido ;)
Yo también lo intenté... pero tras el ratito que me llevó preparar la
respuesta veo que el tono no transmitía la ironía con que se escribió.
El mar, 24-04-2007 a las 14:53 -0500, Christian Roque Geldres escribió:
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: #cc;
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
titleMalditas 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: #CC; 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
Re: [Ovillo] ¡Y dale con las convenciones!
jeje...
ojo , no leí tu código, pero te cuento mi experiencia: css define la
semántica (estilo) de los elementos xml, no? Pues bien, si no definimos
ningún css para un xhtml, ¿qué estilo aplica por defecto la aplicación
del cliente (i.e: IE, FF, opera) ? Por ahí quizá está tu problema.
Es cierto que ciertos agentes de usuario no respetan los estándares
(IE). Sin embargo muchas veces se les culpa de ello, y en realidad los
problemas vienen por el lado de que aplican estilos por defecto
distintos. Y no hay ningún estándar que diga que la fuente por defecto
dentro de un div no puede estar en negritas...
Lo que yo haría: define en otro css el estilo por defecto para los
elementos que tu usas (div), y aplica en cascada esta css primero que la
tuya. ej:
div {
margin: lala
font-size: lala2
background-color: lala3
}
espero que se entienda
Saludos
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
titleMalditas 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: #CC; 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
Re: [Ovillo] ¡Y dale con las convenciones!
Le está diciendo que quiere un ancho del 100% de la caja contenedora y al valor que compute el navegador le sumará el resto de cantidades.Cuidado, que tu no sepas calcularlo al vuelo no quiere decir que el navegador no lo haga. Puede ser más o menos discutible que tipo de unidades mezclar lo que no es discutible es atacar así a un compañero de la lista sin una argumentación más sólida.Aquí el problema creo que es otro, aunque esto es lo bueno de las listas: El debate. Lo primero es disculpas si alguien se ha sentido ofendido, pero no creo que sea el caso del compañero LISTAS ya que a el también le gusta emplear un lenguaje vehemente a veces. Si, yo sabría calcularlo al vuelo, realizando la interpretación que tu dices, que no tiene porque ser la interpretación del navegador, por lo que vas a obtener resultados distintos, en distintos navegadores, acentuado además por el overflow:auto - Original Message - From: Ernesto Rodríguez (C7D) [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Tuesday, April 24, 2007 5:41 PM Subject: Re: [Ovillo] ¡Y dale con las convenciones! ¿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... :( Pequeño Padawan, no te dejes llevar por la ira. La ira lleva al odio, y el odio lleva al Lado Oscuro. ___ 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 ___ 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
[Ovillo] display
hola tengo una duda sobre el uso de display, tengo una pagina con fotos, estan en una lista no numerada y las tengo dispuestas de una forma particular formando un cuadrado, algo rarito el diseño. El caso es que cada imagen le corresponde otro li donde aparece una descripcion de la foto, apenas dos palabras. Trato de esconder esta descripcion, situandola con css, justo debajo de las fotos. Dicha descripcion solo se puede ver cuando el raton pasa por encima de la foto, momento en el cual la foto por un efecto tipo a:hover se traslada ampliandose hasta el centro del cuadrado. Me gustaria si se podria obtener un efecto similar con display, sin necesidad de esperar que la posicion de los lis sea igual en todos los navegadores i sin sobresaltos. Sobresaltos tipo que desaparecen las imagenes en ie5 i 6, i se descolocan todas las piezas del puzzle. La pagina, http://laupri.no-ip.org/pension/html/ver.html i el css http://laupri.no-ip.org/pension/css/pensio3.css , http://laupri.no-ip.org/pension/css/gallery-turismo.css gracias ! Laura ___ 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
Re: [Ovillo] ¡Y dale con las convenciones!
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' ovillo@lists.ovillo.org
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;
Re: [Ovillo] display
hola!! gracias por el consejo, creo que he llegado justo a lo q me comentas... On 4/25/07, NetVicious [EMAIL PROTECTED] wrote: Veamos. Display tiene un huevo de valores aunque no todos están soportados por todos los navegadores. Si, el display no creo que haga el efecto que quiero sin usar js. :(( En tu caso tal ver lo mejor sería posicionar el texto justo debajo debajo de la imagen correspondiente poniéndole un z-index inferior, más o menos como lo tienes ahora. Yo para el posicionamiento utilizaría position: absolute ya que trabajas con un diseño rígido. Pues eso, que he visto la luz i si, parece que al menos los textos se situan en la foto correcta, no se como se comporta en ie, pero al menos la screen q me da el totalvalidator, tiene buen aspecto :) De todas formas con lo que nos indicas tampoco te podemos ayudar mucho más si no nos dices que es lo que deseas. Creo que ya tengo lo q busco, a excepcion de que en ie los textos no respetan el z-index=0 i se situan encima i no debajo de las miniaturas. Si pongo z-index= -1 , en firefox no se ve el texto... Es decir, ahora tengo problemas con el z-index. Bueno, muchas gracias! Laura -- /\/ / \ / \ / /\/ e t \/ i c i o u s ___ 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
Re: [Ovillo] modelo de cajas ilógico
Empecemos por esto:
div class=barsup
pa href=./quienes.shtmlQuiénes somos/a/p
pa href=./servicios.shtmlServicios/a/p
pa href=./tecnologia.shtmlTecnología/a/p
pa href=./experiencia.shtmlExperiencia/a/p
pa href=./colabora.shtmlColaboradores/a/p
pa href=./clientes.shtmlClientes/a/p
/div
¿Porqué usas p? ¿No es mejor para estos casos definir una lista en
vez de un párrafo sobre otro párrafo?
Siguiente:
.logo {
position: relative;
¿Porqué utilizas relative? Si es una caja en bloque, no hace falta.
Lo mismo a barsup.
El modelo de caja no es ilógico, es ilógico el HTML y la forma en
que, con CSS argumentas la posición de los elementos. Si vienen tan
natural que casi no hay que tocarles.
El código de tu página de inicio lo dejaría así:
body
div id=frame
h1a href=./index.shtmlMi logo/a/h1
ul id=nav
lia href=./quienes.shtmlQuiénes somos/a/li
lia href=./servicios.shtmlServicios/a/li
lia href=./tecnologia.shtmlTecnología/a/li
lia href=./experiencia.shtmlExperiencia/a/li
lia href=./colabora.shtmlColaboradores/a/li
lia href=./clientes.shtmlClientes/a/li
/ul
div id=footer
pGamco SL · C/ Alcalá 20, 28014 Madrid · Tlf. 915 591 032 ·
Fax
911 852 133 · a href=./contacto.shtmlCorreo electrónico/a/p
/div
/div
/body
Mejor que eso no tendrás. Ahora cuéntame, cómo usarías CSS con esa
estructura.
Luego, una página interna, lo mismo:
body
div id=frame
h1a href=./index.shtmlMi logo/a/h1
ul id=nav
lia href=./quienes.shtmlQuiénes somos/a/li
lia href=./servicios.shtmlServicios/a/li
lia href=./tecnologia.shtmlTecnología/a/li
lia href=./experiencia.shtmlExperiencia/a/li
lia href=./colabora.shtmlColaboradores/a/li
lia href=./clientes.shtmlClientes/a/li
/ul
div id=content
div id=menu
ul
li…/li
/ul
/div
div id=text
h2…/h2
p…/p
/div
div class=clear/div
/div
div id=footer
pGamco SL · C/ Alcalá 20, 28014 Madrid · Tlf. 915 591 032 ·
Fax
911 852 133 · a href=./contacto.shtmlCorreo electrónico/a/p
/div
/div
/body
Te recomiendo que vuelvas a leer el modelo de caja, sobre todo, la
parte de los márgenes colapsables y nunca viene mal también leerse el
Spec de HTML o XHTML para entender el uso de los elementos, dado que
utilizas elementos que no tocan en muchas zonas.
Saludos,
Diego Martín Lafuente
[EMAIL PROTECTED]
http://www.minid.net
––
Chief Creative Officer, Tractis S.L.
http://www.tractis.com
___
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
Re: [Ovillo] ¡Y dale con las convenciones!
On Apr 24, 2007, at 10:45 PM, Sebastian Gurin wrote:
jeje...
ojo , no leí tu código, pero te cuento mi experiencia: css define la
semántica (estilo) de los elementos xml, no? Pues bien, si no
definimos
ningún css para un xhtml, ¿qué estilo aplica por defecto la
aplicación
del cliente (i.e: IE, FF, opera) ? Por ahí quizá está tu problema.
Semántica no es estilo, es significado de algo. La semántica está
relacionada con el significado de un elemento, y no con las
propiedades visuales que éste contrae.
CSS está hecho para definir propiedades tanto de caracter visual
como espacial de los elementos de un documento que esté conforme con
alguno de los lenguajes de etiquedado, por ejemplo HTML o XHTML. Pero
bien se puede utilizar para otro, incluso, uno propio basado en XML.
Saludos, y ojo con las definiciones e interpretaciones.
Diego Martín Lafuente
[EMAIL PROTECTED]
http://www.minid.net
––
Chief Creative Officer, Tractis S.L.
http://www.tractis.com
Es cierto que ciertos agentes de usuario no respetan los estándares
(IE). Sin embargo muchas veces se les culpa de ello, y en realidad los
problemas vienen por el lado de que aplican estilos por defecto
distintos. Y no hay ningún estándar que diga que la fuente por defecto
dentro de un div no puede estar en negritas...
Lo que yo haría: define en otro css el estilo por defecto para los
elementos que tu usas (div), y aplica en cascada esta css primero
que la
tuya. ej:
div {
margin: lala
font-size: lala2
background-color: lala3
}
espero que se entienda
Saludos
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
titleMalditas 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: #CC; 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
Re: [Ovillo] Vean esto: http://moofx.mad4milk.net/
El acoerdeón ya Dreamweaver CS3 lo trae implementado... On 4/18/07, LISTAS [EMAIL PROTECTED] wrote: Vean esto: http://moofx.mad4milk.net/ ¡Está MUY bueno! Es una mezcla perfecta de CSS y JavaScript. Almirante von Web/. -- Educando al asno, por no apalearlo. (c)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 -- Tengo un gran arte, hiero fieramente a quienes me hieren ___ 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
Re: [Ovillo] ¡Y dale con las convenciones!
Es lógico que al si al 100% de algo le sumo más cosas vaya a obtener un
desbordamiento, es decir, todo se va para cualquier lado.
Dejando estándares web de lado, la lógica indica justamente eso que se desarme
por falta de espacio.
Supongo que en algún momento aparecerá la solución (si es que la estás
buscando) si lo único que se busca es generar debate, pues ya tenemos bastante
Javier Trejo
[EMAIL PROTECTED]
http://www.tsinformatica.com.ar
- Mensaje original -
De: Francisco Adolfo Álvarez Alonso [EMAIL PROTECTED]
Fecha: Martes, Abril 24, 2007 1:24 pm
Asunto: Re: [Ovillo] ¡Y dale con las convenciones!
Juan R. escribió:
Enojado es la palabra? Enojadísimo pues. ¡HOY ESTOY ENOJADO!
Me he leído
el manual de CSS2
¿Seguro que te lo has leido? Los que se deberían enojar contigo
son los
navegadores y darte un cate
A vuela pluma, tienes algo como esto:
.marco {
-moz-border-radius:30px;
margin: 0px; border: solid blue 2px; padding: 10px; overflow:
auto; width:
100%; height: 100%;
}
Calculemos el ancho: 2px (x2) + 10px(x2) + 100% hacen un total
de...de...de
y el navegador te debería decir: ¿como coño sumo pixeles con
porcentajes??
Le está diciendo que quiere un ancho del 100% de la caja
contenedora y
al valor que compute el navegador le sumará el resto de
cantidades.Cuidado, que tu no sepas calcularlo al vuelo no quiere
decir
que el navegador no lo haga. Puede ser más o menos discutible que
tipo
de unidades mezclar lo que no es discutible es atacar así a un
compañero
de la lista sin una argumentación más sólida.Aquí el problema creo
que
es otro, aunque esto es lo bueno de las listas: El debate.
- Original Message -
From: Ernesto Rodríguez (C7D)
[EMAIL PROTECTED] To: Ovillo, la lista de
CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, April 24, 2007 5:41 PM
Subject: Re: [Ovillo] ¡Y dale con las convenciones!
¿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... :(
Pequeño Padawan, no te dejes llevar por la ira.
La ira lleva al odio, y el odio lleva al Lado Oscuro.
___
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
___
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
