[Résolu]Menu CSS : Problème de police.

Salut

Me revoilà ! Donc cette fois, c'est un petit problème de police pas bien génant, mais j'aimerais bien savoir comment faire pour le résoudre, si c'est pas trop compliqué.

Voilà j'utilise ce menu, et j'aimerai savoir comment faire pour changer les différentes polices.

C'est à dire que pour la police du haut j'aimerais avoir Courier New, et pour celle du bas j'aimerais avoir une police du genre Tahoma.

Le problème, c'est que lorsque je change de police pour le haut, ca la change du bas aussi (mais les font-size reste propre à chaque partie).

J'ai essayé de changer la police de l'id #menu mais ca change pour tout le menu (partie haute & basse), et j'ai aussi essayé l'id #smenu1, #smenu2 ... (là ou est défini la taille 0.7 ems) mais ca ne marche pas.

Pensez vous qu'il s'agisse d'un conflit avec les styles a:link, a:hover.. qui "contredise" les autres styles.

Pour finir, voici le code CSS qui correspond :

/* CSS issu des tutoriels css.alsacreations.com */

body {

	margin: 10px;
	padding: 0;
	font-family: "Courier New", Courier, mono;
	font-size: 12px;
}

/* Pour centrer le menu (tutorial de Alsacreations) */
.conteneur {
	position:absolute;
	left: 50%;
	top: 20px;
	width: 800px;
	height: 40px;
	margin-top: -20px;
	margin-left: -400px;
	border: none;
	background-image: url(../../picts/body.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
}

dt, dl, dd, ul, li {
	list-style-type: none;
	margin: 0 10px 0 0;
	padding: 0;
}

/* J'ai d'abord essayé de changer la police ici : mais ca change pour tout. */
#menu {
	position : absolute;
	left: 100px;
	top: 0px;
	color: #000000;
}

#menu dl {
	float: left;
}

/* Voilà peut-être ici ? */
#menu li {
	display: inline;
	font-family: "Courier New", Courier, mono;
	font-size: 10px;
}

/* Ici je suis sur qu'il y'a conflit... */
#menu a {
	font-family: "Courier New", Courier, mono;

}

/* ---Partie pour la coloration des liens--- */
#menu a:link{
	text-decoration: none;
	color: #666666;

}

#menu a:visited{
	text-decoration: none;
	color: #FF0000;
}

#menu a:hover{
	text-decoration: underline;
	color: #993300;
}

#menu a:active {
	text-decoration: underline;
	color: #0000FF;
}
/* ---Fin de la partie pour la coloration des liens--- */

/* Ici encore une essai pour changer les couleurs */
#smenu1, #smenu2, #smenu3, #smenu4 {
	position: absolute;
	left: 0;
	font-size: 0.7px;
	border-top: 1px solid #000000;
	width: 600px;
	font-family: Arial, Helvetica, sans-serif;

}

Voilà je vous remercie pour votre attention, et j'ai compris aussi une autre chose : Il faut persévérer pour réussi en CSS.

Merci
Modifié par SiZiOUS (10 Mar 2005 - 14:21)

Tu dois jouer avec #menu dt et #menu dd

Ah il s'agit donc de #menu dt et #menu dd ?

J'avais pas pensé, je vais essayer. Merci du tuyau, cedb3 !

#menu dt c'est le menu principal, #menu dd c'est la partie déroulante

Merci ! C'est exactement ça !

Merci beaucoup !!

Au passage, tu peux optimiser ton code CSS en utilisant les propriétés raccourcies :

Efficient CSS with shorthand properties (en)

Par exemple, au lieu d'écrire :

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

Tu peux écrire :

background:#f00 url(background.gif) no-repeat fixed 0 0;

J'avais pas vu ce post. Merci (et désolé du up).