Discordances dans un menu et un sous menu [Résolu]

Jean Sympa · 31/12/2010, 12h26

Bonjour à toutes et à tous,

Discordances dans un menu et un sous menu

Quatre options (Accueil, Site Internet, E-commerce, et Graphisme) s'affichent en noir, les autres s'affichent, soulignées, en bleu. Je ne comprends pas pourquoi.

Avec mes remerciements
Cordialement
Papy

e-fitz · 31/12/2010, 13h33

Bonjour,
je te propose de nous donner ton code et du css tel qu'il est à l'heure actuelle plutot qu'une image, car la nous n'avons qu'un bout de code sur une image.

De plus sur cette image, il y a des balises qui ne sont pas fermées.

Bonne journée

Jean Sympa · 31/12/2010, 17h37

Merci e-fitz,

Je suis débutant. J'essaie de créer un sous menu. J'utilise notepad++

Le Code

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
<html >
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css/>
</head>
<body>
<ul>
<ul classe="menu3">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Services</a></li>
 
  <span
    <a herf="#">Site_Internet</a>
	<a herf="#">E-commerce</a>
	<a href="#">Référencement</a>
	<a herf="#">Graphisme</a>
  </span
  <li><a href="#">Portofolio</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</body>
</html>

La feuille de styles

Code :

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

1
2
3
4
5
6
7
8
9
10
11
ul.menu3{
 margin:0;
 padding:0;
 list-style:none;
 }
ul.menu3{
 float:left;
 position: relative;
 width: 600px;
 background-color:#000000;
 }

Autre question
Ai-je bien placé : <ul classe="menu3"> ?

Bonne année
cordialement
Papy

e-fitz · 31/12/2010, 18h04

Bonsoir, attention à l'ecriture de tout !

Notepad ++ color en rouge les attribut et en bleu le balise.

Donc herf ne fonctionne pas, <span n'est pas fermé <span>
Ensuite tu as un <ul> qui n'est jamais fermé il est seul. (et le classE)

Il faut faire attention, les navigateurs (x)html sont assez capricieux.

Donc voici le code corrigé pour le 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
 
<ul class="menu3">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Services</a>
		<ul class="sous_menu">
			<li><a href="#">Site_Internet</a></li>
			<li><a href="#">E-commerce</a></li>
			<li><a href="#">Référencement</a></li>
			<li><a href="#">Graphisme</a></li>
		</ul>
	</li>
	<li><a href="#">Portofolio</a></li>
	<li><a href="#">Clients</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Ton sous menu et dans la même ligne que Service, donc dedans je laisse le <a> pour le lien et je rajoute une liste (<ul>) pour le sous menu.

Concernant le 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
 
ul.menu3 {
	margin:0;
	padding:0;
	list-style:none
}
 
ul.sous_menu{
	display:none;
}
 
ul.menu3 li:hover ul.sous_menu{
	display:block
}

Alors je garde le code du menu3, pour le sous_menu je le cache avec display:none, et quand on est sur une ligne du menu 3 (li:hover) alors si en dessous il y a .sous_menu je l'affiche (display:block).

Donc la suis ul li:hover ul correspond au ul qui est dans le li qui est dans le ul, mais comme on met hover cela veux dire qu'il faut être dessus le li avec la souris.

Le reste est un jeu de position.

Bonne soirée

Jean Sympa · 01/01/2011, 10h44

Merci e-fitz,

La correction permet d'afficher le menu et le sous menu.

Par curiosité je me suis intéressé à la feuille de styles.

Dans ton énoncé, il ny a pas de (

après list_style: none, ni aprèsdisplay:block. Est-ce une erreur?

J'ai neutralisé, successivement, trois commandes, cela n'a pas modifié l'affichage.
Cela signifie-t-il que la feuille de styles n'a aucun effet?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
ul.menu3 {
	margin:0;
	padding:0;
/*	list-style:none */
}
 
ul.sous_menu{
/*	display:none; */
}
 
ul.menu3 li:hover ul.sous_menu{
/*	display:block */

Cordialement
Papy

e-fitz · 01/01/2011, 14h37

Bonjour,

concernant le ; il peut etre considéré comme séparateur d'instruction ou marqueur de fin de ligne.

C'est à dire que dans mon cas je le considére comme séparateur et donc vu que c'est la dernière instruction il ne faut pas en mettre ^^. Les deux écritures sont valides (si je me rappel bien).

Cette partie css :

Code :

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

1
2
3
4
5
6
 
ul.menu3 {
	margin:0;
	padding:0;
/*	list-style:none */
}

Est sans interet pour l'affichage du sous menu, ce qui est important sont les deux blocs suivants :

Code :

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

1
2
3
4
5
6
ul.sous_menu{
/*	display:none; */
}
 
ul.menu3 li:hover ul.sous_menu{
/*	display:block */

Tu dois avoir un bout de code qui correspond à cela si ca fonctionne, car sans ce code ton menu ne peut fonctionner.

Bonne journée

31/12/2010, 13h33	#2
e-fitz Membre habitué Inscription : mai 2009 Messages : 115 Détails du profil Informations forums : Inscription : mai 2009 Messages : 115 Points : 145 Points : 145	Bonjour, je te propose de nous donner ton code et du css tel qu'il est à l'heure actuelle plutot qu'une image, car la nous n'avons qu'un bout de code sur une image. De plus sur cette image, il y a des balises qui ne sont pas fermées. Bonne journée
	00

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