Menu : problème de "scintillement".

Menu : problème de "scintillement". - HTML/CSS - Programmation

Marsh Posté le 10-05-2005 à 10:41:27    

Bonjour à toutes et tous.
 
J'essaie de faire un menu déroulant. Je me suis inspiré de cela (même plus qu'inspiré) : http://css.alsacreations.com/modelesmenus/vd2.htm
Merci à Raphaël GOETTER au passage et à tous ceux qui partagent leur savoir faire ( http://www.elmoustikoblog.net/tutoriels/css/mise_page/ , http://marcarea.com/tuto/menu01.php etc...).
 
Un petit problème dans ce menu cependant (en fait un peu gros parce que cela le rend inutilisable).
Sour IE, tout "va bien", sous Firefox, le menu "flicke" comme un fou avec le fond : je n'ai pourtant pas développé ma page pour IE spécialement. Je crois qu'en fait le menu (toujours ici http://css.alsacreations.com/modelesmenus/vd2.htm) le fait aussi mais comme il est "petit", cela ne se voit pas beaucoup.
 
 
LE CODE HTML (avec un peu de  javascript au début, je voulais sans mais je ne crois pas que cela soit possible tout en restant compatible avec IE) :

Citation :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr">
 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/comm/enterprise/styles/index_xx.css">
<title>Direction Générale Entreprises et industrie : Page d'accueil</title>
 
<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>
 
</head>
 
 
<body>
 
<div id="contenu">
  <h1>COMPETITIVENESS FOR SUSTAINABLE GROWTH</h1>
  <h2>Quoi de neuf ?</h2>
</div>
 
 
<dl id="menu">
  <dt onmouseover="javascript:montre('smenu1');"><a href="/comm/enterprise/policy_fr.htm">DOMAINES D'ACTION...</a></dt>
  <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
    <ul>
  <li>
  <a href="/comm/enterprise/policy_fr.htm">DOMAINES D'ACTION</a></li>
  <li>
  <a href="/comm/enterprise/enterprise_policy/index_fr.htm">Politique d'entreprise</a></li>
  <li>
  <a href="/comm/enterprise/enterprise_policy/industry/index_fr.htm">Politique industrielle</a></li>
  <li>
  <a href="/comm/enterprise/enlargement/index_fr.htm">Elargissement et politique d'entreprise</a></li>
  <li>
  <a href="/comm/enterprise/entrepreneurship/index_fr.htm">Promotion de l'entrepreunariat et des PMEs - artisanat, économie sociale</a></li>
  <li>
  <a href="/comm/enterprise/entrepreneurship/financing/index_en.htm">Accès au financement [EN]</a></li>
  <li>
  <a href="/comm/enterprise/innovation/index_en.htm">Promotion de l'innovation et du transfert de technologies [EN]</a></li>
  <li>
  <a href="/comm/enterprise/services/index.htm">Services, commerce et distribution, tourisme [EN]</a></li>
  <li>
  <a href="/comm/enterprise/ict/index.htm">E-business - Industries et services des technologies de l'information et de la communication [EN]</a>
  <li>
  <a href="/comm/enterprise/csr/index_fr.htm">Responsabilité sociale des entreprises</a></li>  
  <li>
  <a href="/comm/enterprise/regulation/index_en.htm">Réglementation - Marché unique - Nouvelle approche globale [EN]</a></li>
  <li>
  <a href="/comm/enterprise/regulation/goods/index_fr.htm">Libre circulation des marchandises</a></li>
  <li>
  <a href="/comm/enterprise/space/index_en.htm">Politique spatiale [EN]</a></li>
  <li>
  <a href="/comm/enterprise/environment/index.htm">Environnement et développement durable [EN]</a></li>
  <li>
  <a href="/comm/enterprise/ida/index.htm">IDABC (services paneuropéens d'administration en ligne aux administrations publiques, aux entreprises et aux citoyens) [EN]</a></li>
  <li>
  <a href="/comm/enterprise/regulation/better_regulation/index_fr.htm">Mieux légiférer</a></li>
    </ul>
   </dd>
 
   
   
  <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="/comm/enterprise/sectors_fr.htm">SECTEURS INDUSTRIELS...</a></dt>
   <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
    <ul>
     <li><a href="/comm/enterprise/sectors_fr.htm">SECTEURS INDUSTRIELS</a></li>
     <li><a href="/comm/enterprise/aerospace/index_fr.htm">Aérospatiale</a></li>
    </ul>
 
   </dd>
 
  <dt><a href="/comm/enterprise/news/index.htm">Evènements [EN]</a></dt>
  <dt><a href="/comm/enterprise/speeches/index.htm">Discours clefs [EN]</a></dt>
  <dt><a href="/comm/enterprise/library/index.htm">Publications [EN]</a></dt>
  <dt><a href="/comm/enterprise/funding/index.htm">Instruments financiers [EN]</a></dt>
  <dt><a href="/comm/enterprise/calls/calls.html">Appels d'offres [EN]</a></dt>
  <dt><a href="/comm/enterprise/faq/index_en.htm">Foire Aux Questions [EN]</a></dt>
  <dt><a href="/comm/enterprise/consultations/index_fr.htm">Consultations en ligne</a></dt>
   
 
   
 </dl>
     
</body>  
 
</html>


 
LA CSS :

Citation :


 
body
 {
 overflow: auto;
 margin: 0;
 padding: 0;
 }
h1
 {
 text-align: center;
 font-weight: bold;
 font-size: 120%;
 color: #3399CC;
 font-family: Arial, Verdana, Sans-Serif;
 padding: 0px 0px 0px 0px;
 }
h2
 {
 text-align: left;
 font-weight: bold;
 font-size: 90%;
 color: #607189;
 font-family: Arial, Verdana, Sans-Serif;
 padding: 0px 0px 0px 0px;
 margin: 50px 0px 6px 4px;
 }
div#contenu
 {
 margin: 36px 190px 0 190px;  
 }
dl, dt, dd, ul, li
 {
 list-style-type: none;
 }
#menu
 {
 position: absolute;
 top: 99px;
 left: 8px;
 width: 164px;
 height: 188px;
 margin: 0;
 background-color: #FAFAFB;
 }
#menu dt
 {
 margin: 6px;  
 font-family: Arial, Helvetica, sans-serif;
 font-size: 70%;
 font-weight: bold;
 }
#menu dt a
 {
 color: #2982AE;
 text-decoration: none;
 }
 
#menu dt a:hover
 {
 text-decoration: underline;
 }
#menu dd
 {
 position: absolute;
 margin-top: -1em;
 left: 120px;
 width: 554px;
 background-color: #FAFAFB;
 border: 1px solid #999999;
 }
#menu ul
 {
 padding: 0;
 margin: 0;
 }
#menu li
 {
 padding: 0;
 margin: 4px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 70%;
 }
#menu li a
 {
 color: #2982AE;
 text-decoration: none;
 }
#menu li a:hover
 {
 text-decoration: underline;
 }


 
 
Y'aurait-il une possibilité d'empêcher ce scintillement svp ?
Il se produit lorsqu'il passe sur la DIV "contenu".
Je dois vous avouer mon ignorance presque totale du javascript.
 
Si vous avez une piste...
 
Et si vous voyez d'autres problèmes, suis toujours ok pour apprendre, sinks.
 
 
Merci.


Message édité par Beral2 le 10-05-2005 à 10:48:48
Reply

Marsh Posté le 10-05-2005 à 10:41:27   

Reply

Marsh Posté le 10-05-2005 à 12:24:49    

j'ai eut le meme probleme récemment.
 
vérifie simplement si les paramètres du cache ie, n'est pas fixé à "a chaque visite".

Reply

Marsh Posté le 10-05-2005 à 12:37:01    

Le problème n'intervient que sous Firefox, je regarde ses paramètres à lui et posterai en Edit...
 
EDIT : désolé, pas trouvé de paramêtre à modifier qui puisse influer sur ce problème. Et puis, s'il faut demander au visiteur de changer ces paramêtres, vais m'faire lyncher ;) à raison. Sinks qd-même.


Message édité par Beral2 le 10-05-2005 à 14:18:20
Reply

Marsh Posté le 11-05-2005 à 10:20:04    

:up: Help plize, si ce défaut est inhérent à ce menu, pourriez-vous m'indiquer une méthode pour en faire un (avec le moins de javascript possible) qui fonctionne svp ?
 
Sinks.

Reply

Marsh Posté le 11-05-2005 à 10:38:23    

Reply

Marsh Posté le 11-05-2005 à 11:55:37    

Il semblerait, dixit Raphaël GOETTER, que le problème soit dû au code javascript (langage que je ne connais pas, si j'avais pu faire un menu déroulant sans, m'en serais bien passé).
 
Voici le 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>
 
Des pros du javascript qui puissent m'aider ?
 
Sinks.

Reply

Marsh Posté le 11-05-2005 à 15:14:27    

Bon désolé everioine,
 
c'est moi qui avait fait n'importe quoi dans le code... HTML.
Ligne qui m'a enduit d'horreur ;) : <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
 
Voili-voilou, merci.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed