Foros del Web » Creando para Internet » CSS »

Dimensiones de Capas e Imágenes de fondo.

Estas en el tema de Dimensiones de Capas e Imágenes de fondo. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/02/2011, 06:05
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Dimensiones de Capas e Imágenes de fondo.

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.
  #2 (permalink)  
Antiguo 01/02/2011, 11:29
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Dimensiones de Capas e Imágenes de fondo.

Por favor, tengo algo de prisa. ¡Ayudadme!
  #3 (permalink)  
Antiguo 02/02/2011, 14:24
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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

Gracias y saludos.
  #4 (permalink)  
Antiguo 02/02/2011, 17:23
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.

  #5 (permalink)  
Antiguo 02/02/2011, 17:48
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.
  #6 (permalink)  
Antiguo 02/02/2011, 19:23
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.
  #7 (permalink)  
Antiguo 02/02/2011, 19:53
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.
__________________
Diseñador y Desarrollador web :)
  #8 (permalink)  
Antiguo 03/02/2011, 04:53
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.

Última edición por ayukkonen; 03/02/2011 a las 05:18
  #9 (permalink)  
Antiguo 03/02/2011, 12:53
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.
  #10 (permalink)  
Antiguo 03/02/2011, 14:14
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.

Última edición por ayukkonen; 03/02/2011 a las 14:46
  #11 (permalink)  
Antiguo 03/02/2011, 15:07
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.
  #12 (permalink)  
Antiguo 03/02/2011, 15:32
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.
  #13 (permalink)  
Antiguo 03/02/2011, 15:47
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.
  #14 (permalink)  
Antiguo 03/02/2011, 16:06
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: Dimensiones de Capas e Imágenes de fondo.

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.

Etiquetas: capas, dimensiones, fondo
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 07:20.