28173 sujets

CSS et mise en forme, CSS3

[Résolu]Problème d'héritage pour un menu en CSS

Bonjour !
Je suis Fred, je suis tombé sur un tutoriel qui m'avait l'air très intéressant ( http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal ) et qui l'était, d'ailleurs.
Simplement, histoire de m'amuser un peu, j'ai essayé de supprimer la fonction javascript pour n'avoir que du css (et les comportements).
Pour le comportement j'utilise un bête javascript du type
<dd class="menu_off" onMouseOver="this.className='menu_on'" onMouseOut="this.className='menu_off'"


En gros le principe est le même : attribuer un display à une classe de sous-menu qui prendra la valeur none ou block selon la classe-parent.

Et là, c'est le drame.

Il semble que le css ne me permette pas de faire un héritage de type 
#menu dt.menu_off dd {
border: 1px solid gray;
}


J'ai essayé de diverses manières, la seule différence que je vois avec le tutoriel (hormis le javascript) est que le dd de mon code possède une classe et pas un id.

Je poste mon code complet en message suivant, merci par avance si quelqu'un peut m'aiguiller ou me montrer mon erreur (ou une autre solution).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
	div#tab_menu{/*définition du div contenant le menu*/
		width:500px;
		border:1px solid black;
		}
	div#tab_menu dl{
		width			: 100px;
		height			: 30px;
		text-align		: center;
		text-decoration	: none;
		color			: #000;
		background		: #fff;
		float			: left;
		}
	dl, dt, dd, ul, li {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
		}
	div#tab_menu dt.item_off{/*définition de l'état de base*/
		background-color:#00CC00;
		}
	div#tab_menu dt.item_off dd{/*définition du sous-menu de base*/
		color		: #FF0000;
		display		: none;
		}
	div#tab_menu dt.item_on{
		background-color:#CCCCCC;
		}
	div#tab_menu dt.item_on dd{
		display		: block;
		position	: relative;
		}
</style>
</head>
<body bgcolor="#CCCCCC">
	<div id="tab_menu">
		<dl>
			<dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 01</dt>
				<dd>
					<ul>
						<li class="ss_menu"><a href="test1"> :: Test 1-01 :: </a></li>
						<li class="ss_menu"><a href="test2"> :: Test 1-02 :: </a></li>
						<li class="ss_menu"><a href="test3"> :: Test 1-03 :: </a></li>
						<li class="ss_menu"><a href="test4"> :: Test 1-04 :: </a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 02</dt>
				<dd>
					<ul>
						<li class="ss_menu"><a href="test1"> :: Test 2-01 :: </a></li>
						<li class="ss_menu"><a href="test2"> :: Test 2-02 :: </a></li>
						<li class="ss_menu"><a href="test3"> :: Test 2-03 :: </a></li>
						<li class="ss_menu"><a href="test4"> :: Test 2-04 :: </a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt class="item_on" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 03</dt>
				<dd>
					<ul>
						<li class="ss_menu"><a href="test1"> :: Test 3-01 :: </a></li>
						<li class="ss_menu"><a href="test2"> :: Test 3-02 :: </a></li>
						<li class="ss_menu"><a href="test3"> :: Test 3-03 :: </a></li>
						<li class="ss_menu"><a href="test4"> :: Test 3-04 :: </a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 04</dt>
				<dd>
					<ul>
						<li class="ss_menu"><a href="test1"> :: Test 4-01 :: </a></li>
						<li class="ss_menu"><a href="test2"> :: Test 4-02 :: </a></li>
						<li class="ss_menu"><a href="test3"> :: Test 4-03 :: </a></li>
						<li class="ss_menu"><a href="test4"> :: Test 4-04 :: </a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt class="item_off" onMouseOver="this.className='item_on'" onMouseOut="this.className='item_off'">menu 05</dt>
				<dd>
					<ul>
						<li class="ss_menu"><a href="test1"> :: Test 5-01 :: </a></li>
						<li class="ss_menu"><a href="test2"> :: Test 5-02 :: </a></li>
						<li class="ss_menu"><a href="test3"> :: Test 5-03 :: </a></li>
						<li class="ss_menu"><a href="test4"> :: Test 5-04 :: </a></li>
					</ul>
				</dd>
		</dl>
	</div>
