Re: [Ovillo] web responsive

2012-11-19 Por tema german vaquer
Hola a todos!

Sigo con los problemas de diseño responsive, ahora no se que pasa que desde 
un dispositivo móvil solamente veo el menu de navegación pero no el resto de 
la web, ni scroll horizontal  ni vertical.

Saludos y gracias por adelantado.

Germán Vaquer

-Mensaje original- 
From: santosvz
Sent: Friday, November 16, 2012 12:53 PM
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] web responsive

Referecial:
http://johnpolacek.github.com/ResponsiveThumbnailGallery/
http://tympanus.net/Tutorials/ResponsiveImageGallery/


*-Mensaje original-
*De: ovillo-boun...@lists.ovillo.org
[mailto:ovillo-boun...@lists.ovillo.org] En
*nombre de german vaquer
*Enviado el: lunes, 12 de noviembre de 2012 07:12 a.m.
*Para: Ovillo
*Asunto: [Ovillo] web responsive
*
*Hola a todos!
*
*Estoy adaptando la web a dispositivos móviles y tablets, pero no consigo
*eliminar el scroll horizontal, sobre todo en lo que respecta a los
dispositivos
*móviles, en cuanto a tablets no tengo tanto problema.
*
*He estado revisando las css de mi web, y la verdad, es que no sé donde esta
*el problema, seguramente será una chorrada, pero estoy tan espeso que no
*vería ni un elefante aunque lo tuviese delante.
*
*la web es: http://www.pruebasgerman.com/companyo/index.html
*
*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 

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


[Ovillo] web responsive

2012-11-12 Por tema german vaquer
Hola a todos!

Estoy adaptando la web a dispositivos móviles y tablets, pero no consigo 
eliminar el scroll horizontal, sobre todo en lo que respecta a los dispositivos 
móviles, en cuanto a tablets no tengo tanto problema.

He estado revisando las css de mi web, y la verdad, es que no sé donde esta el 
problema, seguramente será una chorrada, pero estoy tan espeso que no vería ni 
un elefante aunque lo tuviese delante.

la web es: http://www.pruebasgerman.com/companyo/index.html

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


Re: [Ovillo] web responsive

2012-11-12 Por tema german vaquer
Hola marcos!
Lo he cambiado y sigue mal gracias.
Saludos: Germán

-Mensaje original- 
From: marcos méndez filesi
Sent: Monday, November 12, 2012 12:45 PM
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] web responsive

Prueba a quitar esto, por favor

min-width: 460px;

de #contenido

bs++




El 12 de noviembre de 2012 12:42, german vaquer
germ...@telefonica.netescribió:

 Hola a todos!

 Estoy adaptando la web a dispositivos móviles y tablets, pero no consigo
 eliminar el scroll horizontal, sobre todo en lo que respecta a los
 dispositivos móviles, en cuanto a tablets no tengo tanto problema.

 He estado revisando las css de mi web, y la verdad, es que no sé donde
 esta el problema, seguramente será una chorrada, pero estoy tan espeso que
 no vería ni un elefante aunque lo tuviese delante.

 la web es: http://www.pruebasgerman.com/companyo/index.html

 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] web responsive

2012-11-12 Por tema german vaquer
Hola!

He hecho lo que habéis dicho tu y tamara, y efectivamente ya no tengo 
scroll, pero ahora veo que el contenido no me cabe, tengo el container  y el 
contenido con un ancho del 100%, pero no veo todo el texto ni me caben las 
imágenes.
Saludos: Germán

-Mensaje original- 
From: Martin Etxauri
Sent: Monday, November 12, 2012 1:13 PM
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] web responsive

Aupa

Esto que te dice tamara te funcionará para que desaparezca el scroll
pero además tienes que quitarle el hegith:100%; porque si no no te hará 
scroll, imagino para que lo tienes puesto así que sustituyelo por 
min-height:100%;

saludos

El 12/11/2012, a las 13:06, Tamara Forza escribió:

 Hola,

 prueba quitar el overflow: auto; o cambiarlo a overflow: hidden; en el
 #container.

 Saludos,
 Tamara


 2012/11/12 marcos méndez filesi mmfil...@gmail.com

 ¿tienes algún otro min-width en las CSS?


 El 12 de noviembre de 2012 13:01, german vaquer
 germ...@telefonica.netescribió:

 Hola marcos!
 Lo he cambiado y sigue mal gracias.
 Saludos: Germán

 -Mensaje original-
 From: marcos méndez filesi
 Sent: Monday, November 12, 2012 12:45 PM
 To: Ovillo, la lista de CSS en castellano
 Subject: Re: [Ovillo] web responsive

 Prueba a quitar esto, por favor

 min-width: 460px;

 de #contenido

 bs++




 El 12 de noviembre de 2012 12:42, german vaquer
 germ...@telefonica.netescribió:

 Hola a todos!

 Estoy adaptando la web a dispositivos móviles y tablets, pero no
 consigo
 eliminar el scroll horizontal, sobre todo en lo que respecta a los
 dispositivos móviles, en cuanto a tablets no tengo tanto problema.

 He estado revisando las css de mi web, y la verdad, es que no sé donde
 esta el problema, seguramente será una chorrada, pero estoy tan espeso
 que
 no vería ni un elefante aunque lo tuviese delante.

 la web es: http://www.pruebasgerman.com/companyo/index.html

 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

 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
 http://lists.ovillo.org/mailman/listinfo/ovillo


