Discussion :

[laurentSc]

Code html :

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

1
2
3
4
5
6
7
8
 
<div id="menu">
<ul>		
 
<li class="home"><a href="#"><span>accueil</span></a></li>
 
	</ul>	
</div>

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:none;
height:100px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}
 
.home {
  background-image: url('../images/buying-a-homex30x150x100.png');
    background-repeat:no-repeat;
  background-position:-100% 100%;
 
}

Quand je regarde avec l'inspector de Firefox, Style sheet could not be loaded. File .../style-menu_images2.css

[NoSmoking]

Bonjour,
comme souvent il te faut vérifier le chemin d'accès à ton fichier.

[Invité]

Bonjour,

• Quel intérêt de montrer ces bouts de code HTML et CSS, sans rapport direct avec le problème ?
• Comment crois-tu que "File .../style-menu_images2.css" puisse aider en quoi que ce soit ?

=> Quel est le code HTML d'insertion de la feuille de style ?

[laurentSc]

Merci pour vos réponses.

Le code d'insertion de la feuille de style est <link href="css/style-menu_images2.css" rel="stylesheet"/> . L'arborescence est :

Le fichier html est indexbefore2.html. (Le fichier js n'est pas utilisé)

et je viens de faire un test qui prouve qu'elle est appelée :
html modifié :

Code html :

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

1
2
3
4
5
6
7
<div id="menu">
<ul>		
			
<li class="home"><a href="#"><span class="rouge">accueil</span></a></li>

	</ul>	
</div>

css modifié :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
...
 
.home {
  background-image: url('../images/buying-a-homex30x150x100.png');
    background-repeat:no-repeat;
  background-position:-100% 100%;
 
}
 
 
.rouge{
	color:red;
}

accueil passe bien en rouge. Et le fichier dans images existe bien :

[Invité]

...accueil passe bien en rouge....

Donc... le fichier CSS est bien chargé / pris en compte, non ?

-> ??

[laurentSc]

Non, pas résolu
car les 3 propriétés de la classe css home sont barrées (donc non prises en compte).
Comme elles sont probablement en conflit avec le second fichier css, je l'ai supprimé

Code html :

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

1
2
	<link href="css/style-menu_images2.css" rel="stylesheet"/> 
<!--<link rel="stylesheet" href="stylebefore.css" type="text/css" />-->

et légèrement modifié home :

Code css :

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

1
2
3
4
5
6
7
.home {
  background-image: url('../images/buying-a-homex30x150x100.png');
  background-repeat:no-repeat;
  background-position:-100% 100%;
  height:100px;  /* c'est en plus */
 
}

Du coup, les propriétés de home ne sont plus barrées, mais l'image de fond n'apparaît toujours pas...

[Invité]

Vérifie que c'est bien un png et pas un jpg.

N.B. Pourquoi tu n'affiches pas les extensions des fichiers/dossiers ?
(-> "Affichage" -> "Options" -> "Options de dossiers" -> "Affichage" : décocher "Masquer les extensions..." )

[laurentSc]

On l'affiche comment cette option ? En tous cas, c'est bien un png :

[Invité]

Cherche...

Tu as quel Windows ?

[Invité]

• Onglet "Organiser"
• -> "Options des dossiers et de recherche"
• -> onglet "affichage"
• décocher "Masquer les extensions dont le type est connu"

[laurentSc]

Merci ; grâce à ton aide, j'affiche les extensions...mais toujours pas l'image de fond

[NoSmoking]

c'est quoi ce -100% ?

Code :

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

1
2
3
4
5
.home {
    background-image: url('../images/buying-a-homex30x150x100.png');
    background-repeat:no-repeat;
    background-position:-100% 100%;    /* -100% ????????? */
 }

[Invité]

Ca, c'est une question de "Débutant".

Or, tu es maintenant "Membre émérite"...

[laurentSc]

Le -100%, c'était pour attirer l'attention mais si je mets 0% 0%, ça change rien...

[Skyxia]

Vous devez certainement tous vous y connaître mieux que moi mais question, voici son code :

Code :

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

1
2
 
<link href="css/style-menu_images2.css" rel="stylesheet"/>

Et voici ce que moi je met d'habitude :

Code :

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

1
2
 
<link rel="stylesheet" type="text/css" href="css/style-menu_images2.css">

Est-ce que ça change quelque chose d'important ou pas ?

[laurentSc]

A mon avis, c'est équivalent mais au cas où, j'ai quand même essayé, et pas mieux...

[NoSmoking]

Est-ce que ça change quelque chose d'important ou pas ?

ce qui est important c'est l'attribut rel

• 4.2.4 The link element
• 4.2.4 The link element -> attribut type

@laurentSc : ton image s'affiche t-elle au moins normalement dans ton navigateur (IE8 je présume) ?