Dimensions de la balise ul non conforme

**patricktoulon** · 02/09/2014, 13h42

bonjour a tous
débutant en css je me colle a asticoté les menu en css

j'ai un soucis avec celui ci
je n'arrive pas a dimensionner la balise "ul" (contenant tout les items )
le ul se retrouve toujours plus large que le div et le titre j'ai tout essayé mais rien n'y fait
pourtant les items du "ul" (les li)sont bien dimensionnés
voila le code:

Code html :

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

1
2
3
4
5
6
<!DOCTYPE html> 
<html> 
 <title>suivi Abonnement discussion </title>
 <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=10">
 <style type="text/css">

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
html{background:#81DAF5;}
#top-toolbar {position:absolute;left:30%;width:20%;}
#top-toolbar li{list-style-type:none;height:30px; width: 100%;}
#top-toolbar  li:hover > ul { display: block;}
#top-toolbar ul {
 background: rgba(255,255,255,0.2); margin-left: 0px;border-bottom-right-radius: 9px; border-bottom-left-radius: 9px; border: 1px solid white;
 top: 30px; width: 100%;margin-top:0px;display: none; position: absolute; box-shadow: 0px 1px 3px rgba(0,0,255,0.3);}
 
#top-toolbar ul li:hover {background: rgba(255,255, 255,0.3); color: rgb(255, 255, 255); margin-left:-49px;text-shadow: red 5px 5px 5px;color:blue;}
 
#top-toolbar ul li {padding-bottom: 3px; float: none;margin-left:-47px;color: rgb(255, 255, 255);text-shadow: blue 5px 5px 5px;}
#top-toolbar ul li:last-child { border-bottom-right-radius: 9px; border-bottom-left-radius: 9px;}
#hammenu{text-align:center;background:rgba(255,255,255,0.5);position: absolute;width:15%;border-top-left-radius: 9px; border-top-right-radius: 9px;}

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
</style>
</head>
<body>
   <DIV id="top-toolbar">
     <li id="hammenu" class="radius btn">MENU
      <ul>
      <li>bouton 1</li>
      <li>bouton 2</li>
      <li>bouton 3</li>
      <li>bouton 4</li>
      </ul>
     </li>
   </DIV>
</body
</html>

et voila l'aperçu du problème
si quelqu'un a une idée je suis preneur ca fait 2 jour que je plombe dessus

attention le code est destiné pour un HTA d'où la balise meta
Pièce jointe 155225

**black-hawk-down** · 02/09/2014, 14h30

Salut,

il y a un problème d’imbrication de ta liste.
Un <li> est TOUJOURS dans un <ul>. Ce qui n'est pas ton cas. Ton premier <li> est seul.

**patricktoulon** · 02/09/2014, 15h32

salut black-hawk-down

ok mais c'est quand même lui le maitre qui fait apparaitre le reste par son over ??
si je l'enlève je n'ai plus rien
je me doutais bien que c'était un souci de structure mais je n'ai aucunes idée de comment faire pour obtenir le résultat comme la capture et j'en ai essayé pas mal (certainement pas la bonne )

**NoSmoking** · 02/09/2014, 19h32

Bonjour,
il te faut respecter la structure <UL><LI></LI></UL>, si plus rien ne s'affiche c'est dans ce cas à cause de mauvais sélecteur dans le CSS.

Ainsi ton

Code :

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

#top-toolbar  ul {...}

devient

Code :

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

#top-toolbar  ul ul{...}

Pour le reste il te suffit de faire un reset classique

Code :

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

1
2
3
4
5
#top-toolbar ul {
  padding:0;
  margin:0;
  list-style: none;
}

pour le reste je pense que tu devrais y arriver en supprimant tout ce qui entraine des décalages, je pense par exemple à des margin-left:-47px vues dans ton code.

**patricktoulon** · 03/09/2014, 10h08

Bonjour no smoking

ok mais la je suis encore plus embrouillé
je comprend bien que la structure "ul li" ici n'est pas respectée

mais le li maitre est quand même celui qui rend visible le reste
est il n'est pas en dehors c'est le ul qui est a l'intérieur puisque le li est fermer après le ul

j'ai essayé avec une autre balise ca ne marche pas

pourtant ,a savoir que cet exemple je l'ai récupéré sur une page internet

et les margin-left sont obligatoires sinon les li sont décalés
bref je suis en train de me rendre fou

un exemple simple serait plus parlant je crois

