Dimensions de la balise ul non conforme

**s0h3ck** · 07/09/2014, 17h21

Tout à fait d'accord avec NoSmoking.

J'ajouterais que tu peux aussi utiliser la balise sémantique nav, puisque c'est un menu et il me semble approprié de l'utiliser.
J'insère un lien pour que tu puisses tester la validation de ton document HTML pour comprendre tes erreurs. (Voir ici.)

Bonne journée!

**patricktoulon** · 07/09/2014, 20h06

décidément on ne finira jamais
nosmoking
j'en suis qu'au menu simple en css alors des ul li imbriqués on va attendre un peu
les commentaires sont a l'intérieur de la balise "style" ce ne sont pas des commentaire html
sur un tutoriel il est dit de faire comme ca

s0h3ck je vais regarder le lien pour voir ce vérificateur

voila j'ai enlevé les id "maitre" je me ser du tag "ul" dans le css

voila un aperçu du but final que je voulais atteindre cliquer sur les items du menu skin et voyez
attention la fonction ne fonctionne pas en fichier html mais seulement en fichier hta

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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<!DOCTYPE html> 
<html> 
  <head> 
     <title>suivi Abonnement discussion </title>
 <meta http-equiv="X-UA-Compatible" content="IE=10">
 
 <style type="text/css">
