Re: [Ovillo] duda responsive design
Muy buenos tips, gracias!!! El 24 de octubre de 2012 15:24, Hernán Beati escribió: > 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
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
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
Hola Marcos!
a) Tienes razón miraré porque me sale el scroll.
b) por eso las imágenes salen un poco achatadas, no? por el alto de la
columna 1, lo miro.
c) Tienes razón el botón sale muy desordenado en consonacia con
el texto y las imágenes, estudiaré las 2 opciones modificar el
botón o poner el enlace en la imagen, a ver que da mejor resultado.
Otra cosa, en la página de inicio
http://www.pruebasgerman.com/companyo/index.html
en el slider de las imágenes, para hacerlo responsive, hace falta alguna
cosa má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 imágenes.
Y gracias por lo de la web chula, la verdad es que el cliente ya quedó
muy contento con la versión para ordenador y por eso me dijo que si la
podía adaptar para otros dispositivos.
Un abrazo: Germán
PD: muy chulo tu blog y útil. Mensaje originalDe:
mmfilesi@gmail.comFecha: 25/10/2012 0:50Para: "Ovillo, la lista de CSS en
castellano"Asunto: Re: [Ovillo] duda responsive
designHola 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 nodebería salir nunca en un diseño responsive.
¿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. Quedará más chulo.c) El botonako de más
información pesa mucho (es muy llamativo) y comoqueda desparejo da
cierta sensación de desorden. Se podrían alinear abajohaciendo un
pequeño jaleo, pero quizás te quede más chulo si:1) La
propia imagen es un enlace + el titulo es un enlace2) 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 manchamucho 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 efctochulo x CSS, que no cuesta mucho, como bajarles un poco la
opacidad, que dasensació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
mejoralineado 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 escomo la tienen, pero
verás que se te distorsionan un poco cuando se ponenal cien por cien en
resoluciones canis. A mí eso no me molesta, pero igualpuedes hacer otra
historia y es meterlas dentro de un div, que es dondepones 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
escribió:> 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 e
Re: [Ovillo] duda responsive design
Hola Germán,
hay algo raruno, pero no consigo identificar qué es.
a) Cuando pones el navegador a 480 o - te sale el scroll horizontal, que no
debería salir nunca en un diseño responsive. ¿Hay algo que no encuentro que
tenga min-width:480...?
+ cosinas
b) Ya que cambias el ancho de cada columna1 en resoluciones menores, puedes
cambiar tb el alto. Quedará más chulo.
c) El botonako de más información pesa mucho (es muy llamativo) y como
queda desparejo da cierta sensación de desorden. Se podrían alinear abajo
haciendo un pequeño jaleo, pero quizás te quede más chulo si:
1) La propia imagen es un enlace + el titulo es un enlace
2) y ya al final del texto solo añades este enlace (seguido) + información.
De esa manera no incordiará que quede desparejo, ya que el texto mancha
mucho menos que el botón con fondo de colirinchis. No sé si me explico.
3) SI conviertes las imágenes en enlaces, les podrías añadir algún efcto
chulo x CSS, que no cuesta mucho, como bajarles un poco la opacidad, que da
sensación de brillo. Y ya mejor aún si lo haces con alguna transición (
http://www.mmfilesi.com/blog/efectos-especiales-con-css3-la-propiedad-transition/
)
4) Un poco de margen al texto por los lados no le vendría mal (y mejor
alineado x bandera a la izda).
5) Hay dos formas de tratar las imágenes en responsive cuando se alargan
(digo, así con CSS, sin meter PHP ni cosas complejas de por medio). Una es
como la tienen, pero verás que se te distorsionan un poco cuando se ponen
al cien por cien en resoluciones canis. A mí eso no me molesta, pero igual
puedes hacer otra historia y es meterlas dentro de un div, que es donde
pones el overflow:hidden, y así lo que pasa es que se muestra un fragmento,
pero sin distorsionarse.
En cualquier caso, te está quedando una página CHULÍSIMA.
*Abrazos++*
El 25 de octubre de 2012 00:14, german vaquer escribió:
> 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;
> > }
> >
>
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
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
> 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 s
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.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Marcos Méndez Filesi
http://www.mmfilesi.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] duda responsive design
Hola!
Marcos, he aplicado lo que me dijistes en los 2 correos, tanto en la clase
columna1 y la clase imagen columna 1, y ahora ya se ve bien a resoluciones
mayores de 1200px, pero si reduzco la pantalla a 800X600, se me vuelven a
descolocar la disposición de las imágenes y su contenido.
http://www.pruebasgerman.com/companyo/entorn.html
Que tengo que hacer mediaqueries específicos para cada resolución para que
me quede todo ok?.
Saludos i gracias a todos por vuestra ayuda.
Germán Vaquer
-Mensaje original-
From: marcos méndez filesi
Sent: Wednesday, October 24, 2012 12:37 AM
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] duda responsive design
+ cosas.
*1)* Para prevenir que la imagen te escojone las cápsula (Empedrats...),
como te ocurre con la segunda de la segunda fila, conviene que especifiques
una altura máxima a las imágenes. Para eso puedes añadir una clase a las
imágenes
.img_columna1 {
width:100% !important;
max-height: 10em;
overflow:hidden;
margin:1em;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
*2)* En vez de
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
Re: [Ovillo] duda responsive design
Sí, es una buena solución. Había un problema pequeño de todas maneras con el inline-block que no recuerdo ahora muy bien cuál era, pero estaba relacionado con los márgenes que dejaba http://stackoverflow.com/questions/4716151/css-removing-horizontal-space-in-list-menu-using-display-inline-property Y por eso prefiero floats indicando la altura, pero vamos, que es una buena solución tb. Abrazos++ El 24 de octubre de 2012 10:21, Martin Etxauri 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
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 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: > > > > 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: > > 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: > > > Saluldos, > Tamara > > 2012/10/24 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 > >escribió: > > > > > Hola Marcos, > > > > > > una pregunta, porque utilizas este metodo? > > > > > > *2)* En vez de > > > > > > > > > > > > > > > > mejor así > > > > > > > > > > > > > > > > > > > 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
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: 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: 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: Saluldos, Tamara 2012/10/24 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 >escribió: > > > Hola Marcos, > > > > una pregunta, porque utilizas este metodo? > > > > *2)* En vez de > > > > > > > > > > > > mejor así > > > > > > > > > > > > > > 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
Aupa Para evitar este problema yo suelo usar display:inline-block en vez de float, y si les pones a los elementos vertical-align:top te quedan todos alineados arriba, y no sucede esto que pasa con los floats que se te meten en los huecos y se desarma todo. Si quieres utilizar floats tendrás que poner, como han comentado, igual altura a todos los elementos. Otra opción, si quieres que tengan todos la misma altura teniendo cada uno contenido de diferentes dimensiones y tienes claro que quieres que siempre haya tres elementos por fila, es utilizar un sistema de tablas generadas por css, esto es, a los elementos les pones display:table-cell y tienes que poner una div que recoja cada fila con display:table; de esta manera sea el contenido que sea todos quedarán de la misma altura... pero creo que esto no es lo que pedías :) saludos El 23/10/2012, a las 23:56, german vaquer escribió: > Hola buenas! > > Estoy reconvirtiendo una web ya realizada en una web con diseño responsivo > para visualizar en cualquier dispositivo. El problema que tengo es en la > siguiente página de dicha web: > > http://www.pruebasgerman.com/companyo/entorn.html > > Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me queden > en la misma posición que las 3 primeras y las 3 de la parte central, el resto > de imágenes se me salen de madre y se me descolocan y no sé el porqué, puesto > que el código css es el mismo para todas las imágenes. Alguna sugerencia?, he > repasado el código por si hubiese algo que me faltase, pero la verdad es que > no he visto nada raro. y eso que le he dado bastantes vueltas. > > Gracias de antemano: saludos > > Germán Vaquer > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] duda responsive design
Hola 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 escribió: > Hola Marcos, > > una pregunta, porque utilizas este metodo? > > *2)* En vez de > > > > > > > > mejor así > > > > > > > > > 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
Hola Marcos, una pregunta, porque utilizas este metodo? *2)* En vez de > > > > mejor así > > > > 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
Ok marcos, ya probaré lo que me has comentado y te diré si ya me
funciona, muchas gracias y un saludo:
Germán vaquer Mensaje originalDe: mmfilesi@gmail.comFecha:
24/10/2012 0:37Para: "Ovillo, la lista de CSS en
castellano"Asunto: 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
especifiquesuna altura máxima a las imágenes. Para eso puedes
añadir una clase a lasimá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 demejor
así*3)* Como estás con cajitas
flotantes, te conviene que todas las columnasestén dentro de un div que
las contenga y en ese es importante que añadasoverflow: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 hasempezado. Te dejo un
enlace a una guí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
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
Filesihttp://www.mmfilesi.com/___Lista
de distribución OvilloPara escribir a la lista, envia un correo a
Ovillo@lists.ovillo.orgPuedes 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
+ 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
Re: [Ovillo] duda responsive design
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 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
Re: [Ovillo] duda responsive design
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 escribió:
> > 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 >escribió:
> >
> > Hola buenas!
> >>
> >> Estoy reconvirtiendo una web ya realizada en una web con diseño
> >> responsivo para visualizar en cualquier dispositivo. El problema que
> tengo
> >> es en la siguiente página de dicha web:
> >>
> >> http://www.pruebasgerman.com/companyo/entorn.html
> >>
> >> Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me
> >> queden en la misma posición que las 3 primeras y las 3 de la parte
> central,
> >> el resto de imágenes se me salen de madre y se me descolocan y no sé el
> >> porqué, puesto que el código css es el mismo para todas las imágenes.
> >> Alguna sugerencia?, he repasado el código por si hubiese algo que me
> >> faltase, pero la verdad es que no he visto nada raro. y eso que le he
> dado
> >> bastantes vueltas.
> >>
> >> Gracias de antemano: saludos
> >>
> >> Germán Vaquer
> >> ___
> >> Lista de distribución Ovillo
> >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> >> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> >> http://lists.ovillo.org/mailman/listinfo/ovillo
> >>
> >
> >
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
--
Marcos Méndez Filesi
http://www.mmfilesi.com/
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] duda responsive design
> Hola, > 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 > escribió: > > Hola buenas! >> >> Estoy reconvirtiendo una web ya realizada en una web con diseño >> responsivo para visualizar en cualquier dispositivo. El problema que tengo >> es en la siguiente página de dicha web: >> >> http://www.pruebasgerman.com/companyo/entorn.html >> >> Aquí tengo 9 imágenes con su respectivo texto, y quiero que todas me >> queden en la misma posición que las 3 primeras y las 3 de la parte central, >> el resto de imágenes se me salen de madre y se me descolocan y no sé el >> porqué, puesto que el código css es el mismo para todas las imágenes. >> Alguna sugerencia?, he repasado el código por si hubiese algo que me >> faltase, pero la verdad es que no he visto nada raro. y eso que le he dado >> bastantes vueltas. >> >> Gracias de antemano: saludos >> >> Germán Vaquer >> ___ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> > > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] duda responsive design
Hola, 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 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
