Foros del Web » Creando para Internet » CSS »

Imágen de fondo fija y scroll que no se deja...

Estas en el tema de Imágen de fondo fija y scroll que no se deja... en el foro de CSS en Foros del Web. Hola... Continuando con mis sesiones de CSS y después de haber adquirido un par de libros (super interesantes, por cierto, ya os comentaré algunas cosas ...
  #1 (permalink)  
Antiguo 21/09/2009, 15:49
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Imágen de fondo fija y scroll que no se deja...

Hola...

Continuando con mis sesiones de CSS y después de haber adquirido un par de libros (super interesantes, por cierto, ya os comentaré algunas cosas que vienen en uno de ellos...) os presento el siguiente problema que no he conseguido resolver:

Tengo un diseño de página en dos columnas con una parte superior de cabecera.

En la parte de contenidos, que está a la derecha-abajo, quiero poner una imágen de fondo fija en el centro. Justo por encima de la imágen, tendré todo el texto, de tal forma que me aparezca un scroll en ese div siempre que el texto sea más grande a lo largo que el div.

Pero bien... resulta que le digo al div que quiero un background center fixed y me lo fija en el centro de la pantalla y no en el centro de mi div, que, al tener la columna izquierda, está desplazado ligeramente hacia la derecha. Cuando le quito el fixed, la imágen hace scroll con todo lo demás...

Además, he metido un div dentro del de la imágen para poner el texto y que me salga la barra de scroll, pero no sé qué pasa que no consigo hacerlo bien, o se me sale el contenido por abajo o hace algo raro con el scroll, el div inferior y la imágen. No sé si es un efecto visual o qué. He añadido un overflow-y: scroll al div padre, pero no me cuadra mucho...

Aquí os dejo mi código. Como esaba probando cosas, tengo los estilos metidos en línea, cuando tenga algo más concreto terminaré por sacarlos a una CSS...

Cualquier ayuda, consejo o sugerencia será muy bienvenida.


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>B.C.S. - Clínica Estética Belleza Cuerpo y Salud</title>
		<style type="text/css">
			* {
				border: 0;
				margin: 0;
				padding: 0;
				font: 14px Verdana,Arial,Sans-serif;
			}
			
			#global{
				width: 98%; 
				height: 99%; 
				position: absolute; 
				top: 0.5%; 
				left: 1%; 
				min-width: 1024px; 
				min-height: 768px; 
				background-color: #791c6b;
			}
			
			#izquierda {
				width: 25%; 
				height: 100%; 
				float: left;
			}
			
			#logo {
				width: 100%; 
				height: 15%;
			}
			
			#barra_lateral {
				width: 100%; 
				height: 15%;
			}
			
			#derecha{
				width: 74.999%; 
				height: 100%; 
				margin-left: 25%; 
				padding-left: -25%;
				position: relative;			
			}
			
			#barra_derecha {
				width: 100%; 
				height: 15%;
				position: relative;
			}
			
			#contenido {
				width: 100%; 
				height: 85%;
				color: #EEFFEE; 
				background: #110011 url(img/fondo_morado.gif) no-repeat center; 
				overflow-y: auto;
			}
			
			#interior {
				overflow-y: auto; 
				padding: 20px;
			}

		</style>
	</head>
	<body>
		<div id="global">
			<div id="izquierda">
				<div id="logo">
					<img src="logo.gif" alt="logo" style="width: 100%; height: 100%;"/>
				</div>
				<div id="barra_lateral">
				</div>
			</div>
			<div id="derecha">
				<div id="barra_derecha">
				</div>
				<div id="contenido">
					<div id="interior">
						HOLA, esto es un texto que está aqui encima del fondo de pantalla!!!!
						<br />
						TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
						<br />	
						HOLA, esto es un texto que está aqui encima del fondo de pantalla!!!!
						<br />
						TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
						<br />	
						HOLA, esto es un texto que está aqui encima del fondo de pantalla!!!!
						<br />
						TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
					</div>
				</div>
			</div>
			<div style="clear: both;" />
		</div>
	</body>
</html>

Muchas gracias a todos.

Un saludo.


Edit: Siento lo del HTML, después de la desesperación de ayer, lo limpio para que otros puedan entenderlo... Gracias y disculpad.

Última edición por tistklehoff; 22/09/2009 a las 01:25 Razón: El HTML limpio y ordenado es una virtud...
  #2 (permalink)  
Antiguo 21/09/2009, 19:58
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imágen de fondo fija y scroll que no se deja...

Hola tistklehoff:

Se me hace imposible entenderte, más aún con el html sucio que pasas, (tomalo a bien).
Te responderé a grandes rasgos con lo que pueda:

Las imagenes de fondo se declaran preferentemente en <style></style> por ejemplo:
#columna_con_fondo {
background-image:url/de/tu/imagen;
background-repeat:valor;
background-position:valor;
top:;
left:;
right:;
bottom:;
}

(en body) <div id="columna_con_fondo">Aqui el contenido de tu columna</div>

Esto te puede ser util: http://www.librosweb.es/referencia/c...-position.html

para lograr que te aparezca una barra de scroll debes dar al div en cuestion:

#div_en_cuestion {
overflow:auto;
width:/*aqui el ancho que desees, cuando este se desborde aparecera la barra de scroll*/;
height:/*aqui el alto que desees, cuando este se desborde aparecera la barra de scroll*/;
}
Pero overflow tambien puede tomar otros valores, miralo aquí: http://www.librosweb.es/referencia/css/overflow.html