[EDIT]
JE VIENS DE TELECHARGER UN EDITEUR DE MENU CSS
ET LE RESULTAT ET QUE LE LI MAITRE ENGLOBE BIEN LE UL

Voila 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
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" dir="ltr">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>css3menu.com</title>
  <!-- Start css3menu.com HEAD section -->
 <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
 <!-- End css3menu.com HEAD section -->
 
</head>
<body style="background-color:#EBEBEB">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label>
 <li class="toplast"><a style="height:18px;line-height:18px;"><span>Item 0</span></a>
 <ul>
  <li><a href="#">Item 0 3</a></li>
  <li><a href="#">Item 0 2</a></li>
  <li><a href="#">Item 0 1</a></li>
  <li><a href="#">Item 0 0</a></li>
 </ul></li>
</ul><p class="_css3m"><a>dropdown menu css</a></p>
<!-- End css3menu.com BODY section -->
</body>
</html>

**patricktoulon** · 03/09/2014, 12h15

re
bonjour a tous

bon après examen du code généré par le css menu editor et de son rendu
il semblerait que ca soit normal en fait il ne faut pas mettre la même largeur du li(maitre ) et du ul (first-child)
je galère depuis trois jour pour rien

allez résolu

et la différence du code généré avec menu css editor et le mien c'est le parent (first)
chez moi un div et dans css editor un UL
mais j'ai fait l'essai ca change rien

reste avoir ce décalage du background au over sur le li

Merci a tous

**patricktoulon** · 03/09/2014, 14h34

re
voila je reviens avec un menu parfait (visuellement )
en fait je m'acharnais a vouloir styler le " ul" contenant les "li" hors c'était les "li" qu'il fallait styler

j'ai mis des commentaires dans le code qui explique et démontre
en fait si on ajoute un width equivalent au reste et une couleur de fond au "UL" on se rend bien compte que ca n'est pas bon
bon voila mon beau et tout premier menu "glass"
vue avec item survolé
Nom : vue avec item survolé.jpg
Affichages : 117
Taille : 16,4 Ko

Nom : vue avec item survolé.jpg
Affichages : 117
Taille : 16,4 Ko

et son 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html> 
<html> 
 <title>suivi Abonnement discussion </title>
 <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=10">
 <style type="text/css">
html{background:#81DAF5;}
#top-toolbar {position:absolute;left:30%;width:150px;}
#top-toolbar li {list-style-type:none;height:30px; width: 150px;border-left: solid 1px white;border-right: solid 1px white;float:left;}
#top-toolbar #maitre:hover > ul { display: block; }
#top-toolbar #maitre:hover{background: rgba(0,0,255,0.2);}
#maitre{text-align:center;background:rgba(255,255,255,0.1);position: absolute;width:150px;border-radius: 9px 9px 0px 0px;border: solid 1px   white}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*ici on ne style plus le ul conteneur on laisse juste les propriétés indispensable*/
/* on a même réduit sa largeur a 1 afin d'avoir un mouse out sur les li  plus precis*/ 
/* si on met le width a 150 comme le reste et si on ajoute une couleur de fond on se rend compte que le ul est sur dimentionné en largeur*/ 
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#top-toolbar  li ul { margin-left: 0px;top: 30px; width: 1px;margin-top:0px;display: none; position: absolute;}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#top-toolbar li ul li {background: rgba(255,255, 255,0.2);padding-bottom: 0px; margin-left:-51px;color: rgb(255, 255, 255);text-shadow: blue 5px 5px 5px;width:150px;float:left;}
#top-toolbar li ul li:last-child { border-radius: 0px 0px 9px 9px;width:150px;border-bottom: solid 1px white}
#top-toolbar li ul li:hover {background: rgba(255,255, 255,0.5); color: rgb(255, 255, 255); margin-left:-51px;text-shadow: red 5px 5px 5px;color:blue;
width:150px;float:left;cursor:pointer;box-shadow: 5px 5px 5px rgba(0,0,255,0.3);font-style:italic;}
</style>
</head>
<body>
 <DIV id="top-toolbar">
   <li id="maitre" class="radius btn">MENU
   <ul >
   <li>bouton 1</li>
   <li>bouton 2</li>
   <li>bouton 3</li>
   <li>bouton 4</li>
   </ul>
  </li>
 </DIV>    
</body
</html>

merci a tous

**black-hawk-down** · 03/09/2014, 17h01

