Re: [Ovillo] web responsive
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
Re: [Ovillo] web responsive
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
El 12 de noviembre de 2012 15:47, marcos méndez filesi
escribió:
> 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
> escribió:
>
>> 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
>> >
>> >> ¿tienes algún otro min-width en las CSS?
>> >>
>> >>
>> >> El 12 de noviembre de 2012 13:01, german vaquer
>> >> escribió:
>> >>
>> >>> 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
>> >>> escribió:
>> >>>
>> >>>> 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
>> >>>> __
Re: [Ovillo] web responsive
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 > >> ¿tienes algún otro min-width en las CSS? >> >> >> El 12 de noviembre de 2012 13:01, german vaquer >> escribió: >> >>> 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 >>> escribió: >>> >>>> 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
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 escribió: > 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
[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
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
escribió:
> 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
>
>
>
> mejor así
>
>
>
> *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
> 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
> >
>
>
>
> --
> 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.ovil
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
mejor así
*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
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
>
--
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
[Ovillo] duda responsive design
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
