Menu déroulant sous IE et FIREFOX |
|
| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
Lexgotham
frontpage mioche
|
 Menu déroulant sous IE et FIREFOX , Posté le: 26-02-2005 18:06 |
|
|
Bonjour à tous,...
Je viens de suivre le tuto de iubito.free.fr pour intégrer un menu déroulant usant de css et javascript sur un site.
Tout fonctionne MAIS il y a comme un sérieux problème de positionnement.
En fait, ce script n'est pas adapté aux sites centrés or je suis justement dans ce cas.
Il y a bien une fonction var pour centrer que j'ai utilisé mais
1) Ca ne fonctionne pas sous IE6 qui ne reconnait pas la fonction
2) Ce n'est pas parfaitement centré sous les geckos (une 20ène de pixels vers la droite) à croire que le script considère la scrollbar comme faisant partie de la largeur du browser.
J'ai bien essayé d'isoler tout ça dans une div mais le script est récalcitrant et ne veut se laisser contenir.
Voici l'adresse pour vous faire une idée sous les différents navigateurs:
http://www.lexgotham.com
Quelqu'un aurait une astuce?
Si vous avez besoin de mon code, dites-moi ce qu'il vous faut, je l'afficherai ici.
Merci beaucoup.  |
Dernière édition par Lexgotham le 27-02-2005 15:09; édité 2 fois |
|
salemioche
salemioche
 |