___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo 

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] web responsive

2012-11-12 Por tema german vaquer
Hola!

Observando la web en mi smartphone veo que el problema esta en formato 
portrait,(320x480) en landscape( 480x320) si que veo casi toda la pantalla.

Saludos: Germán

-Mensaje original- 
From: marcos méndez filesi
Sent: Monday, November 12, 2012 3:48 PM
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] web responsive

perdón x el doble post, se me olvidaba algo importante

¡Y no especifiques el width ni el height en img src=
class=imagenes_elasticas


El 12 de noviembre de 2012 15:47, marcos méndez filesi
mmfil...@gmail.comescribió:

 Trato de explicarlo a vuelapluma.

 a) Con min-width o width defines el ancho (el mínimo en el primer caso).
 Si tiene, x ejemplo, 450px, y la resolución de la pantalla es de 320,
 entonces te saldrán las barras de scroll horizontales, ya que no cabe el
 contenido en el monitor. Por lo tanto, si acaso, el ancho en píxeles más
 grande que debes tener definido son 240 px, que es la resolución de un
 móvil vertical. (y lo mismo te pasa si hay una cajita más grande dentro de
 otra más chica)

 Todos los demás anchos deben estar definidos mediante porcentajes.

 b) Con overflow indicas qué pasa cuando el contenido rebasa la altura
 fijada.

 http://www.w3schools.com/cssref/pr_pos_overflow.asp

 Si está en modo hidden y el contenido supera la altura, lo esconderá.

 c) A las imágenes que van a ir dentro de tus cajitas responsive, es decir,
 que quieres que se ajusten al contenedor, ponles una clase donde les des 
 el
 100 del width

 .imagenes_elasticas {
 width:100% !important;
 }


 El 12 de noviembre de 2012 15:34, german vaquer 
 germ...@telefonica.netescribió:

 Hola!


 He hecho lo que habéis dicho tu y tamara, y efectivamente ya no tengo
 scroll, pero ahora veo que el contenido no me cabe, tengo el container  y
 el
 contenido con un ancho del 100%, pero no veo todo el texto ni me caben 
 las
 imágenes.
 Saludos: Germán

 -Mensaje original-
 From: Martin Etxauri
 Sent: Monday, November 12, 2012 1:13 PM
 To: Ovillo, la lista de CSS en castellano
 Subject: Re: [Ovillo] web responsive

 Aupa

 Esto que te dice tamara te funcionará para que desaparezca el scroll
 pero además tienes que quitarle el hegith:100%; porque si no no te hará
 scroll, imagino para que lo tienes puesto así que sustituyelo por
 min-height:100%;

 saludos

 El 12/11/2012, a las 13:06, Tamara Forza escribió:

  Hola,
 
  prueba quitar el overflow: auto; o cambiarlo a overflow: hidden; en el
  #container.
 
  Saludos,
  Tamara
 
 
  2012/11/12 marcos méndez filesi mmfil...@gmail.com
 
  ¿tienes algún otro min-width en las CSS?
 
 
  El 12 de noviembre de 2012 13:01, german vaquer
  germ...@telefonica.netescribió:
 
  Hola marcos!
  Lo he cambiado y sigue mal gracias.
  Saludos: Germán
 
  -Mensaje original-
  From: marcos méndez filesi
  Sent: Monday, November 12, 2012 12:45 PM
  To: Ovillo, la lista de CSS en castellano
  Subject: Re: [Ovillo] web responsive
 
  Prueba a quitar esto, por favor
 
  min-width: 460px;
 
  de #contenido
 
  bs++
 
 
 
 
  El 12 de noviembre de 2012 12:42, german vaquer
  germ...@telefonica.netescribió:
 
  Hola a todos!
 
  Estoy adaptando la web a dispositivos móviles y tablets, pero no
  consigo
  eliminar el scroll horizontal, sobre todo en lo que respecta a los
  dispositivos móviles, en cuanto a tablets no tengo tanto problema.
 
  He estado revisando las css de mi web, y la verdad, es que no sé
 donde
  esta el problema, seguramente será una chorrada, pero estoy tan
 espeso
  que
  no vería ni un elefante aunque lo tuviese delante.
 
  la web es: http://www.pruebasgerman.com/companyo/index.html
 
  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
 
  ___
  Lista de distribución Ovillo
  Para escribir a la lista

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