Aqui tienes buenos ejemplos, aportados por mikmoro, de trabajo con fondo:
http://www.araudi.net/ejemplos/fondo_elastico.html
http://www.araudi.net/ejemplos/fondo_elastico2.html
http://www.araudi.net/ejemplos/fondo_fijo_IE.html

Tambien encontraras en araudi.net ejemplos de maquetacion a dos columnas.

Espero haberte ayudado. Cualquier cosa estamos por el foro

Saludos!

Última edición por cristian_cena; 21/09/2009 a las 20:09
  #3 (permalink)  
Antiguo 22/09/2009, 01:40
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Imágen de fondo fija y scroll que no se deja...

Hola.

Gracias por tu respuesta.
Ya he limpiado el HTML, disculpad todos por lo guarro que andaba, pero es producto de una (ligera) desesperación.

Ya conozco las propiedades background-position y background-attachment. El problema que tengo es que parece que si a la imágen de fondo de #contenido le pogo fixed para que no haga scroll (que el scroll es otro tema... ) me la centra con respecto a la pantalla, y no con respecto al div al que pertenece y si le quito el fixed, me hace scroll y eso no lo quiero.

Se me estaba ocurriendo centrarla por mi mismo donde yo quiero (top: 65%; left: 65%; he probado) con fixed y dejarla así, pero cuando haces más pequeña la pantalla, la imágen se mueve (lógicamente) y queda desplazada.

Lo que necesito es igual que en el ejemplo que comentas de Mikmoro de imágen fija para IE, pero en lugar de fijar la imágen al body, hacerlo sobre mi div #contenido.

Por otro lado, por favor, revisadme el uso que estoy haciendo de los divs y del overflow-y. El div #interior está dentro de #contenido, y no sé si he conseguido usar bien el overflow-y en ambos; Si se le quito a #contenido me hace cosas raras ¿por qué? ¿Qué es lo más correcto / adecuado que debería hacer aquí?



Muchas gracias a todos por vuestra ayuda.


Un saludo.
  #4 (permalink)  
Antiguo 22/09/2009, 01:48
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Imágen de fondo fija y scroll que no se deja...

Hola.

Gracias por tu respuesta.
Ya he limpiado el HTML, disculpad todos por lo guarro que andaba, pero es producto de una (ligera) desesperación.

Ya conozco las propiedades background-position y background-attachment. El problema que tengo es que parece que si a la imágen de fondo de #contenido le pogo fixed para que no haga scroll (que el scroll es otro tema... ) me la centra con respecto a la pantalla, y no con respecto al div al que pertenece y si le quito el fixed, me hace scroll y eso no lo quiero.

Se me estaba ocurriendo centrarla por mi mismo donde yo quiero (top: 65%; left: 65%; he probado) con fixed y dejarla así, pero cuando haces más pequeña la pantalla, la imágen se mueve (lógicamente) y queda desplazada.

Lo que necesito es igual que en el ejemplo que comentas de Mikmoro de imágen fija para IE, pero en lugar de fijar la imágen al body, hacerlo sobre mi div #contenido.

Por otro lado, por favor, revisadme el uso que estoy haciendo de los divs y del overflow-y. El div #interior está dentro de #contenido, y no sé si he conseguido usar bien el overflow-y en ambos; Si se le quito a #contenido me hace cosas raras ¿por qué? ¿Qué es lo más correcto / adecuado que debería hacer aquí?



Muchas gracias a todos por vuestra ayuda.


Un saludo.

Última edición por tistklehoff; 22/09/2009 a las 01:49 Razón: Multi post... asco de red... Algún admin puede borrarlo? Gracias!
  #5 (permalink)  
Antiguo 24/09/2009, 12:10
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Imágen de fondo fija y scroll que no se deja...

Hola tistklehoff:

copia y pega este codigo haber si te he entendido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>B.C.S. - Clínica Estética Belleza Cuerpo y Salud</title>
<style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
font: 14px Verdana,Arial,Sans-serif;
}
body {}
#global{
width: 98%;
height: 99%;
position: absolute;
top: 0.5%;
left: 1%;
min-width: 1024px;
min-height: 768px;
background-color:#791c6b;
}

#izquierda {
width: 25%;
height: 100%;
float: left;
}


#barra_lateral {
width: 100%;
height: 15%;
}

#derecha{
width: 74.999%;
height: 100%;
margin-left: 25%;
padding-left: -25%;
position: relative;
}

#barra_derecha {
width: 100%;
height: 15%;
position: relative;
}

#contenido {
width: 100%;
height: 85%;
color: #EEFFEE;
background-image:url(tu_imagen.jpg);
background-repeat:/*depende de si quieras que se repita*/;
overflow:auto;

}

#interior {
padding: 20px;

}
</style>
</style>
</head>
<body>
<div id="global">

<div id="izquierda">
<div id="barra_lateral"></div>
</div>

<div id="derecha">
<div id="barra_derecha">
</div>
<div id="contenido">
<div id="interior">
<p>HOLA, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
HOLA, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
HOLA, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
HOLA, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
TEXTO, esto es un texto que está aqui encima del fondo de pantalla!!!!
<br />
Aqui agrega todo el contenido que quieras para ver que funcione el scroll
</p>
</div>
</div>
</div>

<div style="clear:both;"></div>
</div>
</body>
</html>


Hice lo siguiente:

1- Eliminé tu la imagen junto al div que la contenia de tu html y tambien los estilos que le dabas para declararla (y fijarla) en #contenido tal como querias.

2- Quité el overflow que dabas a interior y lo incluí en contenido.

Se ve bien en Firefox e Internet Explorer 8, faltaría encontrar un truco para que funcione en IE 6 y 7.

Analiza el código y luego postea tus dudas asi lo seguimos viendo

Saludos!
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:59.