Petit soucie de menu sous IE !!

ouai encor ...

1 novembre 2006 à 20:13:32

salut les Zer0s !!!

voila je "construit" mon site comme la plupart des Zer0s,mais voila j'ai un soucie avec mon menu, j'ai utiliser un script dispo sur alsacreations voir ici pour le menu

j'ai reussi avec tant bien que de mal a l'integré a ma page mais ... je n'est pas le rendu voulu sous IE mais sous FF aucun probleme comme d'hab' ...

le probleme viens quand ont passe le pointer sur "Liens Web" IE prend tout le contenu du menu alors que je veu qu'il prenne juste les sous-rubrique enfin regarder par vous mm ce sera plus simple que d'expliquer je pense. voir ici

au debut apres avoir integré le scipt le menu ses retrouver au plein millieu de la page, j'ai reussi a limiter les degats a mettant "position: absolute!important;" pour FF et "position: relative;" pour IE

je vous met mon code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="start" title="Accueil" href="index.html" />
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />

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

<script type="text/javascript">

</script>

</head>

<body>

<div id="header">

</div>


<ul id="navbar">
<li class="bouton_gauche"><a href="#" title="Titre du lien">Accueil</a></li>
<li class="bouton_gauche"><a href="#" title="Titre du lien">Forum</a></li>
<li class="bouton_gauche"><a href="#" title="Titre du lien">Concerts</a></li>
<li class="bouton_gauche"><a href="#" title="Titre du lien">Admi</a></li>
<li class="bouton_droite"><a href="#" title="Titre du lien">Message</a></li>
<li class="bouton_droite"><a href="#" title="Titre du lien">Log on/off</a></li>
</ul>

<div id="menu">
<h5>Menu</h5>
<div id="element_menu">
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">Liens Web </dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="#" title="">Groupe Français</a></li>
<li><a href="#" title="">Groupe Etranger</a></li>
<li><a href="#" title="">Webzine</a></li>
<li><a href="#" title="">Association</a></li>
<li><a href="#" title="">Merchandising</a></li>
<li><a href="#" title="">Divers</a></li>
</ul>
</dd>
<ul>
<li><a href="#" title="">Lien</a></li>
<li><a href="#" title="">Lien</a></li>
<li><a href="#" title="">Lien</a></li>
<li><a href="#" title="">Lien</a></li>
</ul>
</div>

<h5>Boite vide</h5>
<div id="element_menu">

Boite vide

</div>

<h5>Boite vide</h5>
<div id="element_menu">

Boite vide

</div>
</div>


<div id="corps">


<div id="edito">
<h3>Titre de l'edito</h3>
<p>Blabla bla bla Blabla bla bla Blabla bla bla<br />
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla<br />
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla<br /></p>
</div>


<div id="element_corps">
<h3>Titre de la news </h3>
<p>DEBUT<br />
Blabla bla bla Blabla bla bla Blabla bla bla<br />
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla
Blabla bla blaBlabla bla blaBlabla bla blaBlabla bla blaBlabla bla bla FIN</p>
</div>
</div>


<div id="footer">
<p>el Copyright <a href="#header">remonter</a></p>
</div>

</body>
</html>

/* CSS Document */

body
{
/*background-color: #606060;*/
margin-right: 10px;
margin-left: 10px;
/*background-image: url(images/fond2.jpg);*/
background-repeat: repeat-y;
background-position: left;
}

#header
{
height: 100px;
margin-top: 5px !important;
margin-top: 0px;
border: 1px solid #000000;
/*background-image: url(images/logo2.gif);*/
background-repeat: no-repeat;
background-position: center;
}

/* menu honrizontal "navigation bar" */

#navbar{
border: 1px solid #000000;
margin-left:0;
padding-left: 0;
height: 28px;
list-style-type : none;
}

#navbar li {
height: 28px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
padding-top: 4px;
}

#navbar li.bouton_gauche {
float : left;
}

#navbar li.bouton_droite {
float : right;
}

/* menu vertical */

#menu {
float: left;
width: 160px;
margin-top: 5px;
position: absolute!important;
position: relative;
}

