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.