[Résolu] Pb avec menu XHTML + CSS

[EmmaZL]

Hello !

Comme j'ai envie de faire du XHTML + CSS plutot que du HTML, j'ai décidé de me lancer en téléchargeant un kit déjà fait car c'est trop difficile pour moi de commencer avec une page blanche.
J'ai déjà compris pas mal de choses mais il y a quelque chose que je n'arrive pas à faire.

Dans les menus, quand on passe sur les liens, le fond change en bleu plus foncé. Ce que j'aimerais, c'est que le bleu plus foncé prenne toute la largeur du menu.

Voilà le code qui gère le menu :

Code : Tout sélectionner

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	font-family: Trebuchet MS;
	font-size: 12px;
	position: absolute;
	top: 175px;
	left: auto;
	margin-left: auto;
	margin-right: auto;
	z-index:100;
	width: 760px;
	height: 25px;
	background-image: url(images/bg-menu.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
}
#menu dl {
	float: left;
	width: auto;
        margin-left: 10px;
	line-height: 25px;
	vertical-align: middle;
}
#menu dt {
	color: #FFFFFF;
	cursor: pointer;
	text-align: left;
	font-weight: normal;
	margin-left:5px;
}
#menu dd {
	position: absolute;
	display: none;
	background-color:#44596A;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: gray;
	border-bottom-color: gray;
	border-left-color: gray;
}
#menu li {
	text-align: left;
	padding-left: 7px;
        padding-right: 7px;
}
#menu li a, #menu dt a {
	font-family: Trebuchet MS;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:focus {
	background-color:#384B59;
}
#menu dt a:hover {
	text-decoration: underline;
}

Pour pas que les mots du menu soient tout collés au bord gauche et au bord droite, j'ai dû rajouter ceci :

#menu li {
text-align: left;
padding-left: 7px;
padding-right: 7px;
}

c'est à cause du padding que le bleu foncé, au survol de la souris, n'occupe pas toute la largeur du menu. C'est moi qui ai rajouté le padding, car avant, il y avait text-indent: 7px; mais ça ne fait un espacement que sur le bord gauche.

J'espère que je me suis pas trop mal exprimée. La page est ici : http://www.mydogs.ch/pit/campfire.html

Et aussi, le menu "clignote" un peu quand on passe dessus avec la souris. Je sais pas non plus pourquoi ça fait ça...

[calimo]

Salut,

Tout d'abord, tu affiches le menu avec javascript : alors il faut qu'il soit caché de la même manière. Vires donc ce display:none :

Code : Tout sélectionner

#menu dd {
	position: absolute;
	[color=red]display: none;[/color]
	...
}

sinon tous ceux qui n'ont pas js ne pourront pas l'afficher. Le mélange des genres n'est jamais bon Soit c'est tout en CSS, soit tout en js, mais pas les deux

Autre possibilité : tu t'arranges pour que "Histoire", "Mythes", "Tempérament" etc. soient cliquables et puisse ammener ceux qui n'ont pas JS dans les bonnes rubriques.


Pour ta question, il suffit d'appliquer les padding sur les "a" plutôt que les "li"

[GizMecano]

Hello,

Pour ta question, il suffit d'appliquer les padding sur les "a" plutôt que les "li"

Juste comme ça : ce serait pas plutôt sur la contextuelle a:hover ?

Ciao,

[calimo]

Non, sinon les paddings augmenteront juste au survol... pas très agréable ! Clairement ils doivent être là en permanence

[EmmaZL]

Merci. Vais voir ce que je peux faire. J'ai vu que les menus de Geckozone ressemblent furieusement aux miens.

Est-ce que j'ai le droit de m'inspirer du code ? Pour voir comment c'est fait ?

[calimo]

Code : Tout sélectionner

#menu li {
	text-align: left;
}
#menu li a, #menu dt a {
	font-family: Trebuchet MS;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	padding-left: 7px;
	padding-right: 7px;
} 

[EmmaZL]

Ooooh !! Merci !!!

Maintenant je vais essayer de virer le vilain javascript. Je crois que c'est à cause de lui que ça clignote...

[EmmaZL]

ben c'est pas gagné....

[calimo]

Code : Tout sélectionner

#menu dl:hover dd {
	display:block;
}

[EmmaZL]

T'es trop fort !! Tu mérites bien ton avatar...

Avec CSS, j'ai fini par comprende ce qu'il a entre { et }

Code : Tout sélectionner

   font-family: Trebuchet MS;
   font-size: 12px;
   color: #FFFFFF;
   text-decoration: none;
   display: block; 
   ...

Mais c'est ce qu'il y a avant { que je comprends pas...

Code : Tout sélectionner

#menu dl:hover dd

Enfin, je finirai par y arriver un jour...


[/quote]

[calimo]

Alors il te faut lire un peu de théorie sur les sélecteurs CSS

Tu as fait toi-même des sélecteurs "complexes" grâce aux sélecteurs descendants, représentés par un simple espace.

Code : Tout sélectionner

#menu dl dd

sélectionne dd si il est contenu dans dl et seulement si celui-ci est contenu dans un menu.

Le :hover signifie "survol". C'est une pseudo-classe qui fait que ça ne sélectionne la chose qu'au survol de celle-ci par la souris.

[EmmaZL]

Merci. M'en vais lire tout ça...

[GizMecano]

Hello,

Non, sinon les paddings augmenteront juste au survol... pas très agréable !

Effectivement, je n'avais pensé qu'au problème de la couleur, pas de la taille

Ciao,