#menu h5
{
height: 22px;
text-align: center;
margin: 0;
padding-top: 6px;
padding-left:0px;
padding-bottom:0px;
vertical-align: bottom;
border: 1px solid #000000;
font-size: 15px ;
}

/* elements menu vertical */

#element_menu {
margin-bottom: 20px;
border: 1px solid #000000;
padding: 0;
}

#element_menu dt {
height: 20px;
margin: 2px 0;
text-align: center;
}

#element_menu dd {
position: absolute;
left: 120px;
margin-top: -1.4em;
width: 10em;
border: 1px solid black;
}

#element_menu li {
text-align: center;
font-size: 85%;
height: 18px;
}
#element_menu li a, #element_menu dt a {
text-decoration: none;
display: block;
}

#element_menu dl, dt, dd, ul, li {
list-style-type : none;
margin: 0;
padding: 0;
}
#element_menu a:hover {
text-decoration: underline;
}

/*le corp*/

#corps{
border: 1px solid #000000;
margin-left: 170px;
margin-top: 5px;
}

/* l'édito */

#edito {
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
border: 1px solid #000000;
}

#edito h3
{
padding: 0px;
padding-left: 20px;
}
#edito p {
padding-left: 5px;
}

/* le corp */

#element_corps
{
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #000000;
}

#element_corps h3
{
padding: 0px;
padding-left: 20px;
}

#element_corps p {
padding-left: 5px;
}

/* footer */

#footer {
border: 1px solid #000000;
margin-bottom: 10px;
margin-left: 170px;
margin-top: 30px;
}

#footer p
{
text-align: center;
}

donc voila je sais pas trop d'ou ca vien ... pourtant avant de l'intégré a ma page ca fonctionner sous les 2 navigateurs...
merci d'avance pour votre future aide

Tommy

2 novembre 2006 à 13:45:53

mon code est si naze que ca ??
c'est irrecuperable Doc ???

Steeve

2 novembre 2006 à 13:53:01

Pour chaque Lien tu dois faire ça :

dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">Liens Web </dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="#" title="">Groupe Français</a></li>
<li><a href="#" title="">Groupe Etranger</a></li>
<li><a href="#" title="">Webzine</a></li>
<li><a href="#" title="">Association</a></li>
<li><a href="#" title="">Merchandising</a></li>
<li><a href="#" title="">Divers</a></li>
</ul>
</dd>

Tu incrémentes tes 'smenu' à chaque fois 'smenu2' puis 3 - 4 .....

Tommy

2 novembre 2006 à 14:22:07

je me suis peut etre mal exprimer, j'ai bien comprit le code html et le systeme js pour ce menu ce n'est pas la le probleme.

le probleme il est que IE n'interprete pas le code comme sous FF a dire vrai il detruit le menu.

tu aurais regarder le lien tu te serais apercus

Steeve

2 novembre 2006 à 15:07:00

Si tu veux pas faire d'effort tu t'en prendras qu'a toi.

Regarde bien le menu d'alsacréation et tu as pas fait pareil.

En gros pour que ce sois pareil sous ie et FF tu fais comme ça !

Toi t es "lien" tu les a mis comme ça :

<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>

Ie adapte donc bien ton code. A toi de les mettres comme il t est montré dans alsacréations.
C'est a dire ici :

<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Lien</dt>

<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> </dd>

Tommy

2 novembre 2006 à 18:31:31

mais je suis pas obliger de mettre ca a tous les liens???!! au final je veu que un seul liens face le hover de plusieurs liens et pas ceux du dessous, ces derniers donneront un liens direct.
de ce genre la quoi

donc je veu que le hover soit juste sur ce groupe là et pas sur les autres, pas besoin puisue ce n'est pas des sous liste ou sous menu.

donc d'apres toi je devrais les mettre aussi sur les sous listes ???

Steeve

2 novembre 2006 à 20:18:47

Ah je comprend mieux

<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

Voila pour tous les autres "lien".

Tommy

2 novembre 2006 à 21:41:55

hihi ouai je m'etait surment mal exprimer

il faux quand meme ajouter le "montre" ?? Oo

je v'ai essayer ca merci

edite: nan ca change rien ...