Bonjour à tous
je suis depuis un bout de temps en train de faire le site de mon club de karaté. Au niveau connaissance, je me situe.... pas bien loin , mais j'arrive a trouver des infos à gauche à droite.
Dernièrement, pour créer un menu horizontal, je suis tombé sur se site.
j'ai pris la méthode pour créer un menu et je l'ai placé sur mon site.
Comme j'ai la manie de ne travailler que sous Firefox, je n'ai pas vu que sous IE, le menu ne souvrait pas. En fait c'est un amis du club qui me la annoncé.
Je me suis dit que j'avais du me tromper dans le code, alors j'ai recommancé, puis.... abandonné.
J'ai rechercher un code et là impeccable sous Firefox, IE7,.... mais pas sous IE6 ou là, il y a des espaces entre les menus.
J'ai parcouru internet puis le forum à la recherche d'information, mais je n'ai rien trouvé.
Donc je me tourne vers vous.
DOnc je résume mon problème.
Sous Firefox et sous IE7, le menu se comporte comme il faut, il souvre et tout est bien "serré". Mais sous IE6, le menu est "eclaté".
Voici les codes que j'ai utilisé :
CSS:
JAVA:
Et le menu en lui même :
J'espère que ça ne sera pas trop long a lire , je m'en escuse
Voici le lien vers le site :
Http://www.kc-herstal.info
Si vous pouviez m'aider, un grand merci d'avance.
PS: Est il possible d'installer IE6 sur un ordinateur ou il y a déjà IE7. Si oui, comment.
[/i][/i]
Modifié par georgeschris (02 Apr 2007 - 08:38)
je suis depuis un bout de temps en train de faire le site de mon club de karaté. Au niveau connaissance, je me situe.... pas bien loin , mais j'arrive a trouver des infos à gauche à droite.
Dernièrement, pour créer un menu horizontal, je suis tombé sur se site.
j'ai pris la méthode pour créer un menu et je l'ai placé sur mon site.
Comme j'ai la manie de ne travailler que sous Firefox, je n'ai pas vu que sous IE, le menu ne souvrait pas. En fait c'est un amis du club qui me la annoncé.
Je me suis dit que j'avais du me tromper dans le code, alors j'ai recommancé, puis.... abandonné.
J'ai rechercher un code et là impeccable sous Firefox, IE7,.... mais pas sous IE6 ou là, il y a des espaces entre les menus.
J'ai parcouru internet puis le forum à la recherche d'information, mais je n'ai rien trouvé.
Donc je me tourne vers vous.
DOnc je résume mon problème.
Sous Firefox et sous IE7, le menu se comporte comme il faut, il souvre et tout est bien "serré". Mais sous IE6, le menu est "eclaté".
Voici les codes que j'ai utilisé :
CSS:
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
/*width: 600px;/* /*For KHTML*/ /*problème sous IE6*/
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
/*width: 75px; problème sous IE6*/
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
JAVA:
navHover = function() {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);Et le menu en lui même :
<div>
<ul id="navmenu">
<li><a href="index.php">Accueil</a></li>
<li><a href="">Club</a>
<ul>
<li><a href="travaux.php">Histoire</a></li>
<li><a href="resultats.php">Résultats</a></li>
<li><a href="travaux.php">Comité</a></li>
<li><a href="objectifs.php">Objectifs</a></li>
<li><a href="travaux.php">Projet</a></li>
<li><a href="horraire.php">Horraire</a></li>
<li><a href="inscription.php">Inscription</a></li>
<li><a href="travaux.php">Dojo</a></li>
</ul>
</li>
<li><a href="">Membres</a>
<ul>
<li><a href="twillems.php">Thierry Willems</a></li>
<li><a href="instructeurs.php">Instructeur</a></li>
<li><a href="noir.php">Ceintures Noir</a></li>
<li><a href="marron.php">Ceintures Marron</a></li>
<li><a href="travaux.php">Ceintures Bleu</a></li>
<li><a href="travaux.php">Ceintures verte</a></li>
<li><a href="travaux.php">Ceintures Orange</a></li>
</ul>
</li>
<li><a href="">Calendrier</a>
<ul>
<li><a href="travaux.php">Stage Club</a></li>
<li><a href="travaux.php">Stage Fédération</a></li>
<li><a href="travaux.php">Divers</a></li>
</ul>
</li>
<li><a href="termes1.php">Techniques</a></li>
<li><a href="">Multimédia</a>
<ul>
<li><a href="photos.php" >Photos</a></li>
<li><a href="travaux.php">Video</a></li>
<li><a href="travaux.php">Divers</a></li>
</ul>
</li>
<li><a href="">Divers</a>
<ul>
<li><a href="travaux.php">Liens</a></li>
<li><a href="livredor.php">Livre D'or</a></li>
<li><a href="travaux.php">Sponsors</a></li>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
J'espère que ça ne sera pas trop long a lire , je m'en escuse
Voici le lien vers le site :
Http://www.kc-herstal.info
Si vous pouviez m'aider, un grand merci d'avance.
PS: Est il possible d'installer IE6 sur un ordinateur ou il y a déjà IE7. Si oui, comment.
[/i][/i]
Modifié par georgeschris (02 Apr 2007 - 08:38)