Problème de couleur avec mes css

**thoughtless** · 12/08/2009, 23h07

Bjr, je vis un problème bizzare, j'ai une page web qui fait référence à une feuille de style.

Dans ma feuille de style, j'ai un élément me permettant de modifier la couleur

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.en-tete-interaction {
	color: #FF0000;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
}

Voici l'appel de ma feuille de style dans une page de test:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page de test</title>
 
<link href="interactons.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<font  class="en-tete-interaction">Voici mon texte avec css</font>
<p>
<font  color="#FF0000">Voici mon texte sans css</font>
</body>
</html>

Comme résultat à l'affichage, le texte avec le style est en bleu alors ke dans ma feuille de style j'ai choisi "rouge".
Le texte dans la balise font lui reste bel et bien rouge. Je ne comprend pas pourquoi le texte avec la css ne s'affiche pas dans la couleur choisie.

C'est génant car je dois travailler un design pour une appli web. j'aimerai trouver de l'aide auprès de la communauté.

Merci

**Doki95** · 13/08/2009, 09h41

J'ai essayer sous ie et sous ff3.0 et le texte est bien en rouge.

**thoughtless** · 13/08/2009, 10h57

Moi j'ai Firefox 3.5.1 et I.E. 6.0.2009.2180

Je vais essayer avec firefox 3.0

Stp quelle est ta version d'IE

**HiRoN** · 13/08/2009, 11h02

Bonjour,

Le mieux pour faire le test serait :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p class="en-tete-interaction">Voici mon texte avec css</p>
<p style="color:#FF0000;">Voici mon texte sans css</p>

La balise font n'étant plus vraiment d'actualité, autant utilisé un (paragraphe), voir un span (si tu tiens à utiliser une balise dépourvu de sens sémantiquement parlant).
Les textes auront donc normalement la même couleur (le 1er via le CSS, le 2ème via le style en ligne).

**thoughtless** · 13/08/2009, 11h48

Merci, pour l'info, je mettrai en pratique.

Mais à l'affichage j'ai le même résultat non souhaité.

**HiRoN** · 13/08/2009, 11h54

Envoyé par thoughtless

Merci, pour l'info, je mettrai en pratique.
Mais à l'affichage j'ai le même résultat non souhaité.

Pour ma part, à l'affichage, j'ai les 2 textes en rouge dont le 1er en gras (via le CSS).

Quel est le résultat souhaité ?
As-tu bien laissé le CSS ?

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.en-tete-interaction {
	color: #FF0000;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
}

**thoughtless** · 13/08/2009, 12h22

j'ai utilisé ta syntaxe.

L'effet souhaité est bien celui que tu as observé, cependant moi,
j'obtien un texte en bleu gras et non en rouge gras.

kel est la version de ton navigateur stp.

Voici mon texte avec css
Voici mon texte sans css

**HiRoN** · 13/08/2009, 12h28

Normalement, la version du navigateur n'a rien à voir la dedans (syntaxe basique), mais testé sous FF3.5 & IE7.

Renvoie :
- La totalité du code (X)HTML
- La totalité du code CSS

Je vais regarder de plus près...

sacha69 · 13/08/2009, 12h29

C'est le seul style que tu as qui ne s'applique pas?

Sinon ta css s'appelle interactons.css ou interactions.css ? (on sait jamais)

**HiRoN** · 13/08/2009, 12h31

Envoyé par sacha69

Sinon ta css s'appelle interactons.css ou interactions.css ? (on sait jamais)

+1...
Sûrement un problème de chemin, de casse ou autre...

Si le texte n'est pas de la bonne couleur, c'est que le CSS n'est pas appliqué...

**thoughtless** · 13/08/2009, 12h56

Ma css est bien interactions.css.

Dans dreamweaver elle s'applique (je vois très bien la couleur choisie) mais à l'exécution dans FF je vois une autre couleur

**HiRoN** · 13/08/2009, 13h00

Envoyé par thoughtless

Dans dreamweaver elle s'applique (je vois très bien la couleur choisie) mais à l'exécution dans FF je vois une autre couleur

