Pues aquí estoy otra vez, que me está poniendo de los nervios tanta CSS que creo que me está toreando el navegador de mala manera:
Tengo una imágen que no soy capaz de que se muestre dentro del div central:
El div en cuestión es el div id="contenido". Sin embargo, si la pongo directamente con un estilo en línea, ya sea con un tag <style ... > como con el atributo style="..." en ese div, la imágen se muestra sin ningún problema.
He repasado las FAQ, varias páginas y los manuales de manualesweb, pero no veo nada...
¿Qué estoy haciendo mal?
Muchas gracias y un saludo.
HTML
Código:
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 - s t r i c t . d t d"> <html xmlns="h t t p : / / w w w . w3 . org /1 9 9 9 / x h t m l"> <head> <link type="text/css" href="css/estilos.css" rel="stylesheet"/> <title>B.C.S. - Clínica Estética Belleza Cuerpo y Salud</title> </head> <body> <div id="global"> <div id="logo"> </div> <div id="lateral"> <div id="lateral_contenido"> </div> </div> <div id="superior"> <div id="superior_contenido"> </div> </div> <div id="contenido"> </div> </div> </body> </html>
CSS
Código:
/*DIV central donde se carga dinámicamente la información de la página*/
#contenido {
background-image: url('img/abanicos.jpg');
width: 80%;
height: 90%;
position:absolute;
bottom:0px;
right:0px;
overflow: scroll;
}
/*DIV que incluye la página completa con las propiedades generales y el truco para IE de mínimo ancho y mínimo alto*/
#global {
width: 100%;
height: 100%;
width: expression(document.body.clientWidth < 1024? "1024px": "100%" );
height: expression(document.body.clientHeight < 800? "800px": "100%" );
min-width: 1024px;
min-height: 800px;
position:relative;
}
/*DIV superior donde podemos encontrar los botones de categorías*/
#superior {
background-color: #7F7;
background-position: bottom left;
width: 80%;
height: 10%;
position:absolute;
top: 0px;
right:0px;
}
/*DIV superior izquierdo, donde incluímos la imágen del logo*/
#logo {
background-color: black;
width: 20%;
height: 10%;
position:absolute;
top:0px;
left:0px;
}
body {
text-align: center;
width: 99%;
height: 100%;
}