|
Lexgotham
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 26-02-2005 18:35 |
|
|
Merci d'avoir répondu aussi rapidement!
J'y avais déjà écumé toutes les pages mais aucun de leurs tutos ne semble s'appliquer à mon cas.
Cela dépasse le cadre du CSS et des balises traditionnelles il me semble.
Je pense que c'est purement un problème à résoudre dans le fichier ".js".
Quelle poisse!
Je ne suis pas particulièrement attaché à ce script-ci mais j'ai tout essayé:
-Les iframes, c'est grosbill et surtout, ça pose un problème au moment du déroulement du menu.
-Les tableaux et calques visibles/invisibles sous Dreamweaver, c'est tout aussi grosbill et pas moyen d'obtenir des calques bien positionnés parfaitement en-dessous des menus "parents" sur tous les navigateurs "standards".
-Le "include" ne résout rien non plus puisque, contrairement au iframes, il fait partie intégrante de la page PHP qui le contient et donc, il reste assujeti au mêmes règles.
Si quelqu'un a une inspiration, je suis preneur!
PS: l'idée serait (comme pour les iframes), de trouver un moyen pour que le script reconnaisse comme origine, le bord supérieur gauche du site et non celui du navigateur.
Si quelqu'un connait une astuce pour "tromper" le script à ce niveau, je crois qu'on aurait la solution...
Mais là, ça me dépasse de loin.  |
|
|
salemioche
salemioche
|
|
Lexgotham
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 26-02-2005 19:40 |
|
|
Je l'ai essayé hier et je coince là-dessus:
| Code: |
Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner. |
Je ne vois pas trop comment concilier des positionnements absolus et un site qui se redimensionne à volonté.
Résultat: j'obtiens une div qui s'agrandit ou se rétrecit à chaque ouverture/fermeture d'un sous-menu.
C'est inutilisable comme tel (a moins qu'il y ait une solution).
Je suis, pour l'instant occupé à voir un script posté par un membre d'ici qui est prometteur.
Si j'y arrive, je vous dis quoi.
En attendant, je reste ouvert à toute proposition!
Merci beaucoup salemioche de faire cas de mon problème! |
|
|
salemioche
salemioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 26-02-2005 19:50 |
|
|
aorès pour debugger plus, il faudrait passer un peu de temps, désolé de ne pouvoir faire plus...
sinon, très joli site, manque juste un menu qui marche  |
|
|
Lexgotham
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 26-02-2005 21:17 |
|
|
|
|
|
Lexgotham
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 27-02-2005 0:02 |
|
|
Opération réussie!
J'ai utilisé une variante du script de Alsacreation et j'ai fait quelques chipottages entre autre avec (html>body .css{}) pour mettre IE6, Firefox et Netscape d'accord.
J'ai aussi utilisé une Div grossière (temporaire?) pour récupérer une largeur d'un bouton spécifique.
Le menu est en include dans ma page principale et voici le contenu du fichier menu.php:
Y'a donc rien à changer nulle part ailleurs, juste à insérer dans sa page
| Code: |
<script type="text/javascript">
<!--
window.onload=montre;
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';}
}
//-->
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #232323;
font-family:verdana, arial, sans-serif;
font-size: 10px;
text-align: center;
}
#global {
margin-left: auto; ;
margin-right: auto;
width:100%;
text-align: left;
position: relative;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 85px;
margin-left:1px;
background-color: #812828;
}
.xx {
float: left;
width: 89px;
margin-left:1px;
background-color: #812828;
margin: 0;
padding: 0;
list-style-type: none;
}
html>body .xx {
width: 91px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
font-family:verdana, arial, sans-serif;
color: #cccccc;
border: 1px solid black;
height: 18px;
line-height: 14px;
}
html>body #menu dt {
line-height: 16px;
}
#menu dd {
display: none;
border: 1px solid black;
}
#menu li {
text-align: center;
background: #812828;
font-family:verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
}
#menu li a, #menu dt a {
color: #cccccc;
text-decoration: none;
display: block;
height: 100%;
background-color: #812828;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<div id="global">
<div id="menu">
<dl>
<dt onMouseOver="javascript:montre('smenu1');">News</dt>
<dd id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu2');">Hardware</dt>
<dd id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu3');">Software</dt>
<dd id="smenu3" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu4');">Contact</dt>
<dd id="smenu4" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu5');">Contact</dt>
<dd id="smenu5" onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu6');">Echanges</dt>
<dd id="smenu6" onMouseOver="javascript:montre('smenu6');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<div class="xx">
<dt onMouseOver="javascript:montre('smenu7');">Contributions</dt>
<dd id="smenu7" onMouseOver="javascript:montre('smenu7');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</div>
<dl>
<dt onMouseOver="javascript:montre('smenu8');">Ressources</dt>
<dd id="smenu8" onMouseOver="javascript:montre('smenu8');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu9');">Aide</dt>
<dd id="smenu9" onMouseOver="javascript:montre('smenu9');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Liens</a></li>
</ul>
</dd>
</dl>
</div>
</div> |
Je n'ai pas encore attaqué la suite au niveau des sous-menu (il me semble que je vais suer pour ça).
De plus, Netscape n'a pas l'air de vouloir passer le sous-menu au premier plan.
Mais bon, petit à petit...
Je vous tiens au courant!
PS: Merci pour l'attention salemioche! |
|
|
Lexgotham
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 27-02-2005 15:05 |
|
|
Ah!
J'en remet une couche!
J'étais pas trop content du menu un peu trop simpliste ci-dessus et ai donc replanché cette nuit sur celui de départ sans trop en attendre puisque j'en avais un d'acquis.
Et bien j'ai réussi! 
Pour ceux qui comptent utiliser ce super menu de Sylvain Machefert:
( http://iubito.free.fr )
En fait j'ai redéfini #conteneurmenu en lui donnant une position relative.
J'ai ensuite, rectifié le tir du centrage pas "trop centré" de Netscape/Firefox en jouant avec les valeurs du fichier "menu.js" sans trop savoir ce que je faitsait à vrai dire (à l'essai) et sans trop me préoccuper encore du résultat sur IE.
Ensuite, je suis retourné vers #conteneurmenu et j'ai assigné une width, top et left a mon aise, vu que cela n'altérait en rien l'affichage sous les geckos...
Résultat, c'est pas chirurgical mais ça marche très très bien.
(Et c'est bien plus joli)
http://www.lexgotham.com
PS: C'est peut être pas grand chose mais quand on n'y connait rien, ça fait trop plaisir de parvenir à un résultat probant. On a l'impression d'avoir déchiffré la pierre de rosette! |
|
|
salemioche
salemioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 27-02-2005 15:09 |
|
|
nickel
bravo pour le site (bis  ) |
|
|
Lexgotham
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 27-02-2005 15:16 |
|
|
Oh!
Reste plus qu'à faire toutes les autres pages, intégrer un PHPBB "remanié", dynamiser le contenu avec une base de donnée, partager les variables avec le forum et optimiser le code.
Une broutille, mdr!
Je dois bien avoir 1% du site, à cette heure mais un gros!
A+ |
|
|
Lexgotham
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 15-04-2005 19:39 |
|
|
Salut!
Je viens de recevoir un mp à propos du menu qui se trouve dans le lien de mon site.
Je voulais juste préciser qu'il y a eu du changement depuis et que cela ne correspond plus trop à ce qui est marqué ci-dessus.
Pour qu'il n'y ait pas de confusion, je préférais vous le dire.
A++ |
|
|
Setosan
frontpage mioche
|
| Menu déroulant sous IE et FIREFOX , Posté le: 07-05-2005 17:09 |
|
|
Salut,
Je mate ton fichier " iemenu.js " mais je ne comprends rien.
Je veux faire un menu +- comme le tiens, suis-obligé d'avoir un fichier js aussi compliqué (caractere que je ne comprends pas).
Merci |
|
|
|
|
 S'enregistrer
 Profil
 Se connecter pour vérifier ses messages privés
 Rechercher
 Membres
 FAQ
 Connexion
|
