[SOLUCIONADO] No se redimensiona la web

[mblascog]

Buenas,
Estoy intentando hacer la web con diseño adaptable. La estructura que tengo es: una cabecera, un pie de página y en article, una barra lateral y el contenido de la opción seleccionada.

Cuando la web está al máximo bien, pero conforme reduzco el tamaño, a 1023píxeles, salta el contenido de la web por debajo de la barra lateral.

Todo el código es muy largo, he colgado el ejemplo aquí por si alguien puede echarle una ojeada.

Gracias

[pzin]

Es normal que salte, porque ya no queda espacio para que se quede todo en horizontal.

Lo que puedes hacer es darle un tamaño en porcentaje a las imágenes, por ejemplo width:100% o también usar media-queries para cambiar el diseño de esa parte si te viene mejor.

[mblascog]

Gracias pzin, pero todo lo tengo en porcentages.
Además, cuando el contenido salta a la parte inferior, conforme voy reduciendo el tamaño del navegador, también se va redimensionando el contenido.
Lo que no entiendo es porqué salta.
Y si, los media-queries lo usaré, pero cuando el ancho sea inferior a 900 píxeles.
Ahora lo que quiero es conseguir que el cliente apruebe la web a tamaño maximizado y luego ya iré por los media-queries.

Gracias

[pzin]

Tienes tres elementos que miden 24,5%, que son 73,5, luego cada uno de esos elementos tiene un margen derecho de 2%, que son 6, sumado a lo otro son 79,5%. Y luego tienes un elemento con un ancho mínimo de 200 píxeles. Que además tampoco está flotado. Es mucho lío…

¿No es fácil poner cuatro elementos que midan 25% y que hagan de estructura, y ya lo de adentro pones lo que quieras, por ejemplo div que le pones los márgenes y rellenos que quieras sin afectar a la estructura que es independiente de su contenido?



Y si necesitas más margen, simplemente aumentas el margen de los elementos interiores:

Código CSS:

div.cajas div {
  margin: 0 5px;
}
 

A:

Código CSS:

div.cajas div {
  margin: 0 20px;
}
 

Si te lías mucho con márgenes, porcentajes y demás, es más fácil trabajar así. Los cuatro elementos estructurales no se ven en ningún momento, están pegados unos a otros. No siempre tiene que servir el HTML para que se vea algo.

Pero ponerte a liarte con porcentajes, márgenes y píxeles es de entrada muy lioso.

Yo siempre digo que si pones medidas raras, tipo 24,5% en lugar de 25% o 105px en lugar de 100px, algo se puede mejorar.

[mblascog]

Gracias pzin, tienes razón en lo que comentas, pero tu me estás hablando del pie de página verdad? Donde hay 3 banners y unas imágenes. Esto está a medio hacer, perdona si me he explicado mal, pero no me referí a a esto.

Lo que me salta de posición cuando reduzco el tamaño es el formulario.

Gracias.

[pzin]

Ponle un ancho:

Código CSS:

div.formContacte {
  width: 73.4%;
}
 

[mblascog]

Uau!!! Aquí no se puede suponer nada. Si tienes dos columnas que ocupan el 100%. Y una de ellas hace el 25%, no puedes dar por sentado que la otra hace 75%.

Una pregunta. Cómo has aconseguido llegar a este nivel y ver las cosas con tanta facilidad?

Gracias por tu ayuda.

[pzin]

Creo que tu afirmación y tu pregunta se contestan con un simple aprendiendo.

Si supones cosas, ya de entrada es malo porque no hay ninguna base sólida. Pero es que además ya suponiendo esas cosas no caes en que eso pueda ser un error y por lo tanto no lo revisas, porque ya has asumido que eso está bien per se.

Así pues la cosa es aprender porqué las cosas funcionan como funcionan. Ayudando en el foro también se aprende mucho, un cliché que realmente es cierto.

Y ojo. Tienes dos elementos flotados, no son dos columnas, son elementos independientes. Meter la idea estructural de las tablas en CSS ya es un error de entrada, porque nada tiene que ver.

Lo de que funcione bien con el ancho, es porque los elementos flotados se computan como elementos de bloque pero el ancho es según su contenido, entonces para tener un buen control lo bueno es ponerle un ancho.

Hay otra forma de hacer que el segundo elemento ocupe automáticamente el resto, aunque si los dos son porcentajes, no tiene mucho sentido, pero supón que la barra lateral pueda tener un ancho fijo, entonces podrías hacer algo así:

Código CSS:

.barra_lateral {
  float: left;
  width: 200px;
}
 
.contenido_derecha {
  overflow: hidden;
}
 

Es importante no flotar .barra_contenido. Así tal cual, el contenido ocuparía prácticamente el 100% menos los 200px que ocupa la barra. Que con CSS moderno, podrías simplemente indicar esto usando la función calc():

Código CSS:

.barra_lateral {
  float: left;
  width: 200px;
}
 
.contenido_derecha {
  float: left;
  width: calc(100% - 200px);
}