Los Divs de mi Web se mueven

[d_yacobi]

Hola a todos,

Soy nueva en el foro y novata en el diseño de Webs.

Gracias a los tutoriales y foros que he encontrado en internet he conseguido hacer mi Web con Dreamweaver CS5 (en tiempos de crisis no he podido pagar a un profesional).

Estoy bastante contenta con el resultado, teniendo en cuenta que no tengo ni idea de esto, excepto por una cosa: los Divs se mueven cuando cambio el tamaño del navegador o cuando visualizo la página en una resolución distinta.

Me he leído todos los tutoriales y foros acerca del tema, pero encuentro opiniones contrapuestas (unos dicen que hay que usar positioning "relative", otros en "absolute", otros expresar los elementos en %, otros en px...).

En fin, ¿alguien puede mirar mi código y decirme dónde me he equivocado y cómo lo puedo arreglar?

La página es www.comforcasa.com

Muchiiiiisimas gracias de antemano.

[KoswiDigital]

Hola.

Realmente no veo el problema. En el css, al body le das un 95% de ancho. Esto quiere decir que si tu resolución es de 800 de ancho, el ancho de tu página será un 95% de 800. A mayor resolución, mayor ancho.

La capa que tienes a la derecha está flotada a ese lado, por lo que a cuanto más ancho, más se separará de la capa izquierda. Para evitar esto y utilizar un ancho fijo, utiliza píxeles en lugar de porcentajes.

Si cambias el css del body a:

Código CSS:

body {
    background-color: #FFFFFF;
    border: thin solid #CCCCCC;
    height: 100%;
    position: static;
    width: 1090px;  /* ancho mínimo para mantener el diseño tal cual lo tienes */
    margin: 0 auto; /* centramos el contenido para una visualización más cómoda */
}
 

verás siempre todo en su sitio, pero eso sí, quien tenga menos de 1090px de resolución en su monitor, verá un scrollbar horizontal muy feo. Puedes reducir espacio quitando un poco de padding de los lados. En todo caso, prueba a ver que te parece.


Espero que esto te oriente un poco más :) Un saludo.

[IsaBelM]

manteniendo los valores que usas, si usas las propiedades min-width, max-width y width en este bloque puedes controlar su ancho

[KoswiDigital]

manteniendo los valores que usas, si usas las propiedades min-width, max-width y width en este bloque puedes controlar su ancho

Eso es, aunque mientras esté flotado a la derecha, seguirá pegándose al lado derecho de la pantalla. Igual te conviene pegarlo a la capa de la izquierda con un margen entre ellas. Y el ancho podría ser en porcentaje. Ideas, ideas! :)

[d_yacobi]

Más vale tarde que nunca... gracias a todos, conseguí resolver el problema gracias a vuestros consejos.

Ahora tengo problemas con la galería de fotos, en concreto con jqgalscroll y seyxlightbox. He dejado un mensaje en el foro de javascript, si sabéis como solucionarlo os lo agradecería muchisimo.

Un saludo!