Re: [Ovillo] duda responsive design

2012-11-12 Por tema Miguel Beltran R.
Muy buenos tips, gracias!!!

El 24 de octubre de 2012 15:24, Hernán Beati her...@saberweb.com.arescribió:

 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




-- 

Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida
___
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

2012-10-26 Por tema marcos méndez filesi
Germán, perdona la demora, que llevo unos días perrunos perrunos...

Entonces, aquí te (os, si le interesa a alguien más) una entrada explicando
cómo cargar o no cosas mediante php

http://www.mmfilesi.com/blog/como-detectar-dispositivos-moviles-mediante-php/

Abrazos++



-- 
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

2012-10-25 Por tema marcos méndez filesi
a) Trataré de explicar lo de las imágenes. Entonces, las que queremos que
se estiren les ponemos eso del width: 100%. A partir de ahí pueden pasar
dos cosas:

1. Si la imagen no tiene nada que le ciña la altura, que es lo mejor,
cuando se agranda o se achica, la altura corre pareja, por lo que no se
distorsiona.

2. Pero a veces, como hiciste con tu página, hay que hacer algún apaño si
las imágenes no son homogéneas, esto es, ocultar lo que sobra o definir una
altura máxima. En este caso, como no tiene por donde ampliar el alto
correspondiente, se distorsiona, por lo que es mejor hacer lo primero, un
div con overflow:hidden que oculte lo que sobra.

En síntesis: lo mejor de lo mejor, pues que las imágenes sean todas
homogéneas y así puedes hacer la solución 1 y te quitas de líos y es todo
más elástico. Si no, pues ya hay que decidir por el mal menor: recortar o
distorsionar.

No sé si me explico, que voy volado.

b) Respecto al Slider, sugiero que te lo cargues para resoluciones móviles.
¿Por qué? Pues porque en el móvil tienes una conexión fatal, vas leyendo en
el metro o el autobús, cada dato que te llega amenaza la tarifa plana y
esas imágenes de portada no son necesarias. Son un adorno muy chulo, pero
quizás no compense todos esos datos enviados si tenemos en cuenta el uso
que harán de la web cuando se conecten desde un móvil.

Ahora tengo que salir, en cuanto vuelva a la noche trato de explicar esto
mejor.

ABRAZOS++

-- 
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

2012-10-24 Por tema germ...@telefonica.net

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

2012-10-24 Por tema Tamara Forza
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

2012-10-24 Por tema marcos méndez filesi
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

2012-10-24 Por tema Martin Etxauri
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

2012-10-24 Por tema Tamara Forza
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

2012-10-24 Por tema marcos méndez filesi
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

2012-10-24 Por tema marcos méndez filesi
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

2012-10-24 Por tema german vaquer
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

2012-10-24 Por tema marcos méndez filesi
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

2012-10-24 Por tema Hernán Beati
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

2012-10-24 Por tema german vaquer
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

2012-10-24 Por tema marcos méndez filesi
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.
 
  http://www.mmfilesi.com

Re: [Ovillo] duda responsive design

2012-10-24 Por tema germ...@telefonica.net

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

Re: [Ovillo] duda responsive design

2012-10-23 Por tema Olivier Blázquez
Hola,
Yo lo veo de forma diferente en firefox y chrome, así que no tengo muy
claro tu problema, pero igual podrías solucionarlo creando una clase nueva
con un clear: both; y ponerlo en el cuarto div columna1, en el septimo
div columna 1... Es decir, en las cajas que comiencen a crear una nueva
fila. El problema viene dado por el tamaño de las cajas superiores: si no
es exactamente igual en las tres cajas, las cajas que están en la fila
inferior si encuentran un hueco, se suben a ese hueco.

Espero haberme explicado.



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

___
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

2012-10-23 Por tema Olivier Blázquez
 Hola,
 Yo lo veo de forma diferente en firefox y chrome, así que no tengo muy
 claro tu problema, pero igual podrías solucionarlo creando una clase nueva
 con un clear: both; y ponerlo en el cuarto div columna1, en el septimo
 div columna 1... Es decir, en las cajas que comiencen a crear una nueva
 fila. El problema viene dado por el tamaño de las cajas superiores: si no
 es exactamente igual en las tres cajas, las cajas que están en la fila
 inferior si encuentran un hueco, se suben a ese hueco.

 Espero haberme explicado.



 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



___
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

2012-10-23 Por tema marcos méndez filesi
por favor, prueba a añadir esto en las CSS

columna1 {
min-height:33em;
overflow:hidden
}

El 24 de octubre de 2012 00:10, Olivier Blázquez obe...@gmail.comescribió:

  Hola,
  Yo lo veo de forma diferente en firefox y chrome, así que no tengo muy
  claro tu problema, pero igual podrías solucionarlo creando una clase
 nueva
  con un clear: both; y ponerlo en el cuarto div columna1, en el septimo
  div columna 1... Es decir, en las cajas que comiencen a crear una nueva
  fila. El problema viene dado por el tamaño de las cajas superiores: si no
  es exactamente igual en las tres cajas, las cajas que están en la fila
  inferior si encuentran un hueco, se suben a ese hueco.
 
  Espero haberme explicado.
 
 
 
  El 23 de octubre de 2012 23:56, german vaquer germ...@telefonica.net
 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

2012-10-23 Por tema marcos méndez filesi
No sé si llegó el anterior mensaje.

Por favor, prueba esto

columna1 {
min-height:33em;
overflow:hidden
}

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


Re: [Ovillo] duda responsive design