Feuille de styles inopérante

Jean Sympa · 02/01/2011, 12h26

Bonjour à toutes et à tous,

Feuille de styles inopérante

J'utilise notepad++. J'ai placé le fichier index.html dans un dossier et le fichiers styles.css
dans un sous dossier. Je commente la feuille de styles.
Quand j'ouvre le fichier index dans FireFox, aucune des actions spécifiée dans le fichier styles.css
n'est réalisée. En revanche je constate l'apparition du symbole #, à la suite de l'adresse, quand je clique sur une option quelconque.
Où est l'erreur?

Code :

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
 
<html>
<head>
<link href="css/styles.css" rel="stylessheet" type"text/css"/>
</head>
<body>
<ul class="menu1">
<li><a href="#"Link01/li>
<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="#"Link02><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="#"Link03><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="#"Link04><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="#"Link05><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="#"Link06><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
</ul>
</body>
</html>

Code :

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
 
/*06-Création des styles */
ul.menu1{
  float:left;
  width:300px;
  magin:0;
  padding:0;
  list-style:none;
  background-color:black;
  }
/*07-Retirer le soulignement, ajouter une marge, créer une bordure, changer la couleur */ 
 ul.menu1 li a{
  color:#fff;
  text-decoration:none;
  display:block;
  width:600px;
  pading:10px;
  border-bottom:1px solid #000000;
  }
  ul.menu1 li a:hover{
  background-color:#gc1010;
  }
 /*08-Effet de survol*/
 ul.menu1 li  a:hover span{
  display:block;
  padding:5px 0 0 0;
  }
/*09-Disparition des descriptions*/
ul.menu1 li span{
display:none;
}
  ul.menu1 li a{
text-shadow:#dddddd 0px 1px 1px;
}

Questions supplémentaires
Quel logiciel utilisez-vous pour indenter le code?
Quel logiciel utilisez-vous pour valider le code ?

Avec mes remerciements
Cordialement
Papy

AyManoVic · 02/01/2011, 12h52

Essaie d'enlever les points virgules des derniers instructions d'un bloc: {code.CSS}
mais aussi

Code :

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

<link href="css/styles.css" rel="stylessheet" type"text/css"/>

devient

Code :

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

<link  rel="stylessheet" type="text/css" href="css/styles.css"/>

Jean Sympa · 02/01/2011, 13h08

Merci AyManoVic,

J'ai essayé, sans succès.

Cordialement
Papy

AyManoVic · 02/01/2011, 13h15

Essaie avec la modification

Jean Sympa · 02/01/2011, 14h45

Où est cette modification?

ornitho13 · 02/01/2011, 16h25

le "rel" n'est pas correct, voici ce qu'il faut mettre:

Code html :

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

<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />

de plus les liens ne sont pas corrects:

Code html :

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

<a href="#"Link02>

devient

Code html :

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

<a href="#Link02">

si tu veux valider tes pages, il existe le W3C validator qui permet de le faire

aL1ba · 02/01/2011, 21h54

Code html :
<a href="#Link02"> ?
Ça ne serait pas plutôt quelque chose comme:

Code:

Code :

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

1
2
<li><a href="Link02.html" </a></li>
>

AyManoVic · 03/01/2011, 08h16

Le probleme est dans type il devrait ajouter un =
type =
d'ailleurs je l'ai mis dans la modif de mon post !

Jean Sympa · 03/01/2011, 12h33

Merci à tous,

A l'attention de AyManoVic

Je n'ai pas la modif dans ton post. Tu as du oublié de la poster!

A l'attention d'ornitho13

J'ai essayé d'utiliser Validator, je n'ai pas encore suffisamment d'expérience pour interpréter
judicieusement ses commentaires.
La feuille de style fonctionne. J'ai appliqué ta correction à Link01, Link02.html ett Link03*'', sans résultat.
Je veux créer un menu vertical. Le résultat n'est pas encore là.
La figure jointe ne montre pas que le texte entre span apparaît quand le curseur passe sur href="#Link0n"

A l'attention aL1ba
Ta correction est sans effet

Code xhtml :

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
 
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/> 
</head>
<body>
<ul class="menu1">
<li><a> href="#Link01
<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a> href="#Link02.html"><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a> href="#Link03"><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a> href="#Link04"<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a> href="#Link05"<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a> href="#Link06"<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
</ul>
</body>
</html>

styles.css

Code :

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
 
ul.menu1{
  float:left;
  width:400px;
  magin:0;
  padding:0;
  list-style:none; 
  background-color:blue 
  }
/*07-Retirer le soulignement, ajouter une marge, créer une bordure, changer la couleur */ 
 ul.menu1 li a{
  color:#fff;
  text-decoration:none;
  display:block;
  width:600px;
  pading:10px;
  border-bottom:1px solid #000000
  }
  ul.menu1 li a:hover{
  background-color:#gc1010
  }
 /*08-Effet de survol*/
 ul.menu1 li  a:hover span{
  display:block;
  padding:5px 0 0 0
  }
