[CSS] Pb de couleur dans un menu déroulant

j'ai oublié de vous dire qu'il va de soi que j'aimerai que cela fonctionne avec mozilla comme avec IE. J'ai aussi rencontré un pb avec mozilla quand le titre d'un menu est trop grand il passe a la ligne mais n'agrandi pas la case du menu il superpose le texte de la case precédente sur la case suivante tandis que IE fait bien l'aggrandissement de la case du menu. En espérant que vous saurez m'aider a résoudre mes problème....

Encore merci d'avance...

Mozilla, Firefox, SeaMonkey et tous les produits qui utilisent le moteur de rendu Gecko respectent plutôt bien les standards W3C.. En conséquence, ils ne "bidouillent" pas l'affichage des éléments.. D'où ton menu dont la largeur ne varie pas, alors que IE fait parfois un peu tout et n'importe quoi.. L'augmentation automatique de la largeur par le contenu n'est pas un concept exploité par les standards W3C et c'est normal, sinon il faudrait coller des 'max-width' un peu partout.. Contrairement, évidemment, aux dimensions automatiques en fonction du bloc conteneur, dont la fenêtre du navigateur elle-même..

Il en va de même avec les dimensions verticales : dès que la dimension est fixée, elle ne varie plus même si le contenu déborde.. C'est ainsi que Gecko affiche un bloc conteneur.. Pour que la hauteur d'un bloc varie avec le contenu, il faut soit ne pas déclarer de hauteur, soit utiliser le paramètre 'min-height'.. Attention, les paramètres 'max' / 'min' ne sont pas reconnus par IE !! Pour lui, les basiques 'width' et 'height' se comportent aussi comme des 'min'.. Il faut donc bidouiller la CSS un peu de cette manière (exemple) :

#bloc { width: 150px; min-height: 30px; } // dimension "normale"

  * html #bloc { height: 30px; } // dimension spéciale IE correspondante

L'emploi de '* html' suivi du nom de l'élément ou de la classe d'éléments n'est reconnu par personne d'autre que IE.. Il existe aussi d'autres "hacks" pour IE, comme pour Gecko ou d'autres.. Ce sont les joies de la prog.. Des exemples ici : Quelques hacks CSS >> http://www.ultra-fluide.com/ressources/css/css-hacks.htm..

Deux autres articles intéressants :

Will the browser apply the rule(s)? (les règles CSS qui seront exécutées ou pas, selon les navigateurs. Utile pour monter des "hacks" CSS) >> http://centricle.com/ref/css/filters/

Full CSS Property Compatibility Chart >> http://corecss.unk.edu/properties/full-chart.php

Pour tes couleurs, préfère utiliser les indications RVB du type '#ffffff' pour le blanc ou '#000000' pour le noir.. N'importe quel éditeur Web ou d'images propose soit une palette de couleurs HTML pour les uns, soit la gestion des codes de couleurs HTML dans les palettes de couleurs pour les autres..

EDIT : correction autour du code de couleur CSS.. Merci boubpopsyteam pour ton coup d'oeil  ..

 

Hannnn   c'est du noir  

!!!!!! Merci  ..

A force d'en manger à longueur de journées, je finis par un peu tout mélanger  ... J'édite !

 

merci beaucoup pour ton aide et j'avoue que cela fonctionne j'ai juste un petit soucis maitenant sur le fait que le surlignage au passage de la souris ne se fait pas sur la case mais sur la ligne d'ecriture des menus. Je ne sais pas si j'arriverai a resoudre se problème car pour le moment tout ce que j'ai testé ca ne va pas.

Pour ce qui est des couleur ne t'inkiete pas j'ai bien mis des couleurs RVB c'etait des couleurs de test en attendant d'avoir les bonnes couleurs maintenant les couleurs sont bien en RVB.

Par contre j'ai toujours ce problème pour que chaque menu soit d'une couleur différente mais de la meme couleur que son sous menu. Je n'ai toujours pas reussi a le résoudre. Si quelqu'un avait une idée?

Je l'en remercie d'avance...  

utilise dans le css la fonction "display: block;"

Tu ne peux pas utiliser un style particulier commun avec par exemple dans le xhtml un code "<span class="menu1">" pour ton premier menu/sous-menu, "<span class="menu2">" pour ton deuxième menu/sous-menu, "<span class="menu3">" pour ton troisième menu/sous-menu, etc... en précisant les couleurs de chaque ".menuX" dans la feuille css ?

merci beaucoup marsien pour ce qui etait du span c t tout a fait ca. Par contre pour ce qui est du display: block; je ne sais pas trop ou le mettre car cela ne marche pas. Je precise que le problème est avec mozilla mais avec IE ca fonctionne bien.

