28220 sujets

CSS et mise en forme, CSS3

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

Bonjour,

voici le contenu de mon fichier : style.css


._test {
  background-image:url('images/petit-clavier.gif');
  position: absolute;
  top: 190px;
  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

<!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 :
http://vectra333.no-ip.org/test/images/ff.jpg

et dans IE 6 :
http://vectra333.no-ip.org/test/images/ie.jpg

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/petit-clavier.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.
Modifié par roadruner (22 Aug 2005 - 13:46)
essaie de rempacer
  border-style:solid;
  border-color:white;
  border-top-color:red;


par

  border:3px solid white;
  border-top:3px solid red;;


si tu veux une bordure carrée et non en forme de trapèze, enlève la première définition.
Modifié par AlphaYoDa (22 Aug 2005 - 13:55)
Bonjour,


Il y a du code en double ici : (en gras)


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



(Ici il manque une partie il me semble.
Voir la FAQ du site tu pourras faire un copié collé.)


[i]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/i]
<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" [b]style="position: absolute;top: 190px;"[/b]>TOTO
</div>
</body>
</html>


Moi je supprimerai carrément les guillemets dans l'URL.
Modifié par zzzazzz (22 Aug 2005 - 14:13)
merci à tous Smiley cligne , mais cela ne résoud toujours pas le problème Smiley decu

En ce qui concerne le code en double, c'est parceque si je le met pas en "style" dans la déclaration de ma DIV, il n'est pas pris en compte par IE.
En fait, j'avais oublié de l'enlever de la CSS.
Merci pour cette remarque, j'ai corrigé.

J'ai essayé de mettre des guillemets double ou aucun guillemet dans la déclaration de l'URL, mais pas mieux Smiley decu Smiley decu Smiley decu

si vous avez d'autres idées, je suis preneur.
bonjour


çà c'est mieux et sans erreurs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type"content="text/html; charset=ISO-8859-1">
<title>NetWork-HostinG PHP2</title>
<link rel="stylesheet" type="text/css" href="Style/style.css">
</head>
<body>
<div class="test">TOTO</div>
</body>
</html>


le css

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


transitionnelle...cette doctype n'est pas la bienvenue! une stricte serais plus appropriée...un jour, il faudrat césser de coder en transitionnel!
je sais que coder du php avec xhtml, c'est galère, voire impossible, mais en html strict, çà passe très bien, voire mieux.

a écrit :
encore un bug de msie?


avant de hurler, il faut apprendre à coder. Smiley cligne msie est beaucoup plus subtil et puissant que vous ne le pensez.c'est une bête malgré tout ces manques css.

les erreurs css :

pas de valeur left.pourquoi margin-left? top sans left est célibataire...quel dommage!

l'underscore avant la déclaration de classe n'est pas valide.

les guillemets dans l'url sont source d'erreurs.A EVITER.

un bloc se déclare(width,height), se place(position...) et se rempli( background...), le tout dans l'ordre logique.çà aussi c'est de la sémantique.
avant d'écrire des phrases, on à créer l'alphabet...
Sujet clos
Aller à