Problemas con mi web, al hacerla mas pequeña.

[KLAYMAN]

Hola y antes de nada, daros las gracias por leer este mensaje y desearos unas felices fiestas.

Vereis pensaba que mi web ya estaba terminada, cuando me he encontrado con un problema que no me había dado cuenta hasta ahora mismo y claro me "estropea" todo el diseño de la web.

Cuando empecé a hacerla no prestaba mucha atención a los detalles .CSS y ahora os cuento lo que me gustaría hacer y no se como solucionarlo.

Al abrir mi web que pensé en hacerla para resoluciones a partir de 1024x768, se ve perfectamente, todo en su sitio, pero cuando minimizo un poco la web y muevo la pantalla del navegador horizontalmente con el ratón para hacerla mas pequeña, todo se descuadra y cada div se va mas abajo.



Por lo que he visto a la mayoría de las webs no les ocurre eso: yahoo, microsoft, adobe, infojobs... casi todas, se mantienen con su diseño original y los divs no se mueven y permanecen en su sitio.

Os he subido una página sin imágenes y casi sin nada, para ver si me aclarais como solucionar este desastre.
http://www.saharaverde.org/contacto.html

[Aresillo]

He estado mirando la web y creo que se desplaza por que en el contenido, la parte de la izda tiene 45% de ancho y la dcha 50% a eso la añades un padding de un 1em y un 1.2em o algo así.... como son medidas relativas, me da que el margin te la juega...
Con poner al de la dcha 45%, ya no se desplaza hacia abajo...
Probado para 800x600

Un saludo!!

Aresillo!!

[KLAYMAN]

Aresillo, muchas gracias por tu ayuda y por tomarte la paciencia de mirar el .css y probarlo, pero el problema me sigue ocurriendo a pesar de tu solución.

Os pongo un video para que veais lo que trato de explicar por palabras, porque a lo mejor no os habeis dado cuenta de lo que ocurre:
http://www.saharaverde.org/pruebaweb.html


He tocado casi todo el código .css poniendo varios elementos con display: block y varias alternativas más, pero ninguna me han resultado satisfactorias. Supongo que al final tendré que rehacer la web y ver cuando y donde se produce el fallo.
No es un fallo excesivamente grave para la navegación, porque hay que probar ese fallo muy aposta para provocarlo, pero viendo que en casi ninguna web de internet ocurre, pues me gustaría retocarla para que quede bien.

Bueno, lo dicho, gracias por tu ayuda y perdona por las molestias que te haya podido causar. Felices fiestas.

[Aresillo]

Hola KLAYMAN, a mí al menos con lo que te he dicho conseguía que no pasara lo que comentas en el div de contacto....
Y lo he probado con 800x600 y 640x480...
Esto es lo que he modificado...(stylecontactenos.css (línea 118))

#contenedor-localizacion-derecho {
color:#000000;
float:left;
margin-left:1em;
width:45%;
}

Voy a mirar de lo que comentabas del inglés..

Aresillo!!

[ClubIce]

Bueno no deberias usar DIVs para organizar tu pagina mejor deberias usar tablas ya que con estas no cambian al redicir o aumnentar el tamaño de la pagina.

Por ejemplo mi web esta hecha con CSS: http://clubice.site50.net pero su diseño se mantiene sin inportar el tamaño de la pagina es porque toda ella esta compuesta por varias tablas manteniendo fijo su diseño.

[kaninox]

Eso Clubice es por que tus tablas estan seguramente con numeros absolutos y no con porcentajes como lo tiene el amigo aqui...

[jomaruro]

Hola Klayman:

Con respecto a la caja de inglés, revisa el margin-right de #cabecera .logo en stylecontactenos.css.

Seguiré con el resto.

Un saludo.

[KLAYMAN]

De verdad que no esperaba que me ayudarais tanto como lo estais haciendo. No se como agradeceroslo, probaré de nuevo el código y los consejos que me habeis dado y os indicaré si lo voy solucionando o no.

Reconozco que la web la hice con prisas y no me preocupé de mirar este tipo de cosas que al final te das cuenta

ClubIce, con tu web no me pasa lo que me ocurre a mi

De todas formas, también es que mi web está quizás mal organizada y tiene un monton de divs que a lo mejor no serían ni necesarios. Por eso comentaba que si no lo logro solucionar y vosotros tampoco veis nada extraño, la volveré a rehacer paso por paso.

Muchas gracias a todos, os mantendré informados. Os debo una.

[Mikmoro]

Bien, esto se debe a una pequeña confusión con el diseño líquido o estático. Estás dando anchura en porcentaje a algunas cajas como para que sea un diseño líquido y se adapten a la resolución (#contenedor {width:90%; ...}), pero resulta que ahí mismo estás indicando un ancho máximo (max-width:900px;), que limita completamente la adptación, quedando prácticamente una web de ancho fijo, pero con el problema de no tener un tamaño mínimo, con lo que al reducir toda la página colapsa.

Si en realidad la estructura de tu página no está diseñada como para que se pueda mantener a tamaños menores, mi recomendación que es te olvides de ese 90% y asignes directamente el tamaño de 900px al contenedor principal:

#contenedor {margin:0 auto;
width:900px;
}

Con esto evitas ese tipo de colapsos, y en realidad la diferencia entre el 90% y los 900px a tamaños menores te da problemas, y a tamaños mayores es escasísima.

[SPAWN3000]

Iniciado por ClubIce

Bueno no deberias usar DIVs para organizar tu pagina mejor deberias usar tablas ya que con estas no cambian al redicir o aumnentar el tamaño de la pagina.

Por ejemplo mi web esta hecha con CSS: http://clubice.site50.net pero su diseño se mantiene sin inportar el tamaño de la pagina es porque toda ella esta compuesta por varias tablas manteniendo fijo su diseño.

Para mi esta es una mala eleccion...Sin intencion de ofender a nadie, yo continuaria trabajando con div, y buscaria algo de modelos liquidos css, o maquetacion liquida... en Google. Aunque realmente hoy en dia muy pocos monitores trabajan a 800x600, que es la otra resolucion que esta por debajo de la de 1024x768px, podrias considerar la posibilidad de darle a todo dimensiones fijas(si es que tienes poco tiempo para dedicrle a estudiar los disenos liquidos).

[KLAYMAN]

Mikmoro, eres un crack... era simplemente eso y mira que ayer estuve peleandome con practicamente todo el código y casi lo único que no toqué fué eso que tu has comentado. Increible que hayas descubierto que con sólo cambiar eso ya se solucionaba.

Creo que me voy a olvidar de las resoluciones de 800x600, aunque a unas malas podría detectar la resolución antes de entrar a la web... pero me parece que de momento voy a pasar de eso.

Pues nada, descubierto el problema sólo me queda agradeceros vuestra atención y ganas de ayudarme. Sois geniales, un saludo a todos y que os vaya todo muy bien este próximo año que ya mismo entra.

Miles de gracias cracks.

[Aresillo]

Un placer y gracias mik por lo de siempre!

Aresillo!!

[Mikmoro]

De nada, es un placer.

Y ya sabes Ares, que si no me animas con soluciones que "casi" están, igual no me paro a mirar. Para mi que probando y probando es como las cosas van encajando. Como decías, llevas 4 días y estás ahí ya.

[Aresillo]

Gracias Mik!

Aresillo!!