Quelqu'un aurait-il une idée sur la question car maintenant je me retrouve avec du blanc sur tout les menus sur la 2eme ligne de la case ou il n'y a pas de texte et la bonne couleur sur la ligne du texte du menu. :s avec Mozilla biensur.

Merci d'avance pour votre aide...  

Un ex vaut souvent mieux qu'un long discours ; voilà une partie du code que j'utilise sur un de mes sites

xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" target="_blank">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" >

 
<head>

	<link href="new 4.css" rel="stylesheet" type="text/css" />

</head>

 
<body>

	<div id="menu">

		<ul>

			<li><div id="selectionne">Accueil</div></li>

			<li><a href="presentation.php">Présentation du projet</a></li>

			<li><a href="formulaire.php">Vos besoins, nos services</a></li>

			<li><a href="contact.php">Nous contacter</a></li>

		</ul>

	</div>

</body>

css

#menu {

	margin-top: 50px;

	}

 
#menu ul {

	list-style-type: none;

	margin: 0;

	padding: 0;

	}

 
#menu ul li a {

	display: block;

	width: 208px;

	margin: 5px;

	padding: 3px 0;

	background: #c8dfea;

	color: #0400d0;

	text-indent: 10px;

	border: 1px #0400d0 solid;

	text-decoration: none;

	}

 
#menu ul li a:hover {

	background: #f7eece;

	color: #a7641b;

	border: 1px #9c6f19 solid;

	}

 
#selectionne {

	display: block;

	width: 208px;

	margin: 5px;

	padding: 3px 0;

	background: #f7eece;

	color: #a7641b;

	text-indent: 10px;

	border: 1px #9c6f19 solid;

	text-decoration: none;

	}

Tu remarqueras que le display:block; se trouve sur les liens du menu (#menu ul li a), ce qui permet de donner au lien un espace équivalent au cadre qui le contient. Ceci suppose que tu passe par une structuration hiérarchique (ul & li) pour tes menus et sous-menus...

Edit : tu peux tester le code en le copiant, il marche   (pense juste à renommer le lien vers le css dans le head du xhtml   )

encore merci marsien c vrai que ton menu est très bien je l'ai testé... et je l'avais deja mis le display: block; comme toi avec mon ul,li et a mais je pense que le problème vient du "min-height: 30px;" qui agrandie la case pour que qu'un titre long de menu puisse y entrer sinon cela se supperpose sur la case suivante. je te redonne une partie de mon code pour que tu puisses le constater par toi même.

html:

<html>

<head>

<link rel="stylesheet" type="text/css" href="css.css">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<script type="text/javascript">

<!--

window.onload=montre;

function montre(id) {

var d = document.getElementById(id);

	for (var i = 1; i<=10; i++) {

		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}

	}

if (d) {d.style.display='block';}

}

//-->

</script>

<dl id="menu">

	<span class="menu1">

		<dt  onclick="javascript:montre('smenu1');"><a href="#">VIE MUNICIPALE</a></dt>

			<dd id="smenu1">

				<ul>

					<li><a href="equipe_municipale.php">L'équipe Municipale</a></li>

					<li><a href="#">Le conseil vous répond</a></li>

					<li><a href="#">L'agenda du Maire</a></li>

					<li><a href="#">Cérémonies Officielles</a></li>

				</ul>

			</dd>

	</span>

</dl>

</body>

</html>

Css:

<style type="text/css" media="screen">

<!-- 

body {

margin: 0;

padding: 0;

background: white;

font: 80% verdana, arial, sans-serif;

}

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu {

position: absolute; /* placement du menu, à modifier selon vos besoins */

top: 150;

left: 0;

}

#menu {

width: 15em;

}

#menu dt {

cursor: pointer;

margin: 2px 0;

min-height: 30px; /*hauteur de la case du menu*/

line-height: 20px;

text-align: center;

font-weight: bold;

border: 1px solid gray;

}

#menu dd {

border: 1px solid gray;

}

/* menu 1*/

#smenu1 ul li a ,.menu1 dt a {  

text-align: center;

background: #7bb242; /*vert*/

color: white;

text-decoration: none;

display: block;

border: 0 none;

height: 100%;

}

Je pense que tu comprendras mieux de quoi je parle. Et tu pourras ainsi constater ce qu'il se passe.

Encore merci pour ton aide précieuse...

Tu peux simplement déplacer "min-height: 30px;" dans "#smenu1 ul li a ,.menu1 dt a"

Pour IE, min-height n'a aucune signification... Il utilise en fait height comme un min-height.

Tu devras peut-être rajouter une ligne spécifique à IE, telle que :

*html #smenu1 ul li a ,.menu1 dt a {

height: 30px;

}