html{    background:#A9E2F3;height:100%;  background: -ms-linear-gradient(top, rgba(242,245,247,1) 9%,rgba(242,245,247,1) 9%,rgba(174,223,249,1) 25%,rgba(41,137,216,1) 63%,rgba(30,87,153,1) 87%); }
/* ========================CONTENEUR DES MENU ================================*/
#fmenu{position:absolute;float:right;top:100px;right:0;height:30px;width:100%;border:solid 0px white;}
/*============================================================================*/
/* ======STYLE DES MENUS  ======= */
#top-toolbarvoix{position:absolute;right:473px;width:150px;}
#top-toolbarFORUM{position:absolute;right:241px;width:230px;}
#top-toolbarskin{position:absolute;right:10px;width:230px;}
/*======================================================================STYLE SKIN 1=====================================*/
.SKIN1{background:rgba(255,255,255,0.2);border-radius:10px 10px 0px 0px;border:solid 1px white;text-align:center;color:white;z-index:1;}
.SKIN1:hover{border-radius:10px;box-shadow:1px 1px 20px rgb(0,200,255);} 
.SKIN1:hover > ul{display:block;border-top:solid 1px white;}
.SKIN1 h1{height:30px;width:100%;margin:0;padding:0;border-radius:10px 10px 0px 0px;text-shadow:2px 2px 5px blue;font-size:20px;}
.SKIN1:hover > h1{background:rgba(0,100,255,0.3);color:rgb(0,255,100);text-shadow:1px 1px 8px blue;}
.SKIN1 ul{display:none;list-style:none;margin:0;padding:0;border-radius:0px 0px 10px 10px;z-index:1;}
.SKIN1 ul li{margin:0;height:30px;padding-top:2px;text-shadow:2px 2px 5px rgb(0,100,255);}
.SKIN1 ul li:hover{background:rgba(0,100,255,0.3);text-shadow:2px 2px 5px cyan;cursor:pointer;box-shadow:1px 1px 20px rgb(0,200,255);}
.SKIN1 ul :last-child{border-radius:0px 0px 10px 10px;}
/*============================== */
/*======================================================================STYLE SKIN 2=====================================*/
.SKIN2{background:rgba(150,255,100,0.2);border-radius:10px 10px 0px 0px;border:solid 1px yellow;text-align:center;color:yellow;z-index:1;}
.SKIN2:hover{border-radius:10px;box-shadow:1px 1px 20px rgb(255,200,0);} 
.SKIN2:hover > ul{display:block;border-top:solid 1px white;}
.SKIN2 h1{height:30px;width:100%;margin:0;padding:0;border-radius:10px 10px 0px 0px;text-shadow:2px 2px 5px orange;font-size:20px;}
.SKIN2:hover > h1{background:rgba(255,50,0,0.3);color:rgb(0,255,100);text-shadow:1px 1px 8px yellow;}
.SKIN2 ul{display:none;list-style:none;margin:0;padding:0;border-radius:0px 0px 10px 10px;z-index:1;}
.SKIN2 ul li{margin:0;height:30px;padding-top:2px;text-shadow:2px 2px 5px rgb(100,50,0);}
.SKIN2 ul li:hover{background:rgba(255,100,50,0.3);text-shadow:2px 2px 5px red;cursor:pointer;box-shadow:1px 1px 20px orange;}
.SKIN2 ul :last-child{border-radius:0px 0px 10px 10px;}
/*============================== */
/*======================================================================STYLE SKIN 3=====================================*/
.SKIN3{background:rgba(0,0,0,1);border-radius:10px 10px 0px 0px;border:solid 1px white;text-align:center;color:white;z-index:1;}
.SKIN3:hover{color:white;border-radius:10px;box-shadow:1px 1px 20px red;} 
.SKIN3:hover > ul{display:block;border-top:solid 1px white;}
.SKIN3 h1{height:30px;width:100%;margin:0;padding:0;border-radius:10px 10px 0px 0px;color:white;text-shadow:2px 2px 5px red;font-size:20px;}
.SKIN3:hover > h1{background:rgba(255,255,255,0.3);color:gray;text-shadow:1px 1px 8px red;}
.SKIN3 ul{display:none;list-style:none;margin:0;padding:0;border-radius:0px 0px 10px 10px;z-index:1;}
.SKIN3 ul li{margin:0;height:30px;padding-top:2px;text-shadow:2px 2px 5px gray;}
.SKIN3 ul li:hover{background:rgba(255,255,255,0.3);text-shadow:2px 2px 5px red;cursor:pointer;box-shadow:1px 1px 20px white;}
.SKIN3 ul :last-child{border-radius:0px 0px 10px 10px;}
/*============================== */
/*======================================================================STYLE SKIN 4=====================================*/
.SKIN4{background:#eaeaea;border-radius:10px 10px 0px 0px;border:solid 1px #577f99;text-align:center;z-index:1;color:#577f99;font-family:verdana,sans-serif;}
.SKIN4:hover{color:#577f99;border-radius:10px;} 
.SKIN4:hover > ul{display:block;border-top:solid 1px #577f99;}
.SKIN4 h1{height:30px;width:100%;margin:0;padding:0;border-radius:10px 10px 0px 0px;color:#577f99;font-size:18px;}
.SKIN4:hover > h1{ background-color:#577f99;color:#eaeaea;border-bottom:solid 1px white;}
.SKIN4 ul{display:none;list-style:none;margin:0;padding:0;border-radius:0px 0px 10px 10px;z-index:1;}
.SKIN4 ul li{margin:0;height:30px;padding-top:2px;}
.SKIN4 ul li:hover{background:#a4bcc7;color:white;cursor:pointer;}
.SKIN4 ul :last-child{border-radius:0px 0px 10px 10px;}
/*============================== */
</style>
</head>
<body>
<div id="fmenu">
<!- ====================MENU POUR LE CHOIX DES VOIX==================-!> 
<DIV class="SKIN1 MENU"id="top-toolbarvoix">
 <h1 id="titre">MENU VOIX</h1>
  <ul>
   <li  onclick="voxe('hortense')">HORTENSE</li>
   <li onclick="voxe('HARMONIE')">HARMONIE</li>
   <li onclick="voxe('VIRGINIE')">VIRGINIE</li>
   <li onclick="voxe('GOGOLETTE')">GOGOLETTE</li>
  </ul>
</div>
<!-===================================================================-!>
<!- ====================MENU POUR LE CHOIX DES forum==================-!> 
<DIV class="SKIN1 MENU" id="top-toolbarFORUM">
 <h1 id="titre">CHOIX DU FORUM</h1>
  <ul >
   <li onclick="CHOIXFORUM('WINDOWS 7')">WINDOWS 8</li>
   <li onclick="CHOIXFORUM('WINDOWS 8')">WINDOWS 7</li>
   <li onclick="AJOUTFORUM()">AJOUTER UN FORUM</li>
  </ul>
</div>
<!-===================================================================-!>
<!- ====================MENU POUR LE CHOIX Du skin====================-!> 
<DIV class="SKIN1 MENU" id="top-toolbarskin">
 <h1 id="titre">CHOIX DU SKIN</h1>
  <ul>
   <li onclick="CHOIXSKIN('SKIN1')">Style-(-blue seven-) </li>
   <li onclick="CHOIXSKIN('SKIN2')">Style-(----wood----)</li>
   <li onclick="CHOIXSKIN('SKIN3')">Style-(-dark-inside)</li>
   <li onclick="CHOIXSKIN('SKIN4')">Style-(-developpez-)</li>
  </ul>
</div>
<!-====================================================================-!>
</div>
</body>
<!script type="text/javascript"></script>
<SCRIPT language="VBSCRIPT">
dim voix,leskin
SUB CHOIXSKIN(skin)
 set groupeclass=document.getelementsbyclassname("MENU")
   for each elem in groupeclass
   elem.classname=skin &" MENU"
   next
leskin=skin
end sub 
</script>
</html>

**s0h3ck** · 07/09/2014, 22h19

Voilà, je te donne un coup de main :

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
<nav>
    <ul>
      <!-- Menu pour le choix des voix -->
      <li class="SKIN1 MENU"id="top-toolbarvoix">MENU VOIX
        <ul>
           <li onclick="voxe('hortense')">HORTENSE</li>
           <li onclick="voxe('HARMONIE')">HARMONIE</li>
           <li onclick="voxe('VIRGINIE')">VIRGINIE</li>
           <li onclick="voxe('GOGOLETTE')">GOGOLETTE</li>
        </ul>
      </li>
      <!-- Menu pour le choix des forum-->
      <li class="SKIN1 MENU" id="top-toolbarFORUM">CHOIX DU FORUM
        <ul>
           <li onclick="CHOIXFORUM('WINDOWS 7')">WINDOWS 8</li>
           <li onclick="CHOIXFORUM('WINDOWS 8')">WINDOWS 7</li>
           <li onclick="AJOUTFORUM()">AJOUTER UN FORUM</li>
        </ul>
      </li>
      <!-- Menu pour le choix du skin  -->
      <li class="SKIN1 MENU" id="top-toolbarskin">CHOIX DU SKIN
        <ul>
           <li onclick="CHOIXSKIN('SKIN1')">Style-(-blue seven-) </li>
           <li onclick="CHOIXSKIN('SKIN2')">Style-(----wood----)</li>
           <li onclick="CHOIXSKIN('SKIN3')">Style-(-dark-inside)</li>
           <li onclick="CHOIXSKIN('SKIN4')">Style-(-developpez-)</li>
        </ul>
      </li>
    </ul>
  </nav>

Après, il resterait à faire des petites modifications au niveau de la feuille de style en cascade (CSS) et le tour serait joué!
Bonne continuité =)

**patricktoulon** · 07/09/2014, 23h41

merci s0h3ck pour le coup de main

Mais ca n'est pas la partie HTML du menu qui m'est difficile
c'est la partie css
celle la je l'avais déjà faite selon l'exemple de nosmoking chez toi la balise nav que je ne connaissais pas

mon soucis c'est de mettre les items principaux à l'horizontale et les sub items en verticale

j'ai essayé plein de truc et je me suis embrouillé

bon je suis débutant dans ce langage alors je vais certainement cafouiller encore pas mal de fois

**s0h3ck** · 08/09/2014, 01h11

Bonjour,

Je te dirais de commencer par séparé le code HTML du CSS.
Ensuite, dans ta feuille de style en cascade (CSS), tu pourrais espacer le tout.

Voici un exemple si on prend le premier sélecteur :

Code css :

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

1
2
html{    background:#A9E2F3;height:100%;  background: -ms-linear-gradient(top, rgba(242,245,247,1) 9%,rgba(242,245,247,1) 9%,rgba(174,223,249,1) 25%,rgba(41,137,216,1) 63%,rgba(30,87,153,1) 87%); 
}

Et maintenant :

Code css :

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

1
2
3
4
5
6
html {
    background:#A9E2F3;
    height:100%;
    background: -ms-linear-gradient(top, rgba(242,245,247,1) 9%,rgba(242,245,247,1) 9%,rgba(174,223,249,1) 25%,rgba(41,137,216,1) 63%,rgba(30,87,153,1) 87%);
}

Tu ne vois peut-être pas les avantages à première vue, mais je t'assure que ce sera vraiment plus efficace lorsqu'il viendra le temps de déboguer par la suite. Tu te rendra compte que tu fais beaucoup de répétitions et tu trouveras des astuces de simplifications dans ton code. Intéressant, n'est-ce pas ?

Au boulot !

Bonne continuité,
s0h3ck.

**patricktoulon** · 08/09/2014, 03h24

re

ca c'est vraiment marrant alors

figure toi que justement quand j'ai démarré je mettais 1 ou 2 fonction maxi par ligne

mais quand on joue avec ces satanés menu on se retrouve vite un paquet avec de lignes
et c'est justement mon problème a cause des (bascule, oui/non, etc.)je me perd facilement
c'est pour ca que je met tout sur une ligne et les espace d' un saut de ligne
c'est plus facile pour moi c'est peu être et même certainement pas la bonne méthode
pour les répétitions effectivement je l'ai déjà remarqué c'est sans doute parce que je métrise mal le hinnerit(propriété du parent valable pour tout ces enfants )

mais c'est avant tout un manque de vocabulaire dans ce langage qui me manque
et les tuto sont soit nul a ch.... ou incompréhensible pour un débutant comme moi
mais je travaille et ca finira par rentrer
Merci pour ton aide en tout cas

**patricktoulon** · 08/09/2014, 10h46

bonjour s0h3ck et Nosmoking

youpi j'ai trouvé

ce matin j'ai fait une recherche et j'ai trouvé les expressions qu'il fallait utiliser
pour avoir les titre horizontaux avec les subi tems en dessous
effectivement quand on sait ca deviens plus facile
selon le code de s0h3ck bien que j'ai ajouter des class la structure n'a pas changé

voila un début avec des ul li imbriqués

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html> 
<html> 
  <head> 
     <title>menu rampe imbriqué</title>
 <meta http-equiv="X-UA-Compatible" content="IE=10">
 
 <style type="text/css">
ul{list-style:none;margin:0;padding:0;
 white-space: nowrap;text-align:center;}
.MENU{float:left;position:relative;width:250px;
background:rgba(100,100,200,0.2);
border-radius:10px 10px 0px 0px;}
.submenu li{background:red;}
.submenu:last-child{border-radius:0px 0px 10px 10px;} 
.submenu{display:none;}
 
.MENU:hover > .submenu{display:block;white-space: nowrap;left:50px;}
.menu:hover{border-radius: 10px 10px 10px 10px;}
</style>
</head>
<body>
<div id ="menu">
<nav>
    <ul>
      <!-- Menu pour le choix des voix -->
      <li class="SKIN1 MENU"id="top-toolbarvoix">MENU VOIX
        <ul class="submenu">
           <li onclick="voxe('hortense')">HORTENSE</li>
           <li onclick="voxe('HARMONIE')">HARMONIE</li>
           <li onclick="voxe('VIRGINIE')">VIRGINIE</li>
           <li onclick="voxe('GOGOLETTE')">GOGOLETTE</li>
        </ul>
      </li>
      <!-- Menu pour le choix des forum-->
      <li class="SKIN1 MENU" id="top-toolbarFORUM">CHOIX DU FORUM
        <ul class="submenu">
           <li onclick="CHOIXFORUM('WINDOWS 7')">WINDOWS 8</li>
           <li onclick="CHOIXFORUM('WINDOWS 8')">WINDOWS 7</li>
           <li onclick="AJOUTFORUM()">AJOUTER UN FORUM</li>
        </ul>
      </li>
      <!-- Menu pour le choix du skin  -->
      <li class="SKIN1 MENU" id="top-toolbarskin">CHOIX DU SKIN
        <ul class="submenu">
           <li onclick="CHOIXSKIN('SKIN1')">Style-(-blue seven-) </li>
           <li onclick="CHOIXSKIN('SKIN2')">Style-(----wood----)</li>
           <li onclick="CHOIXSKIN('SKIN3')">Style-(-dark-inside)</li>
           <li onclick="CHOIXSKIN('SKIN4')">Style-(-developpez-)</li>
        </ul>
      </li>
    </ul>
  </nav>
</div>
</body>
</html>

la chose est elle bonne cette fois ci ??

**s0h3ck** · 08/09/2014, 13h27

Bonjour,

Espace nécessaire entre le id et la classe : <li class="SKIN1 MENU"id="top-toolbarvoix">
Solution : <li class="SKIN1 MENU" id="top-toolbarvoix">
Enlever le <div id ="menu"> (et la fermeture de la balise bien entendu) si possible.
Séparer le code HTML du CSS.

Ensuite, assure-toi d'avoir une feuille de style en cascade espacée, aérée, propre et avec le moins de répétition possible.

Bonne continuité,
s0h3ck.

**patricktoulon** · 08/09/2014, 16h50

re bonjour

Enlever le <div id ="menu"> (et la fermeture de la balise bien entendu) si possible.

pourquoi veux tu que je l'enlève ????

il me sert a placer le tout quelque part dans la page il est en position absolue
et pouvoir le déplacer dynamiquement selon certaine action

c'est quand même plus simple de déplacer un div qu' un menu en rectifiant le css non?
surtout que maintenant j'en suis presque arrivé a la même chose que avec les balises div
sachant que je gère par le parent ca risque d'être coton de tout reprendre
en tout cas j'ai bien compris le principe de menu horizontal avec sub items vertical

les principaux float left voir right dans leur conteneur il restent alignés sur la même ligne
et le first enfant display block pour dérouler les sub items
c'est vraiment simple
bon je continu de le mettre au propre
et pour la séparation des codes (css/html) j'avoue que ca me gène un peu, mon fichier HTA doit être transportable
mais je vais réfléchir a la question en fonction de l'évolution
et justement en parlant de répétition:

j'ai le hover de la class SKIN X qui nécessite 3 lignes

les 2 premières agissent sur un autre élément la 3 Emme sur lui même

y aurait il un moyen de simplifier ca ???

Code :

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

1
2
3
.SKIN1:hover > .submenu{display:block;}
.SKIN1:hover > h1{background:rgba(0,50,255,0.2);color:rgb(0,255,100);}
.SKIN1:hover{border-radius: 10px 10px 10px 10px;box-shadow:1px 1px 20px rgb(0,200,255);}

**NoSmoking** · 08/09/2014, 19h06

pourquoi veux tu que je l'enlève ????

La balise NAV remplace ta DIV dans ton cas et tu pourras en faire la même chose.

y aurait il un moyen de simplifier ca ???

Concernant tes directives sur le :hover il te faut bien à partir d'un même événement cibler différentes actions donc tu ne peut pas dans ce cas créer de raccourci, même action mais résultats différents (propriété et valeur).

Une bonne habitude également à prendre est de déclarer un <meta charset="UTF-8"> pour tes futurs problème d'accents

**patricktoulon** · 08/09/2014, 21h26

bonjour Nosmoking

ok c'est bien enregistré pour la balise nav si je peut en faire autant qu'avec un div

pour le hover bon c'est pas grave on laisse comme ca ,c'était juste parce que j'ai vu des exemples de code avec des "+" dans le css du genre "#element1 + .element2 ,div1,div2{........}"

pour la balise meta ok

demain je donnerait un model du skin1(blue seven) au propre avec les ul li imbriqués

j'ai juste un souci avec le last-child dans le css qui ne joue pas son rôle

Code :

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

.MENU.submenu:last-child{border-radius:0px 0px 10px 10px;}

les arrondi l'ors du hover devient carré hors je change juste la couleur du background dans le hover

Code :

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

1
2
3
4
5
6
7
8
9
.SKIN1:hover > .submenu{display:block;}
 
.MENU.submenu:last-child{border-radius:0px 0px 10px 10px;} 
 
.SKIN1 li{background:rgba(255,255,255,0.2);height:30px;}           /*tout les li ont le même background même le last-child */
 
.SKIN1 .submenu li{color:white;text-shadow:2px 2px 5px blue;}    /* couleur blanche et ombre au texte  même le last-child*/
 
.SKIN1 .submenu li:hover{background:rgba(0,50,255,0.2);box-shadow:1px 1px 20px rgb(0,200,255);}

si je réduit la transparence du background on voit bien des angles droit sur le last-child

je n'arrive pas a comprendre pourquoi

**patricktoulon** · 09/09/2014, 10h00

bonjour a tous

voila un exemple du menu horizontal avec items verticaux model (blue seven)
conçu avec le ul li imbriqués

j'ai aéré le code css
Mais j'ai toujours un petit soucis pour les angles arrondis du dernier li de chaque menu
bon c'est léger puisque due au fait que je joue avec des background transparent
mais c'est dommage avec le model conçu avec des div je n'avais pas ce soucis

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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html> 
<html> 
  <head> 
     <title>menu rampe horizontal ul li imbriqués</title>
 
      <meta http-equiv="X-UA-Compatible" content="IE=10">
      <meta charset="UTF-8">
 
<style type="text/css">
#fondplan{
 position:absolute;
height:99.6%;width:99.7%;
right:0;left:0;top:0 ;
 border:solid 2px red;
}
.skSKIN1{
background:#A9E2F3;
background: -ms-linear-gradient(top, rgba(242,245,247,1) 9%,rgba(242,245,247,1) 9%,rgba(174,223,249,1) 25%,rgba(41,137,216,1) 63%,rgba(30,87,153,1) 87%); 
}
.skSKIN3{
background: -ms-linear-gradient(top, rgba(239,239,234,1) 0%,rgba(55,55,56,1) 10%,rgba(55,55,56,1) 12%,rgba(44,48,51,1) 29%,rgba(35,46,56,1) 62%,rgba(0,0,0,1) 89%);
}
.skSKIN2{
background: -ms-linear-gradient(top, rgba(151,219,4,1) 2%,rgba(150,219,2,1) 15%,rgba(129,183,3,1) 48%,rgba(129,183,3,1) 48%,rgba(71,99,70,1) 89%);
}
#contmenu{
position:absolute;float:right;
top:100px;right:0;height:30px;width:766PX;
}
ul{
list-style:none;
margin:0;padding:0; 
white-space: nowrap;
text-align:center;
}
.SKIN1 .submenu{display:none;}
.SKIN1{
float:LEFT;position:relative;width:250px;
border-radius:10px 10px 0px 0px;border:solid 2px white;
}
 
.SKIN1 .submenu:last-child{
border-radius:0px 0px 10px 10px;
} 
 
.SKIN1 li{
background:rgba(255,255,255,0.2);height:30px;
}
 
.SKIN1 .submenu li{
color:white;text-shadow:2px 2px 5px blue;
}
 
.SKIN1 .submenu li:hover{
background:rgba(0,50,255,0.2);box-shadow:1px 1px 20px rgb(0,200,255);
} 
.SKIN1:hover > .submenu{
display:block;
}
 
.SKIN1:hover > h1{
background:rgba(0,50,255,0.2);color:rgb(0,255,100);
}
 
.SKIN1:hover{
border-radius: 10px 10px 10px 10px;box-shadow:1px 1px 20px rgb(0,200,255);
}
 
.SKIN1 h1{
height:30px;width:100%;margin:0;padding:0;
border-radius:10px 10px 0px 0px;color:white;
background:rgba(255,255,255,0.4);text-shadow:2px 2px 5px blue;font-size:20px;
}
</style>
</head>
<body>
   <!-============fond pourl'arriere plan'==========!>
<div id="fondplan" class="skSKIN1 fonpl">
</div>
   <!-============================================-!>
 
<nav id ="contmenu">
    <ul>
           <!--=== Menu pour le choix des voix === -->
 
   <li class="SKIN1 MENU" id="top-toolbarvoix">
         <h1>Menu VOIX</H1> 
  <ul class="submenu">
             <li onclick="voxe('hortense')">HORTENSE</li>
             <li onclick="voxe('HARMONIE')">HARMONIE</li>
             <li onclick="voxe('VIRGINIE')">VIRGINIE</li>
             <li onclick="voxe('GOGOLETTE')">GOGOLETTE</li>
         </ul>
         </li>
            <!--=== Menu pour le choix des forum ===-->
 
  <li class="SKIN1 MENU" id="top-toolbarFORUM">
  <h1>CHOIX DU FORUM</H1>
         <ul class="submenu">
             <li onclick="CHOIXFORUM('WINDOWS 7')">WINDOWS 8</li>
             <li onclick="CHOIXFORUM('WINDOWS 8')">WINDOWS 7</li>
             <li onclick="AJOUTFORUM()">AJOUTER UN FORUM</li>
         </ul>
        </li>
            <!--=== Menu pour le choix du skin === -->
 
  <li class="SKIN1 MENU" id="top-toolbarskin">
  <h1>CHOIX DU SKIN</H1>
         <ul class="submenu">
             <li onclick="CHOIXSKIN('SKIN1')">Style-(-blue seven-) </li>
              <li onclick="CHOIXSKIN('SKIN2')">Style-(----wood----)</li>
             <li onclick="CHOIXSKIN('SKIN3')">Style-(-dark-inside)</li>
             <li onclick="CHOIXSKIN('SKIN4')">Style-(-developpez-)</li>
         </ul>
       </li>
    </ul>
  </nav>
</body>
</html>

**NoSmoking** · 09/09/2014, 19h21

1st remarque :

Code html :

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

1
2
3
4
   <!-============fond pourl'arriere plan'==========!>
<div id="fondplan" class="skSKIN1 fonpl">
</div>
   <!-============================================-!>

tes commentaires HTML sont toujours invalides .

2nd remarque :
> et + ne sont pas, en CSS, des opérateurs mathématique mais respectivement un sélecteur d'enfant et un sélecteur d'enfant adjacent.

3th remarque :
cela concerne ton dernier soucis

Code :

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

1
2
3
.SKIN1 .submenu:last-child{
  border-radius:0px 0px 10px 10px;
}

dans ce cas last-child ne cible rien, il te faut préciser le type d'élément étant le last-child donc

Code :

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

1
2
3
.SKIN1 .submenu li:last-child{
    border-radius:0px 0px 10px 10px;
}

...et pour tes longues soirées d'hiver Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3

Dimensions de la balise ul non conforme

Dimensionnement en CSS

Discussions similaires

Partager

Partager