Tu ne respectes toujours pas de structure correcte pour ta liste.

Inspire toi des conseils Ô combien sage de NoSmoking.

Là ça fonctionne parce que les navigateurs sont permissifs mais le jour où ils ne le seront plus, tout va tomber.

**patricktoulon** · 04/09/2014, 00h49

bonjour black-hawk-down

je le répète je veux bien moi mais même le menu css editor mele sort comme ca

c'est d'ailleurs a partir de la base de ce que m'a sorti l'app que j'ai abouti

il y a bien un UL parent du li qui englobe le tout sur la version de css menu editor de la même manière que moi avec un div mais j'ai fait l'essai et même si ca marche mais le ul n'est pas de la bonne dimension
en gros css menu editor me sort

Code :

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

j'ai lu dans beaucoup d'endroit sur le net que le soucis était connu
alors après je suis obligé de trafiquer dans le css avec des margin ,pad ding a gogo

en plus pour les navigateur c'est pas trop grave j'ai dis des le départ que le fichier de destination était un HTA (html application)qui supporte tout les langage a condition de placer quelque balises meta le cas échéant

mais je voudrais bien voir un exemple qui fonctionne avec le li a l'intérieur du ul

tu pourrais pas me faire un exemple sans fioriture juste un simple avec 2 items au moins

**patricktoulon** · 04/09/2014, 10h05

re bonjour a tous
voila un exemple hyper simple avec les li a l'intérieur de la balise ul
et comme on peut le voir sur la capture le ul est plus grand et les li sont décalé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
<!DOCTYPE html> 
<html> 
 <title>suivi Abonnement discussion </title>
 <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=10">
 <style type="text/css">
html{background:gray;}
#top-toolbar{width:200px;background:rgba(0,0,0,0.2);border-radius:10px 10px 0px 0px;border:solid 1px black;text-align:center;}
#top-toolbar:hover > ul{display:block;}
#maitre{width:200px;background:cyan;display:none;list-style:none;margin-top:0}
li:hover{background:rgba(0,0,255,0.3);}
</style>
</head>
<body>
 <DIV id="top-toolbar">MENU
 
   <ul id="maitre" >
   <li>toto</li>
   <li>toto</li>
   <li>toto</li>
   <li>toto</li>
   <li>toto</li>
</ul>
</div>
</body>
</html>

ce qui démontre bien ce que je dis depuis le début
on est obligé de réduire le width du ul pour l'adapter au div
et les margin-left sont obligatoires sinon les items sont décalés
a moins qui il y est une fonction du genre Inside ou quelque chose comme ca
Pièce jointe 155368

allez un exemple de votre part serait le bien venue afin d'aider mon cerveau a ne pas fumer
ou une explication claire et net sur ce point (ul width/div width )

**Bisûnûrs** · 04/09/2014, 10h19

C'est surtout parce que le ul a des marges par défaut sur les navigateurs et il convient de les supprimer avec un margin:0; et un padding:0; sur le ul.

**patricktoulon** · 04/09/2014, 11h01

re

et ben voila une réponse qu'elle est précise et bonne surtout

comme quoi vaut mieux un qui sait que dix qui cherchent

Merci BEAUCOUP!!! Bisûnûrs

Maintenant je le saurais le ul n'a pas de propriété margin et padding a la base il faut donc le préciser

tu viens de faire un homme heureux je peux passer au cours css suivant

**Bisûnûrs** · 04/09/2014, 11h30

Envoyé par patricktoulon

Maintenant je le saurais le ul n'a pas de propriété margin et padding a la base il faut donc le préciser

Justement si. Le ul a une valeur par défaut de margin, que les navigateurs eux-mêmes attribue. Tu peux le voir par exemple avec Firebug dans l'onglet "Calculé" (sur la droite), quand tu regardes le style d'un élément HTML.

**Bovino** · 04/09/2014, 11h47

Envoyé par Bisûnûrs

Tu peux le voir par exemple avec Firebug

Envoyé par patricktoulon

le code est destiné pour un HTA

Dans un HTA, c'est pas évident d'ouvrir Firebug.

**Bisûnûrs** · 04/09/2014, 11h50

Arrête, sur les captures on voit IE en fond, donc c'est pareil.

**patricktoulon** · 04/09/2014, 12h20

RE
on voit IE en fond d'ecran ????????

fire debug / tu a raison je l'ai sauver en html on le vois dans F12(partie droite )

