28221 sujets

CSS et mise en forme, CSS3

Menu Css et IE

Salut à tous
j'ai passé l'aprés midi à chercher l'erreur et je vois toujours pas.

Donc le problème : aprés adaptation des differents menu, je souhaite faire un menu dynamique horizontal avec des sous menus verticaux et des sous-sous menus apparaissant à droite.

donc le code de ma css : 
	#nav_princ {
	position: absolute;
	top: 79px;
	right: 0px;
	width: 785px;
	color: white;
	font-size: 12px;
	font-weight: bold;
	}
	
	#nav_princ dl {
	float: right;
	width: 10em;
	}
	
	#nav_princ dl dt a {
	color: white;
	}
	
	#nav_princ dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: none;
	margin: 1px;
	border-top: 1px solid white;
	border-left: 1px solid white;
	color: white;
	}
	
	#nav_princ dd {
	border: none;
	}
	
	#nav_princ li {
	text-align: center;
	background: #fff;
	}
	
	#nav_princ li a {
	text-decoration: none;
	display: block;
	height: 100%;
	border-bottom: 1px solid gray;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	color: black;
	font-weight: normal;
	}
	#nav_princ dt a {
	text-decoration: none;
	display: block;
	height: 100%;
	border: none;
	color: black;
	font-weight: normal;
	}
	
	#nav_princ dt a:hover, #nav_princ dt a:focus, #nav_princ dt a{
	background: none;
	font-weight: bold;
	}
	
	#nav_princ li a:hover, #nav_princ li a:focus {
	background: #eee;
	}
	
	#nav_princ ul ul {
  list-style:none;
  width:100%;
  position: absolute;
  left: 50%;
  display: none;
	}
	
	#nav_princ ul ul li {
	position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
  }
  
  #nav_princ ul li:hover>ul{
  display:block;
}

li {
height: 10px;
}

 body {
	height: 610px;
	width: 995px;
	color: #330046;
	position: relative;
	font-family: Arial;
	margin: 0px;
	padding: 0px;
    }

  div { margin: 0pt;
    padding: 0pt;
    position: absolute;
    }
	
	dl, dt, dd, ul, li, tr {
	list-style-type: none;
	margin: 0pt;
    padding: 0pt;
	}

  .bordure { border: 1px solid rgb(255, 255, 255);
    }


celui de ma page web d'essai :
	<link rel="stylesheet"
 		href="style_cadre_haut.css"
 		type="text/css">
		
		<script language="JavaScript" src="menu.js" type="text/javascript"></script>
</head>

<body style="background: green;">
<? include ("nav_princ.php"); ?>
</body>
</html>


et le php qui s'inclue dedans pour l'instant pas trop tro dynamique Smiley langue :
"<div id=\"nav_princ\">
	
	<dl>
		<dt><img src=\"drap.png\"></dt>
	</dl>
<dl>	
		<dt onmouseover=\"javascript:montre('smenu3');\"><a href=\"#\">Our Services</a></dt>
			<dd id=\"smenu3\" onmouseover=\"javascript:montre('smenu3');\" onmouseout=\"javascript:montre('');\">
				<ul>
					<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.1</a></li>
					<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.2</a></li>
					<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.3</a>
					<ul>
							<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.3.1</a></li>
							<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.3.2</a></li>
							<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.3.3</a></li>
						</ul>
					</li>
					<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.4</a></li>
					<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.5</a>
						<ul>
							<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.5.1</a></li>
							<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.5.2</a></li>
							<li onmouseover=\"hover(this);\" onmouseout=\"hover(this);\"><a href=\"#\">Sous-Menu 3.5.3</a></li>
						</ul>			
					</li>
				</ul>
			</dd>
	</dl>


et enfin le javascript pour ie :

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';}
		}

function hover(obj){
  			if(document.all){
    			UL = obj.getElementsByTagName('ul');
    				if(UL.length > 0){
      					sousMenu = UL[0].style;
      						if(sousMenu .display == 'none' || sousMenu.display == ''){
        						sousMenu.display = 'block';
      						}else{
        						sousMenu.display = 'none';
      						}
    				}
 			 }
		}


le petit probleme vient lors de l'affichage du sous-sous-menu (3.3 par ex.) qui me créé un petit espace (disgracieux) dans le sous-menu. aucun moyen de l'enlever Smiley bawling
merci d'avance

g mis en bleu le fond des dd et ca donne ca à l'image :

upload/529-menu1.jpg

et ce petit trait bleu que je veux enlever Smiley bawling
Modifié le 08 Dec 2004 - 10:56
Salut BastieN,
J'ai le même genre de problème que j'ai réglé momentanément en
supprimant le font-weight:bold dans :hover ci-dessous.

BastieN a écrit :

#nav_princ dt a:hover, #nav_princ dt a:focus, #nav_princ dt a{
background: none;
font-weight: bold;
}


J'ai remplacé cela par un margin-left au survol mais je cherche encore toujours une
solution qui permette le bold Smiley ohwell .

Amicalement.

EDIT: Il semble que le problème que j'avais venait du
font-family:'Courier New' qui en bold change de taille, ce qui ne semble pas le cas chez toi Smiley decu
Modifié le 16 Dec 2004 - 09:41
oui effectivement j'ai essayer d'enlever le bold mais ca ne change rien. Dommage ca aurait été bien sympas lol

enfin si quelqu'un à une autre solution je sui preneur parce que je ne comprend vraiment pas pourquoi ca me fait un truc comme ca
Modifié le 20 Dec 2004 - 14:49
bon alors le mystere s'epaissi encore un peu
g essayer en ajoutant une bordure au "#nav_princ ul" et en ne mettant pas de bodure à "#nav_princ ul ul" je n'ais plus de decalage au milieu mais seulement pour le dernier sous menu, le ul du sous menu s'agrandissant legerement en bas. Ce n'est plus aussi grave mais bon g maintenant un trés joli contour qui s'agrandi en bas. vive IE Smiley bawling
Modifié le 22 Dec 2004 - 15:56
Sujet clos
Aller à