Discordances dans un menu et un sous menu

Version imprimable

31/12/2010, 12h26
Jean Sympa

1 pièce(s) jointe(s)

Discordances dans un menu et un sous menu

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
31/12/2010, 13h33
e-fitz

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

Merci e-fitz,

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

Le Code

Code:

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:

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

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:

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:

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

01/01/2011, 10h44
Jean Sympa
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:

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
01/01/2011, 14h37
e-fitz
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:

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:

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