[resolu] Pourquoi le premier de la liste à pas de puce et les autres

Je repars sur du plus simple.
Pourquoi le premier de ma liste est sans puce alors que les suivant en ont une ?

Je suis partie du menu de Raphael et ai juste ajouté "menuA" dans mes styles et dans le body

 <DL id=menuA> 

.
Visible sur http://www.aliane.fr/test/css3/menus.htm

merci à vous
Modifié par la ptiote (30 Mar 2005 - 11:50)

Les éléments de définition (dt, dl, dd) n'ont pas de puce je crois.

Il te faut modifier

#menuA ul { 
padding: 2px; 
list-style-type: none; 
}

Et tu peux aussi enlever le code ci dessous de la CSS parce qu'il n'y a plus de classe

DL.menuA {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT.menuA {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD.menuA {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL.menuA {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI.menuA {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

cela ne fonctionne pas,
j'ai toujours mes listes sans puce pour le premier de la liste mais avec puce pour les autres

Si tu cherches à enlever les puces des li, ta css devient :

body { 
margin: 0px; 
padding: 0px; 
background: white none repeat scroll 0%; 
font-size: 90%; 
-moz-background-clip: initial; 
-moz-background-origin: initial; 
-moz-background-inline-policy: initial; 
color: black; 
font-family: verdana,arial,sans-serif; }

#menuA { 
left: 1em; 
width: 10em; 
position: absolute; 
top: 1em; }

#menuA dt { 
border: 1px solid gray; 
margin: 2px 0px; 
background: rgb(169, 191, 203) none repeat scroll 0%; 
font-weight: bold; 
-moz-background-clip: initial; 
-moz-background-origin: initial; 
-moz-background-inline-policy: initial; 
cursor: pointer; 
line-height: 20px; 
height: 20px; 
text-align: center; }

#menuA dd { 
border: 1px solid gray; 
background: rgb(169, 191, 203) none repeat scroll 0%; 
margin-top: -1.4em; 
z-index: 100; 
-moz-background-clip: initial; 
-moz-background-origin: initial; 
-moz-background-inline-policy: initial;
left: 8em; 
width: 10em; 
position: absolute; }

#menuA ul { 
padding: 2px; 
list-style-type: none;}

#menuA li { 
font-size: 85%; 
line-height: 18px; 
height: 18px; 
text-align: center; }

#menuA li a { 
display: block; 
color: rgb(0, 0, 0); 
text-decoration: none; }

#menuA dt a { 
display: block; 
color: rgb(0, 0, 0); 
text-decoration: none; }

#menuA li a:hover { 
text-decoration: underline; 
}

et il doit sûrement y avoir encore moyen de l'alléger.

J'observe que si dans ma déclaration de style j'ai

DT.menuB {...
	}
DL.menuB {...
}
DD.menuB {...
	}
UL.menuB {...
}
LI.menuB {...
}

ça déconne, par contre si je laisse

DT {...
}
DL {...
}
DD {...
}
UL {...
}
LI {...
}

Là ça marche correctement.
Le seul souci c'est que je doit avoir un second menu dans cette page.
Je ne peux donc pas laisser mes DT, DL, DD, UL, LI comme cela. csinons mes menus ne sauront pas duquel ils dépendent.

Connaissez vous la syntaxe correcte pour différencier dans la déclaration de style un DT d'un autre DT ?

Ca ne marche pas parce qu'il n'y pas de "class" sur le xhtml mais des "id".

En mettant DT.menuB, tu déclares qu'il existe un DT avec une class menuB. Or sur le site, il y a des id et non des class.

Comment dois je faire alors ?

Bon je viens d'arriver à quelque chose de bien, mes 2 menus fonctionnent correctement (enfin !!!!)

Par contre j'ai toujours ces soucis de puces qui apparaissent dans les sous menus du menu de gauche. 9a je n'y arrive pas, et ne comprends pas non plus ...
Il me reste plus que cela à corriger et ce sera une grande journée pour moi.

Plutôt que de mettre tout le code, voici l'adresse, tout est dans la page http://www.aliane.fr/test/css3/menu5.htm

