Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/01/2008, 06:49
 
Fecha de Ingreso: mayo-2005
Mensajes: 17
Antigüedad: 12 años, 6 meses
Puntos: 0
Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict

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
  #2 (permalink)  
Antiguo 04/01/2008, 07:25
rba
 
Fecha de Ingreso: diciembre-2007
Mensajes: 26
Antigüedad: 10 años
Puntos: 0
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

¿El archivo lo estás guardando como .xhtml o .html?
  #3 (permalink)  
Antiguo 07/01/2008, 03:56
 
Fecha de Ingreso: mayo-2005
Mensajes: 17
Antigüedad: 12 años, 6 meses
Puntos: 0
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

Estoy guardando como xhtml
  #4 (permalink)  
Antiguo 07/01/2008, 05:54
 
Fecha de Ingreso: enero-2006
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 1
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

¿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.
  #5 (permalink)  
Antiguo 09/01/2008, 10:38
 
Fecha de Ingreso: mayo-2005
Mensajes: 17
Antigüedad: 12 años, 6 meses
Puntos: 0
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

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
  #6 (permalink)  
Antiguo 09/01/2008, 11:37
 
Fecha de Ingreso: enero-2006
Mensajes: 30
Antigüedad: 11 años, 10 meses
Puntos: 1
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

Tal vez con
Código:
body {margin:0}
ó incluso empezaría el css, para todos los elementos:
Código:
* {padding: 0;margin:0;}
Saludos.
  #7 (permalink)  
Antiguo 10/01/2008, 05:37
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 meses
Puntos: 4
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

<!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.
  #8 (permalink)  
Antiguo 18/01/2008, 10:18
 
Fecha de Ingreso: mayo-2005
Mensajes: 17
Antigüedad: 12 años, 6 meses
Puntos: 0
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

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...)
  #9 (permalink)  
Antiguo 18/01/2008, 12:02
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 meses
Puntos: 4
Re: Problema con imagen de fondo y <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

Cita:
Iniciado por turingpattern Ver Mensaje
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.
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 02:48.