Foros del Web » Creando para Internet » CSS »

Diseño líquido no funciona como debería

Estas en el tema de Diseño líquido no funciona como debería en el foro de CSS en Foros del Web. Buenos dias compañeros, una amiga mía tiene una web que se quedó a medias y la continuo ahora, en un principio se quería que tuviera ...
  #1 (permalink)  
Antiguo 25/11/2014, 02:33
Avatar de Benderzuelo  
Fecha de Ingreso: mayo-2013
Ubicación: España
Mensajes: 223
Antigüedad: 10 años, 9 meses
Puntos: 5
Información Diseño líquido no funciona como debería

Buenos dias compañeros,

una amiga mía tiene una web que se quedó a medias y la continuo ahora, en un principio se quería que tuviera un diseño liquido y "más o menos" así está.

El problema es que desde el index tiene 2 páginas que tienen un efecto que pasan hacia abajo y cuatro que se desplazan a la izquierda o derecha, si desde el index hacéis la ventana pequeña en el ancho, veréis como al quitarle ese ancho aparecen las 2 páginas que van hacia abajo, y si estando en cualquiera de las paginas que se desplazan verticalmente hacemos la ventana pequeña en el ancho veréis como las páginas contiguas empujan a la que estamos viendo haciéndola desaparecer.

Por favor, me podéis echar un cable?, si la puedo arreglar me ahorraré el tiempo de hacerla de nuevo.

La página en cuestión es http://www.ikonnos.es

Otra cosa que ocurre, solo en dispositivos móviles de apple es que te permite arrastrar y moverte por todas las paginas a tu antojo sin usar el menú, :(

Espero vuestra ayuda.

Gracias por adelantado.
  #2 (permalink)  
Antiguo 25/11/2014, 15:26
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Diseño líquido no funciona como debería

Hola amigo, no entiendo exactamente cual es tu problema
de lo que me doy cuenta es que tienes un tipo de slider que funciona de manera horizontal y vertical,
de manera vertical tienes solo 3 elementos.
de manera horizontal, solo el 1er elemento tiene 3 elementos (con el son 4)
con respecto a la vista reducida en el navegador de la pc para simular la pantalla movil, es normal que los elementos verticales se desplacen a mano izquierda y no se vean, ya que hay un elemento que tiene la propiedad
Código:
overflow:hidden;
lo que hace esta propiedad es que tu tienes un elemento de un ancho y un alto definido, todo lo que este excediendo de ese ancho o alto, no se vera. Es como si fuera un escenario de una obra de teatro, no puedes ver nada que se encuentre a mano derecha, izquierda, en lo alto o debajo de el, ya que a la vista no queda oculto, pero, eso no quiere decir que no haya algo en esos lugares.

ahora bien, si lo que no te gusta es que se vea el 2do elemento en vertical cuando se esta mostrando el primer elemento y no han dado clic en la flecha inferior, te dier que ahi no puedes hacer nada amigo

el chiste del diseño liquido es que el ancho de nuestra web se adapte al ancho de un dispositivo movil, el alto tiene que ser dinámico, eso le permite al usuario deslizar con el dedo el contenido de la web para poder disfrutar con la mayor comodidad sin forzar la vista y con movimientos naturales el contenido de nuestro sitio, cuando se logra eso, decimos que el usuario esta gozando de la mejor experiencia que puede tener al navegar en nuestro sitio desde un dispositivo movil.

Lo que sucede con el slider de tu web en un pc, laptop, etc. es que el alto de cada elemento abarca todo, como la pantalla es amplia, podemos ver bien todos los elementos que contiene cada elemento de manera correcta, pero ¿que sucede si muestras esa misma pantalla en un dispositivo de 320x240? (claro seria una vista en escala), al pobre usuario lo veras usando una lupa(ya sea la del navegador o una fisica) para poder leer el texto de tu web y darle "click" (o tocar) al elemento del menu que desee sin tocar 2 o mas por accidente, pobre usuario, sufriría tanto que no creo que quiera visitar el sitio desde el movil nuevamente.

ahora bien, por lo que veo, la parte liquida del los elementos horizontales tampoco estan funcionando como deberian ser, ya que literalmente se come el contenido por que excede el alto definido de ese elemento por el overflow, y algunas cajas que tienes, tienen un ancho que no es practico para poderlo apreciar (proyectos)

no lo tomes a mal, pero te aconsejo que lo vuelvas a hacer

te recomiendo que busques algun tutorial como Diseño responsive en 3 pasos, para que te des una idea de como deberia funcionar

tambien te dejo este "esqueleto" que hice hace bastante tiempo sobre la forma como interactúan los elementos al jugar con el ancho del navegador o al ser vistos desde un celular, no tiene nada de contenido, solo la pura estructura, pero te puede servir, para que te des una idea de como funciona el diseño liquido ;)
http://juangemelonet.zz.mu/Esqueleto/

en ese ejemplo, hay un div que representa un banner horizontal, y decidi no mostrarlo para dispositivos con una pantalla pequeña, ya que solo les estorbaría y no podrian tocarlo sin querer, generando una mala experiencia como usuarios.

espero que te sea de ayuda mi comentario amigo, cualquier cosa, comenta
  #3 (permalink)  
Antiguo 26/11/2014, 07:59
Avatar de Benderzuelo  
Fecha de Ingreso: mayo-2013
Ubicación: España
Mensajes: 223
Antigüedad: 10 años, 9 meses
Puntos: 5
Respuesta: Diseño líquido no funciona como debería

Muchas gracias por el comentario, la cuestión es que yo si he visto alguna web que hace lo que yo intentaba hacer :( pero bueno lo dejará solo en una dirección y ya está. Gracias

Etiquetas: html5, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:15.