Merci de votre aide

Pour appliquer une règle CSS à un ID tu dois utiliser le signe # (dièze) et non le . (point).

Un ID :

dt#menuB {...
}

Une classe :

dt.menuB {...
}

Je te conseille vivement la lecture de cet article :
Quelle est la différence entre une classe et un ID?
Modifié par jb_gfx (16 Mar 2005 - 15:03)

J'ai pourtant lu cet article, id pour unique et classe pour objet multiple. Mais je vois pas pourquoi tu me dis cela ???

Peux tu dévelloper, en quoi cela empèche t'il mon menu de fonctionner correctement?

Ben je disait ça simplement parceque tu ne semblait pas comprendre la différence. Je récapitule :

Si tu déclare un id dans ton HTML :

<div id="zaza"></div>

Tu y accéde dans ton CSS comme ceci :

div#zaza {
}

Ou encore :

#zaza {
}

Et si tu déclare une classe :

<div class="zozo"></div>

Alors tu fais :

div.zozo {
}

Ou bien :

.zozo {
}

Donc si tu as un id :

<div id="menu"></div>

et que tu appelle :

div.menu {
}

Cela ne peux pas fonctionner puisque tu appelle une classe. Et inversement.


EDIT: En fait ce post n'était pas présent quand je t'ai répondu la première fois :

la ptiote a écrit :
Bon je viens d'arriver à quelque chose de bien, mes 2 menus fonctionnent correctement (enfin !!!!)

Par contre j'ai toujours ces soucis de puces qui apparaissent dans les sous menus du menu de gauche. 9a je n'y arrive pas, et ne comprends pas non plus ...
Il me reste plus que cela à corriger et ce sera une grande journée pour moi.

Plutôt que de mettre tout le code, voici l'adresse, tout est dans la page http://www.aliane.fr/test/css3/menu5.htm

Merci de votre aide

C'est pour ça...
Modifié par jb_gfx (16 Mar 2005 - 16:15)

Pour tes problèmes de puces il existent des solutions chez la pluspart des vetos ou en pharmacie

Ce qu'il manque à ton menu c'est un conteneur global pour le séléctionner.
Tu pourrais faire ça :

dl dd ul li {
 list-style-type: none;
}

Mais si a un autre endroit dans ton site on retrouve cette structure de liste imbriqué dans des liste de définition, les puces seront masquées aussi.

Si tu avait, disons un div id="navigation" (par exemple) qui engloberait ton menu tu pourrait être certaine de masquer seulement les puces de ton menu avec un selecteur du genre :

div#navigation dl dd ul li {
 list-style-type: none;
}

Terrible !
tout semble fonctionner maintenant, adieu puces et menus qui se superposent.

Je vérifie tout cela demain, mais ça a bien avancé.
Alors un merci à vous tous.
J'espère poster un RESOLU demain

je prend le train en route, mais me semble voir des truc bizarre dans ce code
des truc de base déjà.

<DIV id=menuB>

devrait etre

<DIV id="menuB">

ensuite dans les déclarations c'est vraiment tres brouillons.

je vois une série de

DL.menuA{}
DT.menuA{}
DD.menuA{}
UL.menuA{}
LI.menuA{}

Ce qui voudrait dire que dasn les DL, DT, DD, UL, LI, on peut trouver une déclaraction de class 'menuA'

et c'est pas le cas du tout sauf pour DL et DT

on devrait donc plutot voir des

DL.menuA{}
DT.menuA{}
.menuA DD{}
.menuA UL{}
.menuA LI{}

Mais cela ne marcherais surement pas, parce que les définition sont posée n'importe comment.

j'ai un peu l'impression que c'est tres tres brouillon

Maintenant que j'ai reussit (grace à vous) à les faire fonctionner au moins une fois, je vais essayer de faire le ménage.

Je passe donc l'aspi et vous soumets, d'accord ?

J'ai de gros soucis avec ce code, je n'arrive vraiment à rien de bon, il fonctionne mais avec un code pourris.
Si qq à un peu de temps, merci de me contacter sur en privé

Merci