18041 sujets

Questions générales et questions de débutants

Sous menu (menu horizontal avec sous menu

Bonsoir
J'ai un petit souci avec mon menu horizontal en particulier avec mes sous menu.
Je m'explique mon texte que je mets dans mes sous menu sont trop long et il ne s'affiche pas alors j'ai changé height (dd ul li a) : 36px la du coup ça marche je vois tout mais du tous mes sous menu sont agrandis. Comment puije faire afin que les sous menu d'adapte automatique à la longueur du texte.
J'espère que vous m'avez compris je ne suis pas très doué dans le css.
Cependnant je vous transmets le code du fichier style.css
Je vous remercie d'avance
Aurevoir et à bientôt

body{
     background:#FFFFFF;
}
#menu{
    background:#FFFFFF;
	height:20px;
	position:relative;
	font-family:verdana,ms sans serif,georgia,helvetica,arial;
	font-size:10px;
	
}
#menu{
    position:absolute;
	
}
dl{
    height:20px;
	margin:0; padding:1px;
	display:block;
	float:left;
	font-family:verdana,ms sans serif,georgia,helvetica,arial;
	font-size:10px;
}
dt{
    width:150px;
    display:block;
	height:20px;
	color:#000000;
	line-height:20px;
	text-align:center;
	BORDER-TOP:#CCCCCC 1px solid;
    BORDER-RIGHT:#CCCCCC 1px solid;
    BORDER-BOTTOM:#CCCCCC 1px solid;
    BORDER-LEFT:#CCCCCC 1px solid;
	cursor:hand; 
	color:#000000;
}
dd{
    display:block;
	margin:auto;padding:auto;
	background:#FFFFFF;
}
dd ul{
    margin:0; padding:0 ;
	text-align:center;
	list-style:none;
}
dd ul li{
    display:block;
	margin:0; padding:0;
}
dd ul li a{
    color:#000000;
	display:block;
	width:100%;
	text-decoration:none;
	width:150px;
	height:36px;
	list-style-type:none;
	line-height:20px;
	BORDER-TOP:#C0C0C0 1px solid;
    BORDER-RIGHT:#C0C0C0 1px solid;
    BORDER-BOTTOM:#C0C0C0 1px solid;
    BORDER-LEFT:#C0C0C0 1px solid;
}
dd ul li a:hover{
    background:#FFFFFF;
}
dl dd{
    display:none;
}
dl:hover dd{
    display:block;
}

Modifié par Laurie-Anne (09 Sep 2009 - 08:46)
Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code HTML et CSS, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.
Bonsoir
je suis désolé pour mon manque d'information

je vous transmets le code html
Décidément j'ai encore plus de problème qu'avant car maintenant lorsque je clic sur un des menus le sous menu passe en dessous du calque (layer) la je ne sais pas quoi faire
Une autre question je veux que lorsque je clic sur chaque menu je veux une couleur différente de chaque menu .est ce que ça avoir avec dt dans la feuille style.css?
Je sais que je pose beaucoup de questions j'ai essayé de le faire moi même mais la je coince

Je vous remercie d'avance
A bientôt 