As-tu bien vidé le cache ? (Ctrl+F5)
Sinon, comme demandé plus haut, renvoie-nous la totalité du code (X)HTML & CSS...

**thoughtless** · 13/08/2009, 13h08

Voici le code de la css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
fieldset {
	border: thin groove #003300;
}
.etiquette {
	font-family: "Courier New", Courier, mono;
	font-weight: bold;
	font-size:14px;
	color: #FF3300;
}
.bouton {
	color: #FF3300;
}
.side-header {
	background-image: url(img/Structure.bmp);
	background-repeat: no-repeat;
}
 
.enteteoperation {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	font-weight: bold;
	text-transform: capitalize;
	color: #000099;
	background-color: #FFFFFF;
}
form {
	background-color: #FFFFFF;
}
.en-tete-interaction {
	color: #FF0000;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
}
.titreprincipal {
	color: green;
	font-size: 20px;
	font-style: normal;
	font-weight: bolder;
	text-decoration: blink;
}
hr {
	color: #FF0000;
}
.divnav {
	border: medium dotted green;
	border-right-style:solid
}

Voici le code de la page de test

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page de test</title>
 
<link href="interactons.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<p class="en-tete-interaction">Voici mon texte avec css</p>
<p style="color:#FF0000;">Voici mon texte sans css</p>
</body>
</html>

sacha69 · 13/08/2009, 13h09

C'est bizarre car dans ton code html tu as écrit interactons.css

**thoughtless** · 13/08/2009, 13h09

Mes navigateurs sont FF 3.5.2 (je viens de mettre à jour) et IE 6

Dans le forum j'ai fais une erreur de frappe. Le nom de la css est bien <interactons.css>

**thoughtless** · 13/08/2009, 13h13

C'est vrai c'est une faute de frappe.

Mais sur mon disque dur c'est bien "interactons.css" donc il ne devrait pas avoir de pb normalement.

**HiRoN** · 13/08/2009, 13h24

En procédant par étapes, avec :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page de test</title>
<style type="text/css">
.en-tete-interaction {
        color: #FF0000;
        font-size: 20px;
        font-style: normal;
        font-weight: bold;
}
</style>
</head>
 
<body>
<p class="en-tete-interaction">Voici mon texte avec css</p>
<p style="color:#FF0000;">Voici mon texte sans css</p>
</body>
</html>

J'ai le résultat souhaité (pas de css externe)

**HiRoN** · 13/08/2009, 13h28

Avec :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page de test</title>
<link href="./test.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<p class="en-tete-interaction">Voici mon texte avec css</p>
<p style="color:#FF0000;">Voici mon texte sans css</p>
</body>
</html>

Et le fichier CSS associé (test.css) au même niveau :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.en-tete-interaction {
	color: #FF0000;
	font-size: 20px; /* À mettre plutôt en valeur "em" */
	font-style: normal; /* Inutile */
	font-weight: bold;
}

J'ai aussi le résultat souhaité...
Je te conseille donc de repartir de cela en enlevant les styles inutiles et de les ré-appliqué ensuite... (tout en vérifiant qu'ils n'impactent pas le reste)

**Sergejack** · 13/08/2009, 14h14

Est-ce que le texte est en bleu après que tu l'ai sélectionné ?

**thoughtless** · 13/08/2009, 14h43

En faisant attention je me suis rendu compte que ça ne se produisait pas seulement avec mes pages mais aussi avec celles des autres sites.

Pourtant dans mes application VB le texte a bien la couleur que je lui ai donné, mais dans maes appli web le probleme se pose. Est ce que les navigateurs aurait un problème particulier avec ma machine (TOSHIBA A300, PENTIUM DUAL CORE, 3Go RAM, 200Go DD) je suis malheureux ce PC m'a couté cher, je ne peux le changer pour l'instant. Je développais toutes mes appli en VB.net ou C#, maintenant je veux utiliser le web, et j'ai ce pb aider moi!!!!!!!!

Au fait, quand je sélectionne le texte et que je le déselectionne par la suite il prend la couleur souhaité. Et quand je fait F5 pour actualiser la page le pb se représente. C'est la même chose dans FF et dans IE

Problème de couleur avec mes css

CSS

Discussions similaires

Partager

Partager