Dimensiones de Capas e Imágenes de fondo.

[ayukkonen]

Hola a todos,

Tengo un problema, os lo comento por si alguien puede ayudarme.

Estoy realizando la estructura de la página web con capas. Las dimensiones de éstas capas están dadas en porcentajes "%".

Éstas capas tienen un imagen de fondo que se repite a lo ancho de la capa.

Cuando pulso "Ctrl +", las capas se mantienen en su posición, pero la imagen de fondo se agranda, igual ocurre si pulso "Ctrl -", y también ocurre si reduzco la ventana del explorador dónde visualizo la web.

¿Alguien puede ayudarme? ¿Cuál puede ser la solución?

Muchas gracias y un saludo.

[ayukkonen]

Por favor, tengo algo de prisa. ¡Ayudadme!

[ayukkonen]

No me creo que nadie pueda ayudarme... Por favor, lo necesito más que nunca...

Gracias y saludos.

[jomaruro]

Hola:

Tienes que pensar que según plantees tu duda así recibirás la ayuda. Y sin ver el código es un poco complicado entender que pasa.

Saludos.

[ayukkonen]

jomaruro,

Cierto es, disculpad.

Os paso la dirección: http://www.telefutbol.es/dfsi_v3

Aquí os dejo el enlace a la hoja de estilos: http://pastebin.com/VbhzJmAj

Y aquí os dejo la index: http://pastebin.com/uhP17tKB

Veréis, cuando mi web se visualiza en otras resoluciones y/o equipos, las capas mantienen su dimensión, pero la imagen que hay de fondo (background-image), se empequeñece o se agranda...

¿Cómo puedo conseguir que esa imagen vaya a corde con el tamaño de la capa?

Gracias y un saludo.

[sanxuan]

Sería interesante saber qué navegador estás usando.
La página se ve medio decente en IE8 aunque desaparece la imagen de fondo del pie y las proporciones de alto no se respetan.
En Chrome y en Firefox (últimas versiones) las capas se descolocan al redimensionar verticalmente la ventana y se montan unas por encima de otras. Puedes considerar la utilización de propiedades min-height y min-width que te aseguren un tamaño mínimo. El cambiar el alto de la capa proporcionalmente no quiere decir que lo vaya a hacer su contenido.
De todas formas hay algún error en el CSS, tienes definido un padding negativo y utilizas la propiedad opacity que no te funcionará en todos los navegadores, IE no la tendrá en cuenta.
Puedes encontrar algunos temas sobre transparencia en el foro que te explican cómo solucionar esta carencia.
Respecto a cambiar de tamaño la imagen de fondo de una capa, en CSS 2.1 no está previsto.
Para conseguir algo así habría que colocar la imagen en la capa y darle ancho y alto 100%. El contenido tendrá que ir en otra capa dentro de esta con fondo transparente y con posición absoluta para que aparezca por encima de la imagen.
Como puedes ver no es algo sencillo y tendrás que hacer algunas pruebas para ver si te convence.
Aprecio otra incongruencia en el CSS. Declaras algunas capas como flotantes pero les das un ancho 100% con lo que no pueden flotar de ninguna manera.
Personalmente, prescindiría de dar el alto de las capas en porcentaje, quizás podrías usarlo en los contenidos si añades un scroll, pero dando un alto mínimo.
Creo que deberías reemplazar las etiquetas <br/> que usas por ejemplo en el pie por márgenes CSS. Si alguna vez decides modificar la maquetación, no podrás cambiar ese espaciado en la hoja de estilos y además si no indicas un alto de línea, será el navegador quien decida el tamaño de ese espacio, pudiendo dar resultados diferentes de un navegador a otro.
Lo del Ctrl+ y Ctrl- en IE por lo menos aumenta y disminuye el zoom de la página, por lo que es normal que cambie el tamaño de las imágenes. Debería cambiar también el del texto.

Me he permitido opinar sobre algunas cosas de tu página sobre las que no preguntabas, no lo hago por criticar, creo que esa página puede elaborarse un poco más y mi única intención es la de mejorarla en lo posible. Espero que alguna idea pueda serte útil.

[Kurozaki]

Bueno, io le he hecho zoom a +4 y creo que no hay mucha diferencia en el diseño, como para preocuparse.

Ademas, si no quereis que utilizen el zoom, podeis aplicar algunos estilos suficientes para visualizarlos perfectamente, sin necesidad del zoom.
Además no creo que sea algo de que preocuparse mucho.

y por ultimo, creo que la respuesta, ya te la ha dado saxuan, usa min-width.

