Le background-image n'est pas pris en compte dans ma DIV

22 août 2005, 19:33

Bonjour,

voici le contenu de mon fichier : style.css

._test {
  background-image:url('images/petit-clavier.gif');
  margin-left:0px;
  width: 350px;
  height: 75px;
  border-style:solid;
  border-color:white;
  border-top-color:red;
}

Maintenant voici la source de mon fichier : index.php

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>NetWork-HostinG PHP2</title>
<link rel="stylesheet" type="text/css" href="Styles/style.css" >
</head>
<body>
<div class="_test" style="position: absolute;top: 190px;">TOTO
</div>
</body>
</html>

Voila ce que j'obtiens dans Firefox :

et dans IE 6 :

Comme vous pouvez le voir, mon image n'apparait pas en arriere plan.

Par contre, si je l'insère en IMG, elle apparait.

Je précise qu'elle existe bien dans le repertoire "images" qui est situé à la racine du site.
D'ailleurs, il suffit d'aller à l'adresse :
http://vectra333.no-ip.org/test/images/ ... lavier.gif

De plus, on peut voir que la ligne rouge supérieure de ma DIV n'apparait pas sous IE. Encore un BUG de MSIE ?

Merci d'avance pour votre aide.

22 août 2005, 20:00

Essaye avec

Code : Tout sélectionner

  background-image:url(./images/petit-clavier.gif);[php]
Je viens de tester directement sur ta propre page, et ça fonctionne.[/php]

22 août 2005, 20:46

Je crois que le mauvais sort s'acharne sur moi.
J'ai bien fais ta manip, mais pas mieux.

Mon fichier style.css est maintenant :

Code : Tout sélectionner

._test {
  [color=red]background-image:url(./images/petit-clavier.gif);[/color]
  position: absolute;
  top: 190px;
  margin-left:0px;
  width: 350px;
  height: 75px;
  border:3px solid white;
  border-top:3px solid red;
}

Par contre, en ajoutant le background inmage dans index.php :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>NetWork-HostinG PHP2</title>
<link rel="stylesheet" type="text/css" href="Styles/style.css" >
</head>
<body>
<div class="_test" style="position: absolute;top: 190px;background-image:url(./images/petit-clavier.gif);">TOTO
</div>
</body>
</html>

le texte "TOTO" a maintenant l'image en background.
Mais celle-ci n'est pas dans toute la DIV ](*,)

22 août 2005, 20:59

Tu as enlevé la feuille de style sur la page en ligne, je peux difficilement t'aider davantage. Avec la barre WebDevelopper de Firefox, je êux fire des tests en modifiant la feuille de style de mon coté (rassure-toi, ça ne change rien sur la feuille du serveur) et j'ai les modifications affichées en ligne.

Là, je peux rien voir du tout.

22 août 2005, 21:04

Désolé, en fait je travaillais sur des copies (index2.php et style2.css)
J'ai remis index.php et style.css en ligne

Pour info, je rapelle l'adresse :
http://vectra333.no-ip.org/test/index.php

Merci de ton aide

22 août 2005, 21:16

Bon, je crois que j'ai trouvé : le nom de ta class CSS _test: c'est de la syntaxe XML il semble, en tous cas, il supporte mal le "_", enlève-le et tout devrait rentrer dans l'ordre

22 août 2005, 22:11

Bon, là j'ai du mieux.
En renommant ma class CSS _test en test1, je retrouve ma ligne rouge dans IE.

Je peux même maintenant m'affranchir de mettre un STYLE dans ma DIV dans le PHP.
Auparavent, j'étais obligé de reprendre certaines infos de la définition de ma class pour que IE les prenne en compte.

Mais mon image n'apparait toujuors pas.

22 août 2005, 23:16

Bon, solution qui fonction sous IE aussi bien que sous FF : au lieu de class, utilise un id, d'abord comme il est en position absolute, , un autre <div> avec la même classe serait par dessus le premier, donc je propose ceci (combiné html+CSS pour simplifier le test:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>NetWork-HostinG PHP2</title>
<!--  <link rel="stylesheet" type="text/css" href="Styles/style.css" >  -->
<style type="text/css">
#test {
  background-image:url(./images/petit-clavier.gif);
  position: absolute;
  top: 190px;
  margin-left:0px;
  width: 350px;
  height: 75px;
  border:3px solid #ccc;
  border-top:3px solid red;
}
</style>
</head>
<body>
<div id="test">TOTO
</div>
</body>
</html>

[Edit]
J'ai eu un doute et j'ai séparé les fichiers en mettant le style CSS dans un répertoire à part et là, surprise, l'image disparait : solution, mettre le chemin relatif vers l'image par rapport à la position de la feuille de style et non par rapport à la page elle-même. Résultat, le CSS devient:

Code : Tout sélectionner

#test {
  background-image:url(../images/petit-clavier.gif);
  position: absolute;
  top: 190px;
  margin-left:0px;
  width: 350px;
  height: 75px;
  border:3px solid #ccc;
  border-top:3px solid red;
}

[/Edit]

22 août 2005, 23:50

OK, merci bien.

Je viens de m'apercevoir de quelquechose :
Si on fait une declaration interne de la CSS comme dans ton exemple, alors l'image apparait.
Si on fait une declaration externe, cela ne fonctionne plus....

Je vais donc faire une déclaration interne.

Encore merci de ton aide.

22 août 2005, 23:56

OUi, sauf que l'avantage immense de la feuille de style externe, c'est que pour mettre à jour le site complet, on ne touche qu'une seule feuille de style au lieu de chaque page...

23 août 2005, 00:09

J'ai eu un doute et j'ai séparé les fichiers en mettant le style CSS dans un répertoire à part et là, surprise, l'image disparait : solution, mettre le chemin relatif vers l'image par rapport à la position de la feuille de style et non par rapport à la page elle-même. Résultat, le CSS devient:

C'était si simple et on a tourné autour autant de temps.....
Heureusemebt que tu as eu un coup de génie.

Ca marche impecable comme ça.

Merci encore

Le background-image n'est pas pris en compte dans ma DIV

Qui est en ligne