</body>
</html>


N'hésitez pas à me poser des questions ou à me faire des remontrances au cas où Smiley cligne , par avance, merci pour votre aide.
Salut.

Dans le code que tu donne, tu t'adresse au <dd> alors que dans ton css la classe est attirbuée au <dt>
Pas mieux, il y a de quoi s'arracher les cheveux par poignées.
Le principe est pourtant simple : le <dd> est définit en fonction de la classe du dt, par principe d'héritage.
J'en suis à me demander si l'héritage fonctionne dans ce cas précis.
Merci à vous deux pour vos réponses (et pour les sélecteurs adjacent, ça peut toujours servir).

Comme je le pensais c'était un truc tout con ; du coup je place mon comportement non-plus sur le dt (qui n'enblobe effectivement ce qui constitue le titre du menu) mais sur le dl qui, lui, englobe tout le monde. Il devient donc possible de créer une classe par état.

Dès que j'ai un code propre je mets ça en ligne si ça peut servir à d'autres personnes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">
	div#site_menu{
		position		: absolute;
		top				: 50px;
		left			: 50px;
		background-color: #FFFFFF;
		border			: 1px dotted red;
	}
	#site_menu a{
		text-decoration	: none;
	}
	#site_menu dl, dt, dd, ul, li {
		margin			: 0;
		padding			: 0;
		list-style-type	: none;
	}
	#site_menu dl.menu_lvl_1_off{
		float	: left;
		background-color:#00CCFF;
	}
	#site_menu dl.menu_lvl_1_off dd{
		display	: none;
	}
	#site_menu dl.menu_lvl_1_on{
		float			: left;
		background-color:#00CCBB;
	}
	#site_menu dl.menu_lvl_1_on dd{
		display			: block;
		background-color: silver;
	}
	#site_menu dt{
		text-align		: center;
		padding-top		: 5px;
		width			: 100px;
		height			: 30px;
	}
</style>
</head>

<body bgcolor="#CCCCCC">

<div id="site_menu">
	<dl class="menu_lvl_1_off" onMouseOver="this.className='menu_lvl_1_on'" onMouseOut="this.className='menu_lvl_1_off'"><dt><a href="#">Youpi</a></dt></dl>
	<dl class="menu_lvl_1_off" onMouseOver="this.className='menu_lvl_1_on'" onMouseOut="this.className='menu_lvl_1_off'"><dt><a href="#">Canard</a></dt>
		<dd>
			<ul>
				<li><a href="#">Lapin</a></li>
				<li><a href="#">Chat</a></li>
				<li><a href="#">Araignée</a></li>
				<li><a href="#">Zébu</a></li>
			</ul>
		</dd>
	</dl>
	<dl class="menu_lvl_1_off" onMouseOver="this.className='menu_lvl_1_on'" onMouseOut="this.className='menu_lvl_1_off'"><dt><a href="#">Maluzerne</a></dt>
		<dd>
			<ul>
				<li><a href="#">Bourrée</a></li>
				<li><a href="#">Mazurka</a></li>
				<li><a href="#">Scotish</a></li>
			</ul>
		</dd>
	</dl>
	<dl class="menu_lvl_1_off" onMouseOver="this.className='menu_lvl_1_on'" onMouseOut="this.className='menu_lvl_1_off'"><dt><a href="#">About Us</a></dt></dl>
</div>

</body>
</html>


Il n'y a plus qu'à peaufiner. Merci à tout les deux (et à ceux qui y ont pensé)
Sujet clos
Aller à