[ayukkonen]

Muchas gracias a ambos.

No me lo tomo como críticas... Bueno sí, como críticas constructivas

No me molesta, al revés, me has orientado y creo que muy bien. Probaré eso de poner la imagen en la capa, y luego situar otra encima.

También voy a probar esa directiva que comentas "min-widht". No la había visto nunca.

Manos a la obra. Muchas gracias, y en breve os comento.

Saludos.

AVANCE

De momento he limpiado el código CSS (he retirado los float, los márgenes negativos, etc.).

PROBLEMAS

He puesto las imágenes de fondo en las capas. Al intentar meter una capa dentro de otra... Me la escupe hacia abajo, porque la imagen ocupa la totalidad de la capa. ¿Cómo puedo situarla encima?

Os dejo la dirección para que veáis cómo queda ahora: http://www.telefutbol.es/dfsi_v3

Gracias y un saludo.

[sanxuan]

Como te dije antes: El contenido tendrá que ir en otra capa dentro de esta con fondo transparente y con posición absoluta para que aparezca por encima de la imagen.
<style>
#contenedor{position:relative} /*la posición puede ser cualquiera menos static */
#LaImagenDeFondo{width:100%; height:100%}
#contenido{position:absolute; top:0;left:0;}
</style>
<div id="contenedor">
<img id="LaImagenDeFondo" src="img.jpg" />
<div id="contenido"> Mi Contenido </div>
</div>

Puede necesitar ajustes para adaptarlo a tu caso, pero la idea general es esa. Espero que sirva.

[ayukkonen]

Muchas gracias por tus sugerencias. Las tengo que probar.

De momento he conseguido lo que quería, casi totalmente...

Antes estaba usando para las medidas los porcentajes (%), ahora lo he hecho con "em".

Todo me está gustando mucho, os dejo el enlace para que miréis la web:

http://www.telefutbol.es/dfsi_v_3gg

Ahora, lo que me ocurre es lo siguiente:

Cuando se abre la web por defecto, dependiendo de la resolución queda o no adaptada al total de la pantalla...

¿Cómo puedo conseguir que siempre esté ajustada al total de la pantalla?

Gracias nuevamente, y un saludo.

[sanxuan]

Si lo que que quieres es que tu página ocupe todo el alto de la ventana prueba a buscar "pie siempre abajo" en el cuadro de búsqueda de éste foro.
Si lo que quieres es que las bandas con imágenes de fondo lleguen hasta los extremos, quítales el ancho fijo. Puedes centrar el contenido de cada banda insertándolo en otro div dentro del anterior, dándole el ancho fijo que antes tenía la capa con fondo de imagen y usando margin:0 auto.
Espero que me entiendas a pesar de lo mal que me he explicado.

[ayukkonen]

Yo no sé si te has explicado bien o mal. Yo te he entendido perfectamente.

Muchas gracias, he solucionado ya casi todo. Lo de que se prolonguen las imágenes hasta toda la pantalla...

Muchísimas gracias. Ahora, mi problema es que el contenido no se me centra en la capa, se me queda a la izquierda.

Probé eso de "margin: 0 auto;" pero no me funciona.

Muchísimas gracias, de verdad.

Un saludo.

[sanxuan]

Sabía que no me había explicado. Lo que te dije no puede fallar.
Supón que has eliminado el ancho de la capa contenedora. Vamos a hacer la prueba con el pie.
A #CapaPie le quitas el ancho para que ocupe toda la ventana. El contenido pasa a la izquierda.
Como dentro de div#CapaPie ya tienes otro div con la clase modulos que no usas, puedes aprovecharlo para centrar el contenido. Para otros contenedores tendrás que añadir el div y darle la misma clase.
Defines el CSS :
div.modulos{
width: 65em; /* La medida que tuvieses en la contenedora */
margin: 0 auto;
}
Con esto ya debería estar. Todos los div de clase modulos (o como quieras llamar a la clase) quedan centrados dentro de una capa que tiene imagen de fondo ocupando toda la pantalla.

[ayukkonen]

sanxuan, que crack estás hecho.

Ya lo he conseguido. Claro que lo tengo en local, aún no lo he subido al servidor. Es por eso que no saldrá actualizado.

Muchísimas gracias por tu ayuda. Me has sido de gran ayuda, de verdad.

He aprendido cositas nuevas.

• Ocupar todo el ancho de la pantalla.
• Centrar el contenido de una capa, con otra capa interna.

Un saludo a todos, y en especial a tí sanxuan. Te he dado karma, porque te lo mereces sin duda.