/*09-Disparition des descriptions*/
ul.menu1 li span{
display:none
}
  ul.menu1 li a{
text-shadow:#dddddd 0px 1px 1px;
}

Cordialement
Papy

ornitho13 · 04/01/2011, 17h34

Dans tes liens, tu utilises un #. Cela sert à faire des liens vers une ancre (une sorte de lien vers un endroit de la page). Si ces ancres n'existe pas cela ne produira aucun effet. Mais je ne pense pas que c'est ce que tu veux faire.

@aL1ba : cela dépend du type de lien recherché, si il veut faire un lien vers une autre page, oui ce sera ce que tu proposes.

@Jean Sympa: tu n'as pas correctement implémenté ce que disait aL1ba, il faut que tu enlèves le # dans tes liens si tu veux être redirigé vers une autre page.
un lien ressemblerait à ceux ci:

Code html :

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

1
2
3
4
 
...
<li><a href="Link01.html"><span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
...

je constate également que dans ton css, il y a la propriété pading qui n'existe pas, ce sera plutôt padding

Essaye donc ce code et dis moi, si c'est ce que tu veux

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
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
 
<html>
<head>
 
<style type="text/css">
ul.menu1{
  width:400px;
  magin:0;
  padding:0;
  list-style:none; 
  background-color:blue 
  }
/*07-Retirer le soulignement, ajouter une marge, créer une bordure, changer la couleur */ 
 ul.menu1 li a{
  color:#fff;
  text-decoration:none;
  display:block;
  padding:10px;
  border-bottom:1px solid #000000;
  text-shadow:#dddddd 0px 1px 1px;
  }
  ul.menu1 li a:hover{
  background-color:#gc1010;
  }
 /*08-Effet de survol*/
 ul.menu1 li  a:hover span{
  display:block;
  padding:5px 0 0 0;
  }
/*09-Disparition des descriptions*/
ul.menu1 li span{
display:none;
}
  ul.menu1 li a{
 
}
</style>
</head>
<body>
<ul class="menu1">
<li><a href="Link01.html">Link01
<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="Link02.html">Link02<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="Link03.html">Link03<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="Link04.html">Link04<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="Link05.html">Link05<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
<li><a href="Link06.html">Link06<span>Pellentesque urna erat, congue in tempus ut,mattis ut enim.</span></a></li>
</ul>
</body>
</html>

J'ai changé légèrement le html et optimiser le css
Tiens moi au courant

02/01/2011, 12h52	#2
AyManoVic Nouveau Membre du Club Inscription : juin 2010 Messages : 116 Détails du profil Informations forums : Inscription : juin 2010 Messages : 116 Points : 28 Points : 28	Essaie d'enlever les points virgules des derniers instructions d'un bloc: {code.CSS} mais aussi Code : Sélectionner tout - Visualiser dans une fenêtre à part <link href="css/styles.css" rel="stylessheet" type"text/css"/> devient Code : Sélectionner tout - Visualiser dans une fenêtre à part <link rel="stylessheet" type="text/css" href="css/styles.css"/>
	00

02/01/2011, 16h25	#6
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	le "rel" n'est pas correct, voici ce qu'il faut mettre: Code html : Sélectionner tout - Visualiser dans une fenêtre à part <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" /> de plus les liens ne sont pas corrects: Code html : Sélectionner tout - Visualiser dans une fenêtre à part <a href="#"Link02> devient Code html : Sélectionner tout - Visualiser dans une fenêtre à part <a href="#Link02"> si tu veux valider tes pages, il existe le W3C validator qui permet de le faire
	00

02/01/2011, 13h08	#3
Jean Sympa Invité régulier Jean Sympa Inscription : novembre 2010 Messages : 29 Détails du profil Informations personnelles : Nom : Jean Sympa Informations forums : Inscription : novembre 2010 Messages : 29 Points : 7 Points : 7	Merci AyManoVic, J'ai essayé, sans succès. Cordialement Papy
	00

02/01/2011, 13h15	#4
AyManoVic Nouveau Membre du Club Inscription : juin 2010 Messages : 116 Détails du profil Informations forums : Inscription : juin 2010 Messages : 116 Points : 28 Points : 28	Essaie avec la modification
	00

02/01/2011, 14h45	#5
Jean Sympa Invité régulier Jean Sympa Inscription : novembre 2010 Messages : 29 Détails du profil Informations personnelles : Nom : Jean Sympa Informations forums : Inscription : novembre 2010 Messages : 29 Points : 7 Points : 7	Où est cette modification?
	00

03/01/2011, 08h16	#8
AyManoVic Nouveau Membre du Club Inscription : juin 2010 Messages : 116 Détails du profil Informations forums : Inscription : juin 2010 Messages : 116 Points : 28 Points : 28	Le probleme est dans type il devrait ajouter un = type = d'ailleurs je l'ai mis dans la modif de mon post !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email