Re: [Ovillo] duda responsive design
Ok marcos, ya probareacute; lo que me has comentado y te direacute; si ya me funciona, muchas gracias y un saludo: Germaacute;n vaquer Mensaje originalDe: mmfilesi@gmail.comFecha: 24/10/2012 0:37Para: Ovillo, la lista de CSS en castellanoovillo@lists.ovillo.orgAsunto: Re: [Ovillo] duda responsive design+ cosas.*1)* Para prevenir que la imagen te escojone las caacute;psula (Empedrats...),como te ocurre con la segunda de la segunda fila, conviene que especifiquesuna altura maacute;xima a las imaacute;genes. Para eso puedes antilde;adir una clase a lasimaacute;genes.img_columna1 {width:100% !important;max-height: 10em;overflow:hidden;margin:1em;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}*2)* En vez demeta name=viewport content=width=device-widthmejor asiacute;meta name=viewport content=width=device-width, initial-scale=1,user-scalable=yes*3)* Como estaacute;s con cajitas flotantes, te conviene que todas las columnasesteacute;n dentro de un div que las contenga y en ese es importante que antilde;adasoverflow:hidden, para que la tostadora del explorer haga las cosas bien.4) No veo que el disentilde;o sea responsive. No seacute; si es que auacute;n no hasempezado. Te dejo un enlace a una guiacute;a que espero te sirva de ayuda.http://www.mmfilesi.com/blog/tutorial-responsive-web-design-iSUERTE.El 23 de octubre de 2012 23:56, german vaquer germ...@telefonica.netescribioacute;: Hola buenas! Estoy reconvirtiendo una web ya realizada en una web con disentilde;o responsivo para visualizar en cualquier dispositivo. El problema que tengo es en la siguiente paacute;gina de dicha web: http://www.pruebasgerman.com/companyo/entorn.html Aquiacute; tengo 9 imaacute;genes con su respectivo texto, y quiero que todas me queden en la misma posicioacute;n que las 3 primeras y las 3 de la parte central, el resto de imaacute;genes se me salen de madre y se me descolocan y no seacute; el porqueacute;, puesto que el coacute;digo css es el mismo para todas las imaacute;genes. Alguna sugerencia?, he repasado el coacute;digo por si hubiese algo que me faltase, pero la verdad es que no he visto nada raro. y eso que le he dado bastantes vueltas. Gracias de antemano: saludos Germaacute;n Vaquer ___ Lista de distribucioacute;n Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente direccioacute;n: http://lists.ovillo.org/mailman/listinfo/ovillo-- Marcos Meacute;ndez Filesihttp://www.mmfilesi.com/___Lista de distribucioacute;n OvilloPara escribir a la lista, envia un correo a Ovillo@lists.ovillo.orgPuedes modificar tus datos o desuscribirte en la siguiente direccioacute;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] duda responsive design
Hola Marcos, una pregunta, porque utilizas este metodo? *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes Cual es la diferencia y que aporta? Muchas gracias de antemano, Tamara ___ 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] duda responsive design
Hola Tamara, con user-scalable permites que el usuario pueda ampliar o reducir la pantalla. Puede tomar los valores no o yes; con initial le decimos que empiece mostrando las cosas en escala 1/1 (respecto a la resolución del móvil). +info http://revolucion.mobi/2012/02/14/mostrar-sitios-para-moviles-en-escala-correcta/ http://tableless.com.br/manipulando-metatag-viewport/ http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ Abrazos. El 24 de octubre de 2012 09:04, Tamara Forza tamara.fo...@gmail.comescribió: Hola Marcos, una pregunta, porque utilizas este metodo? *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes Cual es la diferencia y que aporta? Muchas gracias de antemano, Tamara ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.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] duda responsive design
Aupa Para evitar este problema yo suelo usar display:inline-block en vez de float, y si les pones a los elementos vertical-align:top te quedan todos alineados arriba, y no sucede esto que pasa con los floats que se te meten en los huecos y se desarma todo. Si quieres utilizar floats tendrás que poner, como han comentado, igual altura a todos los elementos. Otra opción, si quieres que tengan todos la misma altura teniendo cada uno contenido de diferentes dimensiones y tienes claro que quieres que siempre haya tres elementos por fila, es utilizar un sistema de tablas generadas por css, esto es, a los elementos les pones display:table-cell y tienes que poner una div que recoja cada fila con display:table; de esta manera sea el contenido que sea todos quedarán de la misma altura... pero creo que esto no es lo que pedías :) saludos El 23/10/2012, a las 23:56, german vaquer escribió: Hola buenas! Estoy reconvirtiendo una web ya realizada en una web con diseño responsivo para visualizar en cualquier dispositivo. El problema que tengo es en la siguiente página de dicha web: http://www.pruebasgerman.com/companyo/entorn.html Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me queden en la misma posición que las 3 primeras y las 3 de la parte central, el resto de imágenes se me salen de madre y se me descolocan y no sé el porqué, puesto que el código css es el mismo para todas las imágenes. Alguna sugerencia?, he repasado el código por si hubiese algo que me faltase, pero la verdad es que no he visto nada raro. y eso que le he dado bastantes vueltas. Gracias de antemano: saludos Germán Vaquer ___ 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] duda responsive design
Hola Marcos, gracias por la respuesta. Pregunto porque estoy trabajando en hacer responsive un sitio web muy simple, y hacendo pruebas con distintos dispositivos móviles he encontrado unos cuantos problemas con iPads y iPhones (no de ultima generación). El problema es que si en mi código utilizo: meta name=viewport content=width=device-width Entonces el sitio web se ve correctamente en posición portrait pero al girarlos en el landscape se queda con el mismo diseño simplemente un poco mas grande. Algo que no pasa con el mismo navegador en dispositivos que llevan Android. He probado a utilizar: meta name=viewport content=width=device-width, initial-scale=1 Con este código en posición landscape se me aplican correctamente los estilos. Poniendo el iPad (o iPhone) en portait lo estilos escalan bien, pero al volver a ponerlo en modo landscape los estilos se aplican correctamente pero es necesario hacer un zoom para que la pagina se quede correctamente. En este articulo explican el problema: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug No he probado utilizar user-scalable=yes, pero si no me equivoco es el comportamiento por defecto. Por eso me pregunto por que incluirlo? Ademas he leído que utilizar initial-scale=1 no es buena practica, por eso lo han quitado desde la ultima versión de html5boilerplate ( http://html5boilerplate.com/). Al final he optado por simplemente indicar que la pagina es apta para distintos tamaños: meta name=viewport content=width=device-width Saluldos, Tamara 2012/10/24 marcos méndez filesi mmfil...@gmail.com Hola Tamara, con user-scalable permites que el usuario pueda ampliar o reducir la pantalla. Puede tomar los valores no o yes; con initial le decimos que empiece mostrando las cosas en escala 1/1 (respecto a la resolución del móvil). +info http://revolucion.mobi/2012/02/14/mostrar-sitios-para-moviles-en-escala-correcta/ http://tableless.com.br/manipulando-metatag-viewport/ http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ Abrazos. El 24 de octubre de 2012 09:04, Tamara Forza tamara.fo...@gmail.com escribió: Hola Marcos, una pregunta, porque utilizas este metodo? *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes Cual es la diferencia y que aporta? Muchas gracias de antemano, Tamara ___ 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] duda responsive design
Muchas gracias a ti por compartir estas experiencias... curioso, sep. a) No he probado utilizar user-scalable=yes Aquí está la discusión en git sobre lo de la escala https://github.com/h5bp/html5-boilerplate/issues/824 Y algunos como el tal sichuan no lo tienen claro: I have tested on iOS5, after removing initial-scale=1.0, the default zooming behavior cause quite a big text jump when rotating happens, and it looks pretty undesirable De hecho, según cuenta el propio alex gibson, en la última versión de iOS ya se arregló el bug: https://github.com/h5bp/mobile-boilerplate/issues/140 b) ve correctamente en posición portrait pero al girarlos en el landscape se queda con el mismo diseño simplemente un poco mas grande. curioso... hay que investigar esto. Muchas gracias por la pista. c) No he probado utilizar user-scalable=yes Pos no lo había pensado, la verdad, lol... ABRAZOS. El 24 de octubre de 2012 10:58, Tamara Forza tamara.fo...@gmail.com escribió: Hola Marcos, gracias por la respuesta. Pregunto porque estoy trabajando en hacer responsive un sitio web muy simple, y hacendo pruebas con distintos dispositivos móviles he encontrado unos cuantos problemas con iPads y iPhones (no de ultima generación). El problema es que si en mi código utilizo: meta name=viewport content=width=device-width Entonces el sitio web se ve correctamente en posición portrait pero al girarlos en el landscape se queda con el mismo diseño simplemente un poco mas grande. Algo que no pasa con el mismo navegador en dispositivos que llevan Android. He probado a utilizar: meta name=viewport content=width=device-width, initial-scale=1 Con este código en posición landscape se me aplican correctamente los estilos. Poniendo el iPad (o iPhone) en portait lo estilos escalan bien, pero al volver a ponerlo en modo landscape los estilos se aplican correctamente pero es necesario hacer un zoom para que la pagina se quede correctamente. En este articulo explican el problema: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug No he probado utilizar user-scalable=yes, pero si no me equivoco es el comportamiento por defecto. Por eso me pregunto por que incluirlo? Ademas he leído que utilizar initial-scale=1 no es buena practica, por eso lo han quitado desde la ultima versión de html5boilerplate ( http://html5boilerplate.com/). Al final he optado por simplemente indicar que la pagina es apta para distintos tamaños: meta name=viewport content=width=device-width Saluldos, Tamara 2012/10/24 marcos méndez filesi mmfil...@gmail.com Hola Tamara, con user-scalable permites que el usuario pueda ampliar o reducir la pantalla. Puede tomar los valores no o yes; con initial le decimos que empiece mostrando las cosas en escala 1/1 (respecto a la resolución del móvil). +info http://revolucion.mobi/2012/02/14/mostrar-sitios-para-moviles-en-escala-correcta/ http://tableless.com.br/manipulando-metatag-viewport/ http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ Abrazos. El 24 de octubre de 2012 09:04, Tamara Forza tamara.fo...@gmail.com escribió: Hola Marcos, una pregunta, porque utilizas este metodo? *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes Cual es la diferencia y que aporta? Muchas gracias de antemano, Tamara ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.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] duda responsive design
Sí, es una buena solución. Había un problema pequeño de todas maneras con el inline-block que no recuerdo ahora muy bien cuál era, pero estaba relacionado con los márgenes que dejaba http://stackoverflow.com/questions/4716151/css-removing-horizontal-space-in-list-menu-using-display-inline-property Y por eso prefiero floats indicando la altura, pero vamos, que es una buena solución tb. Abrazos++ El 24 de octubre de 2012 10:21, Martin Etxauri t...@eragin.com escribió: Aupa Para evitar este problema yo suelo usar display:inline-block en vez de float, y si les pones a los elementos vertical-align:top te quedan todos alineados arriba, y no sucede esto que pasa con los floats que se te meten en los huecos y se desarma todo. Si quieres utilizar floats tendrás que poner, como han comentado, igual altura a todos los elementos. Otra opción, si quieres que tengan todos la misma altura teniendo cada uno contenido de diferentes dimensiones y tienes claro que quieres que siempre haya tres elementos por fila, es utilizar un sistema de tablas generadas por css, esto es, a los elementos les pones display:table-cell y tienes que poner una div que recoja cada fila con display:table; de esta manera sea el contenido que sea todos quedarán de la misma altura... pero creo que esto no es lo que pedías :) saludos El 23/10/2012, a las 23:56, german vaquer escribió: Hola buenas! Estoy reconvirtiendo una web ya realizada en una web con diseño responsivo para visualizar en cualquier dispositivo. El problema que tengo es en la siguiente página de dicha web: http://www.pruebasgerman.com/companyo/entorn.html Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me queden en la misma posición que las 3 primeras y las 3 de la parte central, el resto de imágenes se me salen de madre y se me descolocan y no sé el porqué, puesto que el código css es el mismo para todas las imágenes. Alguna sugerencia?, he repasado el código por si hubiese algo que me faltase, pero la verdad es que no he visto nada raro. y eso que le he dado bastantes vueltas. Gracias de antemano: saludos Germán Vaquer ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.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] duda responsive design
Hola! Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la clase columna1 y la clase imagen columna 1, y ahora ya se ve bien a resoluciones mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a descolocar la disposición de las imágenes y su contenido. http://www.pruebasgerman.com/companyo/entorn.html Que tengo que hacer mediaqueries específicos para cada resolución para que me quede todo ok?. Saludos i gracias a todos por vuestra ayuda. Germán Vaquer -Mensaje original- From: marcos méndez filesi Sent: Wednesday, October 24, 2012 12:37 AM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design + cosas. *1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...), como te ocurre con la segunda de la segunda fila, conviene que especifiques una altura máxima a las imágenes. Para eso puedes añadir una clase a las imágenes .img_columna1 { width:100% !important; max-height: 10em; overflow:hidden; margin:1em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes *3)* Como estás con cajitas flotantes, te conviene que todas las columnas estén dentro de un div que las contenga y en ese es importante que añadas overflow:hidden, para que la tostadora del explorer haga las cosas bien. 4) No veo que el diseño sea responsive. No sé si es que aún no has empezado. Te dejo un enlace a una guía que espero te sirva de ayuda. http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i SUERTE. El 23 de octubre de 2012 23:56, german vaquer germ...@telefonica.netescribió: Hola buenas! Estoy reconvirtiendo una web ya realizada en una web con diseño responsivo para visualizar en cualquier dispositivo. El problema que tengo es en la siguiente página de dicha web: http://www.pruebasgerman.com/companyo/entorn.html Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me queden en la misma posición que las 3 primeras y las 3 de la parte central, el resto de imágenes se me salen de madre y se me descolocan y no sé el porqué, puesto que el código css es el mismo para todas las imágenes. Alguna sugerencia?, he repasado el código por si hubiese algo que me faltase, pero la verdad es que no he visto nada raro. y eso que le he dado bastantes vueltas. Gracias de antemano: saludos Germán Vaquer ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.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 ___ 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] duda responsive design
muchas gracias a ti por compartir el proceso. Entonces, sí, la jugada podría ser esta. a) Limitar el ancho. Que nunca sea más de 1200, para que los que tengan resoluciones mayores no vean una página ilegible. Para eso, en el body podemos añadir esto: max-width: 1220px; b) Luego vamos con las media querys. Entonces, podrías hacer esto: En normal se ven las tres columnas, cada una con el 31% del ancho disponible Un poco más chico, hasta 600, solo dos, cada una con aproximadamente el 49% del ancho disponible Ya con menos de 400, se desflotan las columnas1 y se ponen al 100. Algo así: Normal: .columna1 { float:left; width:31%; margin: 0.5%; overflow:hidden; height:33em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /* Responsive */ @media screen and (max-width:620px){ .columna1 { width:45%; float:left; } } @media screen and (max-width:400px){ .columna1{ float:none; width:100%; margin:0 auto; } } El 24 de octubre de 2012 16:11, german vaquer germ...@telefonica.netescribió: Hola! Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la clase columna1 y la clase imagen columna 1, y ahora ya se ve bien a resoluciones mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a descolocar la disposición de las imágenes y su contenido. http://www.pruebasgerman.com/companyo/entorn.html Que tengo que hacer mediaqueries específicos para cada resolución para que me quede todo ok?. Saludos i gracias a todos por vuestra ayuda. Germán Vaquer -Mensaje original- From: marcos méndez filesi Sent: Wednesday, October 24, 2012 12:37 AM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design + cosas. *1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...), como te ocurre con la segunda de la segunda fila, conviene que especifiques una altura máxima a las imágenes. Para eso puedes añadir una clase a las imágenes .img_columna1 { width:100% !important; max-height: 10em; overflow:hidden; margin:1em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes *3)* Como estás con cajitas flotantes, te conviene que todas las columnas estén dentro de un div que las contenga y en ese es importante que añadas overflow:hidden, para que la tostadora del explorer haga las cosas bien. 4) No veo que el diseño sea responsive. No sé si es que aún no has empezado. Te dejo un enlace a una guía que espero te sirva de ayuda. http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i SUERTE. El 23 de octubre de 2012 23:56, german vaquer germ...@telefonica.netescribió: Hola buenas! Estoy reconvirtiendo una web ya realizada en una web con diseño responsivo para visualizar en cualquier dispositivo. El problema que tengo es en la siguiente página de dicha web: http://www.pruebasgerman.com/companyo/entorn.html Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me queden en la misma posición que las 3 primeras y las 3 de la parte central, el resto de imágenes se me salen de madre y se me descolocan y no sé el porqué, puesto que el código css es el mismo para todas las imágenes. Alguna sugerencia?, he repasado el código por si hubiese algo que me faltase, pero la verdad es que no he visto nada raro. y eso que le he dado bastantes vueltas. Gracias de antemano: saludos Germán Vaquer ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.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 ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.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] duda responsive design
Te conviene seguir el camino contrario, es decir, utilizar el concepto Mobile First (móvil primero) en el orden en que vincules las hojas CSS. La primera debería ser la versión a una columna, sin media queries, para que móviles que no procesan media queries se queden con el diseño a una columna. La segunda hoja CSS, deberías vincularla con una media querie con min-width:400px donde flotan dos columnas. La tercera hoja, con min-width:600px y flotas 3 columnas. Como tablets y PC soportan media queries, no tendrás problemas si usas un script compatibilizador para navegadores viejos, como el de: http://code.google.com/p/css3-mediaqueries-js/ Te sugiero ver estas diapos: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu Y una recopilación mía sobre el tema del año pasado (algunas cosas cambiaron, pero el concepto móvil primero continúa vigente): http://www.slideshare.net/hbeati/web-mvil-inclusiva-y-accesible Saludos! -- Hernán Beati http://www.saberweb.com.ar a) Limitar el ancho. Que nunca sea más de 1200, para que los que tengan resoluciones mayores no vean una página ilegible. Para eso, en el body podemos añadir esto: max-width: 1220px; b) Luego vamos con las media querys. Entonces, podrías hacer esto: En normal se ven las tres columnas, cada una con el 31% del ancho disponible Un poco más chico, hasta 600, solo dos, cada una con aproximadamente el 49% del ancho disponible Ya con menos de 400, se desflotan las columnas1 y se ponen al 100. Algo así: Normal: .columna1 { float:left; width:31%; margin: 0.5%; overflow:hidden; height:33em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /* Responsive */ @media screen and (max-width:620px){ .columna1 { width:45%; float:left; } } @media screen and (max-width:400px){ .columna1{ float:none; width:100%; margin:0 auto; } } El 24 de octubre de 2012 16:11, german vaquer germ...@telefonica.netescribió: Hola! Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la clase columna1 y la clase imagen columna 1, y ahora ya se ve bien a resoluciones mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a descolocar la disposición de las imágenes y su contenido. http://www.pruebasgerman.com/companyo/entorn.html Que tengo que hacer mediaqueries específicos para cada resolución para que me quede todo ok?. Saludos i gracias a todos por vuestra ayuda. Germán Vaquer -Mensaje original- From: marcos méndez filesi Sent: Wednesday, October 24, 2012 12:37 AM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design + cosas. *1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...), como te ocurre con la segunda de la segunda fila, conviene que especifiques una altura máxima a las imágenes. Para eso puedes añadir una clase a las imágenes .img_columna1 { width:100% !important; max-height: 10em; overflow:hidden; margin:1em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes *3)* Como estás con cajitas flotantes, te conviene que todas las columnas estén dentro de un div que las contenga y en ese es importante que añadas overflow:hidden, para que la tostadora del explorer haga las cosas bien. 4) No veo que el diseño sea responsive. No sé si es que aún no has empezado. Te dejo un enlace a una guía que espero te sirva de ayuda. http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i SUERTE. El 23 de octubre de 2012 23:56, german vaquer germ...@telefonica.netescribió: Hola buenas! Estoy reconvirtiendo una web ya realizada en una web con diseño responsivo para visualizar en cualquier dispositivo. El problema que tengo es en la siguiente página de dicha web: http://www.pruebasgerman.com/companyo/entorn.html Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me queden en la misma posición que las 3 primeras y las 3 de la parte central, el resto de imágenes se me salen de madre y se me descolocan y no sé el porqué, puesto que el código css es el mismo para todas las imágenes. Alguna sugerencia?, he repasado el código por si hubiese algo que me faltase, pero la verdad es que no he visto nada raro. y eso que le he dado bastantes vueltas. Gracias de antemano: saludos Germán Vaquer ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.com/ ___ Lista de distribución Ovillo Para
Re: [Ovillo] duda responsive design
Ok ya me funciona y me redimensionan las columnas sin descolocarse, gracias Saludos: Germán Vaquer -Mensaje original- From: marcos méndez filesi Sent: Wednesday, October 24, 2012 4:40 PM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design muchas gracias a ti por compartir el proceso. Entonces, sí, la jugada podría ser esta. a) Limitar el ancho. Que nunca sea más de 1200, para que los que tengan resoluciones mayores no vean una página ilegible. Para eso, en el body podemos añadir esto: max-width: 1220px; b) Luego vamos con las media querys. Entonces, podrías hacer esto: En normal se ven las tres columnas, cada una con el 31% del ancho disponible Un poco más chico, hasta 600, solo dos, cada una con aproximadamente el 49% del ancho disponible Ya con menos de 400, se desflotan las columnas1 y se ponen al 100. Algo así: Normal: .columna1 { float:left; width:31%; margin: 0.5%; overflow:hidden; height:33em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /* Responsive */ @media screen and (max-width:620px){ .columna1 { width:45%; float:left; } } @media screen and (max-width:400px){ .columna1{ float:none; width:100%; margin:0 auto; } } El 24 de octubre de 2012 16:11, german vaquer germ...@telefonica.netescribió: Hola! Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la clase columna1 y la clase imagen columna 1, y ahora ya se ve bien a resoluciones mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a descolocar la disposición de las imágenes y su contenido. http://www.pruebasgerman.com/companyo/entorn.html Que tengo que hacer mediaqueries específicos para cada resolución para que me quede todo ok?. Saludos i gracias a todos por vuestra ayuda. Germán Vaquer -Mensaje original- From: marcos méndez filesi Sent: Wednesday, October 24, 2012 12:37 AM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design + cosas. *1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...), como te ocurre con la segunda de la segunda fila, conviene que especifiques una altura máxima a las imágenes. Para eso puedes añadir una clase a las imágenes .img_columna1 { width:100% !important; max-height: 10em; overflow:hidden; margin:1em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes *3)* Como estás con cajitas flotantes, te conviene que todas las columnas estén dentro de un div que las contenga y en ese es importante que añadas overflow:hidden, para que la tostadora del explorer haga las cosas bien. 4) No veo que el diseño sea responsive. No sé si es que aún no has empezado. Te dejo un enlace a una guía que espero te sirva de ayuda. http://www.mmfilesi.com/blog/tutorial-responsive-web-design-i SUERTE. El 23 de octubre de 2012 23:56, german vaquer germ...@telefonica.netescribió: Hola buenas! Estoy reconvirtiendo una web ya realizada en una web con diseño responsivo para visualizar en cualquier dispositivo. El problema que tengo es en la siguiente página de dicha web: http://www.pruebasgerman.com/companyo/entorn.html Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me queden en la misma posición que las 3 primeras y las 3 de la parte central, el resto de imágenes se me salen de madre y se me descolocan y no sé el porqué, puesto que el código css es el mismo para todas las imágenes. Alguna sugerencia?, he repasado el código por si hubiese algo que me faltase, pero la verdad es que no he visto nada raro. y eso que le he dado bastantes vueltas. Gracias de antemano: saludos Germán Vaquer ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.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 ___ 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 -- Marcos Méndez Filesi http://www.mmfilesi.com/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus
Re: [Ovillo] duda responsive design
Hola Germán, hay algo raruno, pero no consigo identificar qué es. a) Cuando pones el navegador a 480 o - te sale el scroll horizontal, que no debería salir nunca en un diseño responsive. ¿Hay algo que no encuentro que tenga min-width:480...? + cosinas b) Ya que cambias el ancho de cada columna1 en resoluciones menores, puedes cambiar tb el alto. Quedará más chulo. c) El botonako de más información pesa mucho (es muy llamativo) y como queda desparejo da cierta sensación de desorden. Se podrían alinear abajo haciendo un pequeño jaleo, pero quizás te quede más chulo si: 1) La propia imagen es un enlace + el titulo es un enlace 2) y ya al final del texto solo añades este enlace (seguido) + información. De esa manera no incordiará que quede desparejo, ya que el texto mancha mucho menos que el botón con fondo de colirinchis. No sé si me explico. 3) SI conviertes las imágenes en enlaces, les podrías añadir algún efcto chulo x CSS, que no cuesta mucho, como bajarles un poco la opacidad, que da sensación de brillo. Y ya mejor aún si lo haces con alguna transición ( http://www.mmfilesi.com/blog/efectos-especiales-con-css3-la-propiedad-transition/ ) 4) Un poco de margen al texto por los lados no le vendría mal (y mejor alineado x bandera a la izda). 5) Hay dos formas de tratar las imágenes en responsive cuando se alargan (digo, así con CSS, sin meter PHP ni cosas complejas de por medio). Una es como la tienen, pero verás que se te distorsionan un poco cuando se ponen al cien por cien en resoluciones canis. A mí eso no me molesta, pero igual puedes hacer otra historia y es meterlas dentro de un div, que es donde pones el overflow:hidden, y así lo que pasa es que se muestra un fragmento, pero sin distorsionarse. En cualquier caso, te está quedando una página CHULÍSIMA. *Abrazos++* El 25 de octubre de 2012 00:14, german vaquer germ...@telefonica.netescribió: Ok ya me funciona y me redimensionan las columnas sin descolocarse, gracias Saludos: Germán Vaquer -Mensaje original- From: marcos méndez filesi Sent: Wednesday, October 24, 2012 4:40 PM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design muchas gracias a ti por compartir el proceso. Entonces, sí, la jugada podría ser esta. a) Limitar el ancho. Que nunca sea más de 1200, para que los que tengan resoluciones mayores no vean una página ilegible. Para eso, en el body podemos añadir esto: max-width: 1220px; b) Luego vamos con las media querys. Entonces, podrías hacer esto: En normal se ven las tres columnas, cada una con el 31% del ancho disponible Un poco más chico, hasta 600, solo dos, cada una con aproximadamente el 49% del ancho disponible Ya con menos de 400, se desflotan las columnas1 y se ponen al 100. Algo así: Normal: .columna1 { float:left; width:31%; margin: 0.5%; overflow:hidden; height:33em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /* Responsive */ @media screen and (max-width:620px){ .columna1 { width:45%; float:left; } } @media screen and (max-width:400px){ .columna1{ float:none; width:100%; margin:0 auto; } } El 24 de octubre de 2012 16:11, german vaquer germ...@telefonica.netescribió: Hola! Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la clase columna1 y la clase imagen columna 1, y ahora ya se ve bien a resoluciones mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a descolocar la disposición de las imágenes y su contenido. http://www.pruebasgerman.com/companyo/entorn.html Que tengo que hacer mediaqueries específicos para cada resolución para que me quede todo ok?. Saludos i gracias a todos por vuestra ayuda. Germán Vaquer -Mensaje original- From: marcos méndez filesi Sent: Wednesday, October 24, 2012 12:37 AM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design + cosas. *1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...), como te ocurre con la segunda de la segunda fila, conviene que especifiques una altura máxima a las imágenes. Para eso puedes añadir una clase a las imágenes .img_columna1 { width:100% !important; max-height: 10em; overflow:hidden; margin:1em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } *2)* En vez de meta name=viewport content=width=device-width mejor así meta name=viewport content=width=device-width, initial-scale=1, user-scalable=yes *3)* Como estás con cajitas flotantes, te conviene que todas las columnas estén dentro de un div que las contenga y en ese es importante que añadas overflow:hidden, para que la tostadora del explorer haga las cosas bien. 4) No veo que el diseño sea responsive. No sé si es que aún no has empezado. Te dejo un enlace a una guía que espero te sirva de ayuda.
Re: [Ovillo] duda responsive design
Hola Marcos! a) Tienes razoacute;n mirareacute; porque me sale el scroll. b) por eso las imaacute;genes salen un poco achatadas, no? por el alto de la columna 1, lo miro. c) Tienes razoacute;n el botoacute;n sale muy desordenado en consonacia con el texto y las imaacute;genes, estudiareacute; las 2 opciones modificar el botoacute;n o poner el enlace en la imagen, a ver que da mejor resultado. Otra cosa, en la paacute;gina de inicio http://www.pruebasgerman.com/companyo/index.html en el slider de las imaacute;genes, para hacerlo responsive, hace falta alguna cosa maacute;s a parte de darle un 100% witdh?,porque aveces cuando pruebo con resoluciones de moviles y tablets me sale un mensaje de que la imagen no se reescala y no muestra las imaacute;genes. Y gracias por lo de la web chula, la verdad es que el cliente ya quedoacute; muy contento con la versioacute;n para ordenador y por eso me dijo que si la podiacute;a adaptar para otros dispositivos. Un abrazo: Germaacute;n PD: muy chulo tu blog y uacute;til. Mensaje originalDe: mmfilesi@gmail.comFecha: 25/10/2012 0:50Para: Ovillo, la lista de CSS en castellanoovillo@lists.ovillo.orgAsunto: Re: [Ovillo] duda responsive designHola Germaacute;n,hay algo raruno, pero no consigo identificar queacute; es.a) Cuando pones el navegador a 480 o - te sale el scroll horizontal, que nodeberiacute;a salir nunca en un disentilde;o responsive. iquest;Hay algo que no encuentro quetenga min-width:480...?+ cosinasb) Ya que cambias el ancho de cada columna1 en resoluciones menores, puedescambiar tb el alto. Quedaraacute; maacute;s chulo.c) El botonako de maacute;s informacioacute;n pesa mucho (es muy llamativo) y comoqueda desparejo da cierta sensacioacute;n de desorden. Se podriacute;an alinear abajohaciendo un pequentilde;o jaleo, pero quizaacute;s te quede maacute;s chulo si:1) La propia imagen es un enlace + el titulo es un enlace2) y ya al final del texto solo antilde;ades este enlace (seguido) + informacioacute;n.De esa manera no incordiaraacute; que quede desparejo, ya que el texto manchamucho menos que el botoacute;n con fondo de colirinchis. No seacute; si me explico.3) SI conviertes las imaacute;genes en enlaces, les podriacute;as antilde;adir alguacute;n efctochulo x CSS, que no cuesta mucho, como bajarles un poco la opacidad, que dasensacioacute;n de brillo. Y ya mejor auacute;n si lo haces con alguna transicioacute;n (http://www.mmfilesi.com/blog/efectos-especiales-con-css3-la-propiedad-transition/)4) Un poco de margen al texto por los lados no le vendriacute;a mal (y mejoralineado x bandera a la izda).5) Hay dos formas de tratar las imaacute;genes en responsive cuando se alargan(digo, asiacute; con CSS, sin meter PHP ni cosas complejas de por medio). Una escomo la tienen, pero veraacute;s que se te distorsionan un poco cuando se ponenal cien por cien en resoluciones canis. A miacute; eso no me molesta, pero igualpuedes hacer otra historia y es meterlas dentro de un div, que es dondepones el overflow:hidden, y asiacute; lo que pasa es que se muestra un fragmento,pero sin distorsionarse.En cualquier caso, te estaacute; quedando una paacute;gina CHULIacute;SIMA.*Abrazos++*El 25 de octubre de 2012 00:14, german vaquer germ...@telefonica.netescribioacute;: Ok ya me funciona y me redimensionan las columnas sin descolocarse, gracias Saludos: Germaacute;n Vaquer -Mensaje original- From: marcos meacute;ndez filesi Sent: Wednesday, October 24, 2012 4:40 PM To: Ovillo, la lista de CSS en castellano Subject: Re: [Ovillo] duda responsive design muchas gracias a ti por compartir el proceso. Entonces, siacute;, la jugada podriacute;a ser esta. a) Limitar el ancho. Que nunca sea maacute;s de 1200, para que los que tengan resoluciones mayores no vean una paacute;gina ilegible. Para eso, en el body podemos antilde;adir esto: max-width: 1220px; b) Luego vamos con las media querys. Entonces, podriacute;as hacer esto: En normal se ven las tres columnas, cada una con el 31% del ancho disponible Un poco maacute;s chico, hasta 600, solo dos, cada una con aproximadamente el 49% del ancho disponible Ya con menos de 400, se desflotan las columnas1 y se ponen al 100. Algo asiacute;: Normal: .columna1 { float:left; width:31%; margin: 0.5%; overflow:hidden; height:33em; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /* Responsive */ @media screen and (max-width:620px){ .columna1 { width:45%; float:left; } } @media screen and (max-width:400px){ .columna1{ float:none; width:100%; margin:0 auto; } } El 24 de octubre de 2012 16:11, german vaquer germ...@telefonica.netescribioacute;: Hola! Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la clase columna1 y la clase imagen columna 1, y ahora ya se ve bien a resoluciones mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a descolocar la disposicioacute;n de las imaacute;genes y su