Comunidad de diseño web y desarrollo en internet online

imagen de fondo con porcentaje

Citar            
MensajeEscrito el 06 Sep 2009 05:01 pm
Hola a todos;

En primer lugar saludos y espero explicarme veréis.

Veréis, estoy haciendo una web en la cual tengo, una cabecera con el menu, debajo irá el cuerpo de la propia página y finalmente el pie.

La cabecera y el pie ya están finiquitados, pero el cuerpo me esta dando algún problema que otro.

El caso es que tengo un div contenedor, de todo el cuerpo, y dentro de éste voy a incluir otro div, que va a ser una especie de columna de color rojo, sobre la cual irá texto.

Como fondo de éste último div tengo una imagen de tamaño 1x1, que quiero que se repita a lo largo y ancho de todo el div.

El problema que tengo es que si al propio div le doy valores de altura y anchura en pixeles, la imagen se repite perfectamente, pero si le doy porcentajes, que es lo que necesito, no se ve.

La url de la web es www.ingenniacomunicacion.com/nobilna/index.html
La url del css es www.ingenniacomuniacion.com/nobilna/style.css

Espero haberme aclarado, en cualquier caso muchas gracias y un saludo;

Marcos Nieto

Por mnieto

16 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 06:10 pm
que div? que imagen?.. 1px X 1px???? por que no usas un color solido envez de una imagen?

bueno ignorando lo anterior (suponiendo que tu imagen era 1px X 83px )podrias darle "el fondo" que te limita al "body" y listo...

Por alexk

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 06:17 pm

Por pitufo

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Sep 2009 06:18 pm
Hola Alexk;

En primer lugar gracias por contestar.

Respecto a lo que dices, el div que contiene la columna roja es el back-left, que a su ve esta dentro del div contenido.

El fondo efectivamente es una imagen de 1x1, aunque tienes razón que mejor utilizar el color de fondo, de hecho lo cacabo de cambiar.

El caso es que utilizando el color de fondo sigo teniendo el mismo problema. y no entiendo muy bien a lo que te refieres cuando me comentas lo del "fondo" que limita al body.

Si me lo podrías aclarar te lo agradecería.

Un saludo y gracias;

Marcos Nieto

Por mnieto

16 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 06:38 pm
Hola.

He probado a cambiar el color de fondo y no hay ningún problema.



Bye

Por pitufo

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Sep 2009 06:42 pm
Perdona pitufo;

Yo he puesto el back_left, con color de fondo que se repita en lugar de imagen, y le he dado el alto y el ancho en % y no se me muestra. Me puedes explicar cómo lo has hecho por favor?

Mil gracias;

Por mnieto

16 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 06:58 pm

Código :

#back_left   {
   position:relative;
   top:0px;
   left:0px;
   background: black;
   width:17%;
   height:300px;
}




Saludos
Bye

Por pitufo

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Sep 2009 07:02 pm
ya me perdi mas... trata de poner explicar uno por uno el problema... o si ya se soluciono nose

Por alexk

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 07:03 pm
Gracias pitufo;

Efectivamente así sí que funciona, ya pongas color de fondo o utilices una imagen.

El problema viene cuando ese height lo pones en %, que es lo que necesito, para que se adapte a cualquier resolución de pantalla.

Un saludo y muchas gracias por la ayuda;

Marcos Nieto

Por mnieto

16 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 07:33 pm
Hola.

Prueba con esto:




@charset "utf-8";
/* CSS Document */

body > #wrap {height: 100%; min-height: 100%;}

#main {padding-bottom: 120px; height:100%;} /* debe ser del mismo alto que el footer */

#back_left {
position:relative;
top:0px;
left:0px;
background: black;
width:17%;
height:40%;
}

Por pitufo

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Sep 2009 07:34 pm
Sigo probando y no sé porqué no funciona, ya que tengo el body en %, el contenido en % y luego a su vez el back_left en %, creo que no hay nada en el css que se contradiga.

A ver si me podéis echar un cable por favor que me estoy volviendo loco...

Mil gracias de nuevo;

Marcos

Por mnieto

16 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 07:46 pm
Hola


He probado con el código que te puse en el mensaje anterior y si funciona.

Sube los cambios para ver que es lo que falla.



Saludos
Bye

Por pitufo

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 06 Sep 2009 07:46 pm
Perdona pitufo no había leido tu último mensaje;

Mil millones de gracias, así ya funciona, me estaba volviendo loco.

He tenido que ajustar un poco el padding-bottom del div main para que el pie quede ajustado, pero ya funciona perfectamente.

No sabes el favor que me acabas de hacer, de verdad mil gracias.

Un abrazo y espero poco a poco ayudar en la comunidad.

Un saludo;

Marcos Nieto

Por mnieto

16 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Sep 2009 08:01 pm
Ya sabes que aquí estamos :wink:



Saludos
Bye

Por pitufo

31 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 07 Sep 2009 08:47 am
Buenas a todos de nuevo;

Como comenté ayer con la solución de pitufo funciona perfectamente. Muchas gracias.

El problema me viene ahora cuando en esa caja roja, meto texto.

Si el texto es menor que el alto de la caja roja no hay ningún problema. El problema viene cuando es mayor el tamaño del texto que el alto de la caja.

Antes la propia caja se redimensionaba y adoptaba el alto de forma automática. Ahora ese alto permanece constante.

Alguién sabe qué debo de modificar para el que el alto de la caja varíe según el contenido del texto?

Muchas gracias de nuevo a todos por la ayuda;

Saludos;

Marcos Nieto

Por mnieto

16 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.