Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict

turingpattern · #1 (**permalink**) 04/01/2008, 06:49

Buenas,
estoy desarrollando una web mediante xhtml y css.
Empecé con el código css y un html muy básico, sin haber definido la cabecera del html en profundidad.
Ahora que estoy acabando, me he puesto a hacer una cabecera xhtml "rigurosa" y me ha dado problemas: la imagen de fondo que estaba usando ahora no aparece.

Antes tenía algo sencillo:

Código:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/nueva.css" media="screen" />
</head>
<body>
.....
</body>
</html

Ahora he puesto algo más sofisticado:

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" xml:lang="es" lang="es">

<head profile="http://www.w3.org/2005/11/profile">
<meta http-equiv="Content-Language" content="es" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="css/nueva.css" media="screen" />
    
</head>

El archivo CSS no ha cambiado y la imagen está en su sitio, pero si hago este cambio simplemente no aparece. Por lo demás la apariencia de la página no varía, simplemente esas imágenes no aparecen
Los trozos del CSS donde se referencian las imágenes son:

Código:

body { 
	font-family: Arial, Helvetica, sans-serif;
	//font-family: "Times New Roman";
	font-size: 0.8em;
	font-weight: normal;
	color: #fff;
	background:#f7fbef url(../images/body-pattern.jpg) no-repeat
}

Código:

#textos {height: 100%;
	background: #fafeed url(../images/body2.png) no-repeat center;
	//margin-top: 30px;
	//margin-left: 130px;
	//background: #f7fbef url(../images/body-bg1.jpg) no-repeat
}

¿Alguien sabe dónde está el problema y cúal es la solución?

Un saludo

rba · #2 (**permalink**) 04/01/2008, 07:25

¿El archivo lo estás guardando como .xhtml o .html?

turingpattern · #3 (**permalink**) 07/01/2008, 03:56

Estoy guardando como xhtml

Osorio06 · #4 (**permalink**) 07/01/2008, 05:54

¿Cúal es la imagen que no se ve: la del body o la de #textos?
Si es la 2ª, tal vez sea por el "height:100%", ya que "estrictamente" el % es sobre el contenedor, y si el contenedor no tiene tamaño height ...

Prueba iniciando el css con:

Código:

html,body{height:100%}

Un saludo.

turingpattern · #5 (**permalink**) 09/01/2008, 10:38

Muchas gracias; funciona bien.
Aunque me he encontrado con otro problema. Cuando tenía la página en html "normal", la web se ajustaba perfectamente al marco del navegador. Y así, curiosamente en html + IE6 se ve bien y en xhtml+Mozilla quedan márgenes que no soy capaz de eliminar.

(Tengo un par de pantallazos de a lo que me refiero, pero no sé si es muy correcto poner los enlaces de cómo queda)

De hecho, he tenido que cambiar el xhtml e incluir un div adicional para la imagen que quiero que sea cabecera:

Código:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="es" lang="es">

  <head profile="http://www.w3.org/2005/11/profile">
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/marino.css" media="screen" />

  </head>
  <body>
    <div id="cabeza"></div> 
    <div id="barra_navegacion">
      <!-- la barra de navegación -->
    </div>
    <div id="textos">
      <!-- resto de la web  -->
    </div>
  </body>
</html>

Código:

html{height:100%}

* {padding: 0}

body { 
	font: normal 0.8em Arial, Helvetica, sans-serif;
	color: #fff;
	height:100%;
	//background:#f7fbef url(../images/body-pattern.jpg) no-repeat /* En IE funciona!!*/
}

#cabeza {
  height:20px;
  background:#f7fbef url(../images/body-pattern.jpg) no-repeat
} /*Para XHTML*/

#barra_navegacion {
	z-index: 2;
	position: relative;
	left: 50%;
	margin-left: -35.5em;
	width: 71em
}
#textos {
   height: 100%;
   background: #fafeed url(../images/body2.png) no-repeat center;
}

Un saludo

Osorio06 · #6 (**permalink**) 09/01/2008, 11:37

Tal vez con

Código:

body {margin:0}

ó incluso empezaría el css, para todos los elementos:

Código:

* {padding: 0;margin:0;}

Saludos.

feral · #7 (**permalink**) 10/01/2008, 05:37

<!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" lang="es" xml:lang="es">

Si vas a usar un DTD estricto, este es el que debes de usar, otro tipo de DTD te dara problemas de compatibilidad y errores extraños. Coloca eso y solo eso.

Tampoco veo que tengas un atributo <title> en el <head>, el cual es obligatorio en un xhtml estricto.
En tu CSS faltan ";" al termino de cada declaracion, eso puede dar errores y omisiones en el renderizado.
El xhtml estricto exige ser estricto con las normas de marcado, te recomiendo que intentes validar tu pagina para que te salga la lista de fallos, asi podras ir trazando los errores.

turingpattern · #8 (**permalink**) 18/01/2008, 10:18

Probaré la cabecera que me dices;
el <title> no lo había puesto para no llenar la pantalla de código, pero lo tenía en mi código.
Con respecto al ; creo que en la última declaración de cada bloque se puede ahorrar. Tengo que volver a validarlo porque creo que el validador no me daba problema. Es un caracter que se ahorra (No es mucho pero algo es...)

feral · #9 (**permalink**) 18/01/2008, 12:02

Cita:

Iniciado por turingpattern

Probaré la cabecera que me dices;
el <title> no lo había puesto para no llenar la pantalla de código, pero lo tenía en mi código.
Con respecto al ; creo que en la última declaración de cada bloque se puede ahorrar. Tengo que volver a validarlo porque creo que el validador no me daba problema. Es un caracter que se ahorra (No es mucho pero algo es...)

Creo que el ";" se puede omitir solo si existe una declaracion unica.