<!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></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:1px;
	top:0px;
	width:1275px;
	height:64px;
	z-index:1;
	border: thin solid #CCCCCC;
}
#Layer2 {
	position:absolute;
	left:71px;
	top:152px;
	width:1179px;
	height:189px;
	z-index:2;
	border: medium solid #CCCCCC;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer2">gjlkjlfgjlkmjklmdjlkjglkgjfdskljgflkjglfkjlfkgdjlkfgjlkfdgjslkjdfgkljlkfgdj,;:v,bc,lckvjbfgn,klfjkbn,klfjgt,lkjdflmjg,;cx,v;:</div>

     <div id="menu">
	 <dl>
	     <dt>rrrfrfrfrfr</dt>
	     <dd>
		     <ul>
			     <li><a href="#">Pfgdgfdgfddgf</a></li>
				 <li><a href="#">fdfgdgdfddf</a></li>
				 <li><a href="#">fgdfgdS</a></li>
				 <li><a href="#">fdgdfgdffd</a></li>
				 <li><a href="#">Lfgdddfgdf</a></li>
				 <li><a href="#">MOfdgfd gdfgdfdf</a></li>

			 </ul>
		 </dd>
	 </dl> <dl>
	     <dt>fdsfsf fdsf fsdfsd</dt>
	     <dd>
		     <ul>
			     <li><a href="#">cxvxcvxcv vcxcvxcvcx cvcvcv</a></li>
				 <li><a href="#">gdfgfd gfdg gfdf df </a></li>
				 <li><a href="#">dfgdfgdf gfgdfg gfdgfdgE</a></li>
				 <li><a href="#">fgfdgdfgd gfdgfdgdf</a></li>
                 <li><a href="#">ttt fgfdgdfgd gfdgdfg</a></li>				 
			 </ul>
		 </dd>
	 </dl> <dl>
	     <dt>dteeree eee eeee</dt>
	     <dd>
		     <ul>
			     <li><a href="#">fgdfgdgdfgd</a></li>
				 <li><a href="#">ggdfgdfgdg gfdgdfgd gfdgdfgdfgd</a></li>
				 <li><a href="#">fdfdsffds fdsfsdfsdfsd</a></li>
			 </ul>
		 </dd>
	 </dl> <dl>
	     <dt>ddsq dsqsqd dsqdqdq</dt>
	     <dd>
		     <ul>
			     <li><a href="#">aaaaaaaaaaaaaaa</a></li>
				 <li><a href="#">aaaaaaaaaaaaaaaaaaaa</a></li>
			 </ul>
		 </dd>
	 </dl> <dl>
	     <dt>sssssssssssss</dt>
	     <dd>
		     <ul>
			     <li><a href="#">yyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyy</a></li>
				 <li><a href="#">aaaaaa</a></li>
				 <li><a href="#">ssssssssss</a></li>
				 <li><a href="#">tttttttt</a></li>
				 <li><a href="#">kkkkkkkkkkkkkkkkk</a></li>	
			 </ul>
		 </dd>
	 </dl>
	  <dl>
	     <dt>ssssssssssssssss</dt>
	     <dd>
		     <ul>
			     <li><a href="#">ydfdfsfdsfsdfsfdsf</a></li>
				 <li><a href="#">yyyyyyyyy</a></li>				 
			 </ul>
		 </dd>
	 </dl> <dl>
	     <dt>fsdfsdfsd</dt>
	     <dd>
		     <ul>
			     <li><a href="#">fdsfdsfssfsdsdssd</a></li>
				 <li><a href="#">sdfsdfsdfsdff</a></li>				 
			 </ul>
		 </dd>
	 </dl> <dl>
	 <dt>dfdfdssdfd</dt>
	     <dd>
		     <ul>
			     <li><a href="#">tfsdfsdfsdfsdfsfsd</a></li>
				 <li><a href="#">sdfsdfsfdsssfdssdsd</a></li>
			 </ul>
		 </dd>
	 </dl>
</div>


	 

<div id="Layer1"></div>
</body>
</html>[code=css]

Modifié par kiki07 (10 Sep 2009 - 09:19)
Hello kiki07 et bienvenue sur le forum Smiley smile ,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Désolé
J'ai fait la correction
Veuillez m'excusez.
Merci d'avance
A bientôt
Modifié par kiki07 (10 Sep 2009 - 19:26)
Bonjour s'il vous plait aidez moi
je ne sais plus quoi faire
Je vous remercie d'avance
Au revoir et à bientôt
Salut,

Peut être qu'en allant au bout de l'idée que j'avais soulevé dans un précédent message, à savoir mettre une page en ligne, tu auras plus de réponses. Il est vrai qu'on est pas aussi doués, nous humains, que les navigateurs, pour visualiser des pages web à partir de codes au kilomètre. Smiley cligne
Bonsoir à tous
J'ai finalement réussit à régler les problèmes que j'avais
j'ai réécrit ma feuille style et rajouter au z-index 1000 pour que mes sous menus soient visible.
Ouf c'était très dur.

Cependant il me reste encore un problème je m'explique :
J'ai beaucoup de calque ( au moins 15 dans une page )

J'aimerais que lors que le clic sur un lien il y un calque qui descend vers le bas et bien entendu lorsque je reclic sur le lien il disparait

J'espère que vous m'avez compris
Je vous remercie d'avance
A bientôt
Sujet clos
Aller à