en tout cas ca y est, la structure est maintenant bonne j'ai réussi a faire le même que le dernier

je me suis servi d'une balise "ol" pour faire une bande haute pour le titre avec d'autre balises je n'arrivais pas styler

voila le code complet du menu:

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
 
<!DOCTYPE html> 
<html> 
 <title>suivi Abonnement discussion </title>
 <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=10">
 <style type="text/css">
html{background:#81DAF5;}
#top-toolbar1{width:30%;background:rgba(255,255,255,0.2);border-radius:10px 10px 0px 0px;border:solid 1px white;text-align:center;margin:0;padding:0;color:white}
#top-toolbar1:hover{border-radius:10px;box-shadow:1px 1px 20px rgb(0,200,255);} 
#top-toolbar1:hover > ul{display:block;border-top:solid 1px white;}
#top-toolbar1 ol{width:100%;margin:0;padding:0;border-radius:10px 10px 0px 0px;text-shadow:2px 2px 5px blue;}
#top-toolbar1:hover > ol{background:rgba(0,100,255,0.2);}
#maitre{display:none;list-style:none;margin:0;padding:0;border-radius:0px 0px 10px 10px;}
#maitre li{margin:0;height:25px;padding-top:2px;text-shadow:2px 2px 5px rgb(0,100,255);}
#maitre li:hover{background:rgba(0,100,255,0.3);text-shadow:2px 2px 5px cyan;}
#maitre #last{border-radius:0px 0px 10px 10px;}
#maitre #last:hover{border-radius:0px 0px 10px 10px;}
</style>
</head>
<body>
 <DIV id="top-toolbar1"><ol id="titre">MENU VOIX</ol>
 
   <ul id="maitre" >
   <li>HORTENSE</li>
   <li>HARMONIE</li>
   <li>VIRGINIE</li>
   <li id="last">GOGOLETTE</li>
 
</ul>
</div>
</body>
</html>

trop content moi être

**NoSmoking** · 06/09/2014, 15h53

Je constate qu'il faudrait peut être que tu lises attentivement les réponses faites

...et les margin-left sont obligatoires sinon les items sont décalés
a moins qui il y est une fonction du genre Inside ...

Envoyé par NoSmoking

Pour le reste il te suffit de faire un reset classique

Code :

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

1
2
3
4
5
#top-toolbar ul {
  padding:0;
  margin:0;
  list-style: none;
}

Je constate également que la structure n'est toujours pas valide, ce qui a été dit pour les UL est valable pour les OL à savoir que la structure doit être <OL><LI></LI></OL> ce qui n'est pas le cas dans ta ligne

Code html :

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

<ol id="titre">MENU VOIX</ol>

de plus il existe une balise, Hx, qui correspondrait mieux à ton besoin.
Donc au final tu pourrais avoir

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="top-toolbar1">
    <h1>MENU VOIX</h1>
    <ul id="maitre">
        <li>HORTENSE</li>
        <li>HARMONIE</li>
        <li>VIRGINIE</li>
        <li>GOGOLETTE</li>
    </ul>
</div>

tu noteras que j'ai supprimé l'ID sur le dernier LI qui est atteignable en CSS via un #maitre li:last-child {, donc

Code :

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

1
2
3
4
/* evite l'utilsation d'une ID sur le dernier LI IE9+ */
#maitre li:last-child {
    border-radius:0px 0px 10px 10px;
}

et pour le H1

Code :

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

1
2
3
4
5
6
7
#top-toolbar1 h1 {
    font-size:1em;
    margin:0;
    padding:0;
    border-radius:10px 10px 0px 0px;
    text-shadow:2px 2px 5px blue;
}

Concernant l'utilisation des padding-top associé à une height:25px sur les LI, l'utilisation d'un line-height:2em appliqué au conteneur me semble plus judicieux.

Pour finir il me semble que de fixer la largeur du conteneur, <DIV id="top-toolbar">, en % n'est pas forcément habile.

**patricktoulon** · 07/09/2014, 02h12

Bonjour no smoking

ok je prend en compte tout ca

j'avais essayé déjà avec "h1" en fermant sa balise avant le ul ca ne fonctionnait plus le déroulement
même en déclenchant le display block a partir de lui
mais pour les pourcentage je veux le laisser les plaques(div) doivent être redimensionné en même tant que la fenêtre ainsi que leur position (une sorte de auto resize )

