Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra
Corominas [EMAIL PROTECTED] Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=ISO-8859-1; format=flowed te recomendaría que empezaras por un diseño de anchura fija en px (oigo rugidos de algunos). Imagino que te refieres a diseños líquidos, ¿no? Puede ser una opción, aunque en ese caso, yo suelo preferir el ancho en porcentaje (pero claro, es más difícil saber cómo quedará todo en distintas resoluciones). Por cierto, aunque las pautas no digan nada de este tipo de diseños, para la gente que tiene problemas visuales (como es mi caso) los diseños elásticos son una auténtica pesadilla. En cuanto amplías un poco la letra enseguida se salen de la pantalla y tienes que hacer scroll horizontal una y otra vez para poder leer el contenido. Con suerte cabe el ancho del contenido en la pantalla (si no amplías mucho) y sólo te quedas sin la navegación hasta que haces scroll. Y si además estás usando un magnificador de pantalla ya ni te cuento, por un lado tienes el scroll propio del magnificador y por otro el de la página... Una gozada, vamos. En definitiva, que si lo que se quiere es accesibilidad *real*, para mí lo mejor son los diseños líquidos, y eso sí, claro, bien hechos para que no se solapen las cosas. Un saludín, Ramón. -- Message: 16 Date: Wed, 5 Nov 2008 23:55:33 +0100 From: Almorca [EMAIL PROTECTED] Subject: Re: [Ovillo] menu antes o depués To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=UTF-8 La recién aprobada recomendación WCAG 2.0 recomienda añadir un enlace al comienzo de la página que apunte al contenido ( http://www.w3.org/WAI/WCAG20/quickref/20071211/Overview.php#qr-navigation-mechanisms-skip) para que así los lectores de pantalla puedan saltarse el menú de navegación. El 28 de octubre de 2008 14:24, Martin Etxauri [EMAIL PROTECTED] escribió: Aupa a todos Nota: No se si esto es un OT o no, puesto que es una lista de CSS está estrechamente ligada con la accesibilidad como ya sabemos todos, si ah alguien le parece un OT mil perdones. Al grano. Creo no estar equivocado al pensar que para una correcta estructura del código el menú debería ir después del contenido, así con los lectores de pantalla, navegación por tabulador etc. no tienes que saltar todo el menú en cada sección nueva que visitas. También está la posibilidad de poner un link para saltar directamente al contenido. Por supuesto que el que el menú esté después en el código no quiere decir que esté después en la página una vez aplicadas las CSS. Me gustaría saber que opináis de este tema ya que aparte de lo que se pueda encontrar por la red aquí hay gente con muy buen criterio ;) Gracias a todos por adelantado. ___ 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 -- Message: 17 Date: Wed, 5 Nov 2008 19:38:35 -0500 From: Segundo Serrano [EMAIL PROTECTED] Subject: [Ovillo] div con height al 100 por ciento To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=iso-8859-1 qué tal. Estoy mostrando información en un div, el cual debería mostrarse al 100% de alto, pero el div sólo coge el tamaño de su contenido. cómo logro que el div tenga siempre 100% de height? Gracias de antemano. Segundo Serrano P. - Original Message - From: Almorca [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Wednesday, November 05, 2008 5:55 PM Subject: Re: [Ovillo] menu antes o depués La recién aprobada recomendación WCAG 2.0 recomienda añadir un enlace al comienzo de la página que apunte al contenido ( http://www.w3.org/WAI/WCAG20/quickref/20071211/Overview.php#qr-navigation-mechanisms-skip) para que así los lectores de pantalla puedan saltarse el menú de navegación. El 28 de octubre de 2008 14:24, Martin Etxauri [EMAIL PROTECTED] escribió: Aupa a todos Nota: No se si esto es un OT o no, puesto que es una lista de CSS está estrechamente ligada con la accesibilidad como ya sabemos todos, si ah alguien le parece un OT mil perdones. Al grano. Creo no estar equivocado al pensar que para una correcta estructura del código el menú debería ir después del contenido, así con los lectores de pantalla, navegación por tabulador etc. no tienes que saltar todo el menú en cada sección nueva que visitas. También está la posibilidad de poner
Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra
te recomendaría que empezaras por un diseño de anchura fija en px (oigo rugidos de algunos). Imagino que te refieres a diseños líquidos, ¿no? Puede ser una opción, aunque en ese caso, yo suelo preferir el ancho en porcentaje (pero claro, es más difícil saber cómo quedará todo en distintas resoluciones). Por cierto, aunque las pautas no digan nada de este tipo de diseños, para la gente que tiene problemas visuales (como es mi caso) los diseños elásticos son una auténtica pesadilla. En cuanto amplías un poco la letra enseguida se salen de la pantalla y tienes que hacer scroll horizontal una y otra vez para poder leer el contenido. Con suerte cabe el ancho del contenido en la pantalla (si no amplías mucho) y sólo te quedas sin la navegación hasta que haces scroll. Y si además estás usando un magnificador de pantalla ya ni te cuento, por un lado tienes el scroll propio del magnificador y por otro el de la página... Una gozada, vamos. En definitiva, que si lo que se quiere es accesibilidad *real*, para mí lo mejor son los diseños líquidos, y eso sí, claro, bien hechos para que no se solapen las cosas. Un saludín, Ramó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
Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra
El truco es tener un elemento dentro de otro: div class=xxxdiv/div/div .xxx tendría una imagen ancha con una esquina redondeada (de fondo, claro). .xxx div tendría una imagen más estrecha con LA OTRA esquina redondeada (y sin transparencia... No sé si eso te sirve) Un ejemplo: http://www.imm.cnm.csic.es/RedBiosensores/ Saludos, Ignacio Gros Envíe los mensajes para la lista Ovillo a ovillo@lists.ovillo.org Para subscribirse o anular su subscripción a través de la WEB http://lists.ovillo.org/mailman/listinfo/ovillo O por correo electrónico, enviando un mensaje con el texto help en el asunto (subject) o en el cuerpo a: [EMAIL PROTECTED] Puede contactar con el responsable de la lista escribiendo a: [EMAIL PROTECTED] Si responde a algún contenido de este mensaje, por favor, edite la linea del asunto (subject) para que el texto sea mas especifico que: Re: Contents of Ovillo digest Además, por favor, incluya en la respuesta sólo aquellas partes del mensaje a las que está respondiendo. Asuntos del día: 1. Esquina redondeada y bordes superior e izquierdo con sombra (Jorge) 2. Re: Esquina redondeada y bordes superior e izquierdo con sombra ( Ramon Vilar Gavaldà ) 3. Re: Esquina redondeada y bordes superior e izquierdo consombra (Jorge) 4. Re: Esquina redondeada y bordes superior e izquierdo consombra ( Jinglero - Pedro Federico García ) 5. Re: Esquina redondeada y bordes superior e izquierdo consombra (Daniel Navarro) 6. Re: Esquina redondeada y bordes superior e izquierdo consombra (Alejandro Jorge) -- Message: 1 Date: Mon, 3 Nov 2008 20:36:44 - From: Jorge [EMAIL PROTECTED] Subject: [Ovillo] Esquina redondeada y bordes superior e izquierdo con sombra To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; format=flowed; charset=iso-8859-1; reply-type=original Hola lista, estoy maquetando una página, que lleva un diseño elástico (se expande horizontal y verticalmente segun tamaño de la fuente) y debe ser accesible y semanticamente correcta ya que es para una Administracion Publica y se obliga a cumplir minimo el nivel AA de accesibilidad. La cuestión es que tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) cuyos bordes superior e izquierdo lleva una sombra, además de la propia esquina. Podeis ver una imagen de lo que pretendo hacer en la dirección: http://mbrown.iespana.es/img/maqueta.jpg Mi pregunta es si alguien puede decirme cuál es el mejor método para implementar ese diseño para que lo más accesible y semántico posible. Gracias de antemano, Jorge -- Message: 2 Date: Mon, 3 Nov 2008 22:48:36 +0100 From: Ramon Vilar Gavaldà [EMAIL PROTECTED] Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo con sombra To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=ISO-8859-1 Buenas La URL que passas no es correcta. Le faltan permisos al directorio para poder visualizarse. Ramon 2008/11/3 Jorge [EMAIL PROTECTED]: Hola lista, estoy maquetando una página, que lleva un diseño elástico (se expande horizontal y verticalmente segun tamaño de la fuente) y debe ser accesible y semanticamente correcta ya que es para una Administracion Publica y se obliga a cumplir minimo el nivel AA de accesibilidad. La cuestión es que tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) cuyos bordes superior e izquierdo lleva una sombra, además de la propia esquina. Podeis ver una imagen de lo que pretendo hacer en la dirección: http://mbrown.iespana.es/img/maqueta.jpg Mi pregunta es si alguien puede decirme cuál es el mejor método para implementar ese diseño para que lo más accesible y semántico posible. Gracias de antemano, Jorge ___ 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 -- Ramon Vilar Gavaldà - http://ramonvilar.facil.cat Membre de FÀCIL - http://www.facil.cat Membre de l'esplai SESA - http://www.esplaisesa.org -- Message: 3 Date: Mon, 3 Nov 2008 22:34:00 - From: Jorge [EMAIL PROTECTED] Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; format=flowed; charset=iso-8859-1; reply-type=original Hola Ramón, no es correcta la url http://mbrown.iespana.es/img/maqueta.jpg ? indico la
Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra
Hola Daniel, ... A mí también me dio error la primera vez que intenté acceder al enlace, pero ahora parece funcionar sin problemas. no sé que problemas hay con el servidor, o si solo se permite el acceso desde España, que lo dudo, pero yo desde mi casa y desde mi trabajo puedo acceder sin problemas. Espero que no vuelva a pasar. ... Si tienes claro que quieres este tipo de diseño, adelante. Pero si estás empezando en el mundillo del diseño web no lo sé), te recomendaría que empezaras por un diseño de anchura fija en px (oigo rugidos de algunos). Trabajo en una Administracion Publica donde se nos exije que las paginas webs cumplan con los pautas de accesibilidad (minimo AA). Hasta ahora todos los diseños que he hecho son elasticos (p.ej. http://portal.grancanaria.com/portal/home.bib [en pruebas aun]. El inconveniente de este diseño es que como pongas una resolucion menor aparece el scroll horizontal). ... Las versiones más modernas de los principales navegadores están incorporando zoom completo de página en vez de zoom de texto. Por lo tanto, un diseño fijo con px es cada vez menos traumático. Tengo que pensar en todo el mundo, los que tienen IE5, Safari, Firefox, Lynx, ... ...Te recuerdo que sólo puedes usar un background-image para cada elemento (x)html. Para que el diseño pueda redimensionarse horizontalmente, se necesitan, al menos, dos imágenes de fondo. Una de ellas tiene que ser lo suficientemente grande como para que la otra se deslice sobre ella ocultándola (técnica de las puertas correderas). ¿A que elemento le aplico la imagen de fondo que va a hacer de puerta corredera? Esta claro que el borde izqdo junto con la esquina se lo aplico al div CONTENIDO pero para conseguir el borde superior no tengo ningun elemento al que aplicarle la imagen de fondo. ¿como hago? ... Nota: Para las sombras usa un programa de diseño gráfico en condiciones, que te incluya este efecto. La imagen que propones parece hecha con el Paint. Esta hecha con Photoshop. Muchas gracias por tu respuesta y ayuda. Jorge Date: Tue, 4 Nov 2008 01:22:22 +0100 From: [EMAIL PROTECTED] To: ovillo@lists.ovillo.org Subject: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra Hola Jorge: A mí también me dio error la primera vez que intenté acceder al enlace, pero ahora parece funcionar sin problemas. [...] que lleva un diseño elástico (se expande horizontal y verticalmente segun tamaño de la fuente) Si tienes claro que quieres este tipo de diseño, adelante. Pero si estás empezando en el mundillo del diseño web (no lo sé), te recomendaría que empezaras por un diseño de anchura fija en px (oigo rugidos de algunos). Las versiones más modernas de los principales navegadores están incorporando zoom completo de página en vez de zoom de texto. Por lo tanto, un diseño fijo con px es cada vez menos traumático. De todas formas, posteriormente es muy sencillo convertir un diseño de tamaño fijo en uno elástico. [...]debe ser accesible y semanticamente correcta [..]. La cuestión es que tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) cuyos bordes superior e izquierdo lleva una sombra, además de la propia esquina. Esas esquinas no contienen ningún valor semántico sino que son de adorno. Por lo tanto, OJO, no la incluyas en el documento mediante el elemento img, sino como imágenes de fondo con la propiedad CSS *background* o * background-image*. Te recuerdo que sólo puedes usar un background-image para cada elemento (x)html. Para que el diseño pueda redimensionarse horizontalmente, se necesitan, al menos, dos imágenes de fondo. Una de ellas tiene que ser lo suficientemente grande como para que la otra se deslice sobre ella ocultándola (técnica de las puertas correderas). Nota: Para las sombras usa un programa de diseño gráfico en condiciones, que te incluya este efecto. La imagen que propones parece hecha con el Paint. 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 _ El otoño llega cargado de novedades http://events.es.msn.com/noticias/vuelta-al-cole ___ 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] Esquina redondeada y bordes superior e izquierdo consombra
Yo tampoco la veo... Forbidden You don't have permission to access /img/maqueta.jpg on this server. Salutes El 3 de noviembre de 2008 19:34, Jorge [EMAIL PROTECTED] escribió: Hola Ramón, no es correcta la url http://mbrown.iespana.es/img/maqueta.jpg ? indico la ruta completa a la imagen que pretendo que veais. Yo diria que todo el mundo puede verla, corrijanme si me equivoco. Jorge - Mensaje original - De: Ramon Vilar Gavaldà [EMAIL PROTECTED] Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Enviado: lunes, 03 de noviembre de 2008 21:48 Asunto: Re: [Ovillo] Esquina redondeada y bordes superior e izquierdo consombra Buenas La URL que passas no es correcta. Le faltan permisos al directorio para poder visualizarse. Ramon 2008/11/3 Jorge [EMAIL PROTECTED]: Hola lista, estoy maquetando una página, que lleva un diseño elástico (se expande horizontal y verticalmente segun tamaño de la fuente) y debe ser accesible y semanticamente correcta ya que es para una Administracion Publica y se obliga a cumplir minimo el nivel AA de accesibilidad. La cuestión es que tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) cuyos bordes superior e izquierdo lleva una sombra, además de la propia esquina. Podeis ver una imagen de lo que pretendo hacer en la dirección: http://mbrown.iespana.es/img/maqueta.jpg Mi pregunta es si alguien puede decirme cuál es el mejor método para implementar ese diseño para que lo más accesible y semántico posible. Gracias de antemano, Jorge ___ 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 -- Ramon Vilar Gavaldà - http://ramonvilar.facil.cat Membre de FÀCIL - http://www.facil.cat Membre de l'esplai SESA - http://www.esplaisesa.org ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://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 -- Jinglero - Pedro Federico Garcia MSN: [EMAIL PROTECTED] www.jinglero.com.ar www.doxma.com www.leedor.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] Esquina redondeada y bordes superior e izquierdo consombra
Hola Jorge: A mí también me dio error la primera vez que intenté acceder al enlace, pero ahora parece funcionar sin problemas. [...] que lleva un diseño elástico (se expande horizontal y verticalmente segun tamaño de la fuente) Si tienes claro que quieres este tipo de diseño, adelante. Pero si estás empezando en el mundillo del diseño web (no lo sé), te recomendaría que empezaras por un diseño de anchura fija en px (oigo rugidos de algunos). Las versiones más modernas de los principales navegadores están incorporando zoom completo de página en vez de zoom de texto. Por lo tanto, un diseño fijo con px es cada vez menos traumático. De todas formas, posteriormente es muy sencillo convertir un diseño de tamaño fijo en uno elástico. [...]debe ser accesible y semanticamente correcta [..]. La cuestión es que tengo que hacer una esquina redondeada en un div (llamado CONTENIDO) cuyos bordes superior e izquierdo lleva una sombra, además de la propia esquina. Esas esquinas no contienen ningún valor semántico sino que son de adorno. Por lo tanto, OJO, no la incluyas en el documento mediante el elemento img, sino como imágenes de fondo con la propiedad CSS *background* o * background-image*. Te recuerdo que sólo puedes usar un background-image para cada elemento (x)html. Para que el diseño pueda redimensionarse horizontalmente, se necesitan, al menos, dos imágenes de fondo. Una de ellas tiene que ser lo suficientemente grande como para que la otra se deslice sobre ella ocultándola (técnica de las puertas correderas). Nota: Para las sombras usa un programa de diseño gráfico en condiciones, que te incluya este efecto. La imagen que propones parece hecha con el Paint. 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