bon je vais revoir tout ca

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

bonjour Nosmoking

voila j'ai refait le tout dans un fichier html et effectivement le rendu et légèrement différent
certaines erreurs aussi ne sont pas permises a l'inverse d'un hta qui m'affichait correctement

j'ai aussi réussi a réduire le code css a un seul menu valable pour tous

j'ai utiliser un H1 pour l'entête du menu c'est parfait
j'ai repris l'utilisation de last-child

en fait il fallait simplement donner une valeur commune aux menus

donc a part pour le placement du menu je n'utilise plus son id mais je lui ai ajouter une classe
et le css est gerer par le nom de la classe (identique a tous les menus )
la maintenant dans un html et un hta j'ai a peu près le même rendu

voila 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
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
 
<!DOCTYPE html> 
<html> 
 <title>suivi Abonnement discussion </title>
 <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<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:25px;width:100%;border:solid 0px white;}
/*============================================================================*/
/* ======STYLE DES MENUS  ======= */
#top-toolbarvoix{position:absolute;left:25%;width:20%;}
#top-toolbarFORUM{position:absolute;left:45%;width:25%;}
#top-toolbarskin{position:absolute;left:70%;width:25%;}
.menu{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;}
.menu:hover{border-radius:10px;box-shadow:1px 1px 20px rgb(0,200,255);} 
.menu:hover > #maitre{display:block;border-top:solid 1px white;}
.menu h1{width:100%;margin:0;padding:0;border-radius:10px 10px 0px 0px;text-shadow:2px 2px 5px blue;font-size:20px;}
.menu:hover > h1{background:rgba(0,100,255,0.2);color:rgb(0,255,100);text-shadow:1px 1px 8px blue;}
.menu #maitre{display:none;list-style:none;margin:0;padding:0;border-radius:0px 0px 10px 10px;z-index:1;}
.menu #maitre li{margin:0;height:30px;padding-top:2px;text-shadow:2px 2px 5px rgb(0,100,255);}
.menu #maitre 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);}
.menu #maitre :last-child{border-radius:0px 0px 10px 10px;}
/*============================== */
</style>
</head>
<body>
<div id="fmenu">
<!- ====================MENU POUR LE CHOIX DES VOIX==================-!> 
<DIV class="menu"id="top-toolbarvoix"><h1 id="titre">MENU VOIX</h1>
 <ul id="maitre" >
  <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="menu" id="top-toolbarFORUM"><h1 id="titre">CHOIX DU FORUM</h1>
 <ul id="maitre" >
  <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="menu" id="top-toolbarskin"><h1 id="titre">CHOIX DU SKIN</h1>
 <ul id="maitre" >
  <li onclick="CHOIXSKIN('SKIN1')">SKIN1</li>
  <li onclick="CHOIXSKIN('SKIN2')">SKIN2</li>
  <li onclick="CHOIXSKIN('SKIN3')">SKIN3</li>
</ul>
</div>
<!-==================================================================-!>
</div>
</body>
</html>

il est beau non?

un grand merci pour ton aide

**NoSmoking** · 07/09/2014, 16h58

il est beau non?

je ne me prononcerais pas sur le coté esthétique de ton menu mais sur le code de ta page
- <title> doit être dans la partie <head></head>.
- tes commentaires HTML ne sont pas conformes .
- une ID doit ETRE UNIQUE dans une page.
- il manquerait presque un cursor: pointer sur tes H1, juste pour le "look" au survol.
- pour la structure, tu aurais pu utiliser des UL LI imbriquées

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
  <ul id="menu">
      <li>Menu...#1
          <ul>
              <li><a href="#">Sous menu 1.1</a></li>
              <li><a href="#">Sous menu 1.2</a></li>
              <li><a href="#">Sous menu 1.3</a></li>
          </ul>
      </li>
      <li>Menu...#2
          <ul>
              <li><a href="#">Sous menu 2.1</a></li>
              <li><a href="#">Sous menu 2.2</a></li>
              <li><a href="#">Sous menu 2.3</a></li>
          </ul>
      </li>
      <li>Menu...#3
          <ul>
              <li><a href="#">Sous menu 3.1</a></li>
              <li><a href="#">Sous menu 3.2</a></li>
              <li><a href="#">Sous menu 3.3</a></li>
          </ul>
      </li>
  </ul>

Dimensions de la balise ul non conforme

Dimensionnement en CSS

Discussions similaires

Partager

Partager