IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Bug CSS sous IE!


Sujet :

CSS

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France

    Informations forums :
    Inscription : Octobre 2008
    Messages : 29
    Points : 9
    Points
    9
    Par défaut Bug CSS sous IE!
    Bonjour à tous,

    Voilà, je dois faire un menu déroulant pour le site d'une ville.
    Je me suis promené sur le net pour avoir des sources et je suis tombé sur un code intéressant. Bref voilà, je modifie le code etc, je test sous plusieurs navigateurs, mais sous IE il y a comme un espèce de padding-top ou margin-top qui veut pas partir. Je précise j'suis pas un as du css et du coup j'trouve pas le pourquoi du comment.

    En fait je galère parce que je comprend pas un mot de JS et que j'dois faire la disparition apparition des fenêtres avec du JS mais la n'est pas la question, je posterai dans la bonne section.

    Voici le lien du tuto d'origine et les copies de mes fichiers sources:

    Bon, j'avais posté un problème précédemment mais personne n'avait la réponse.
    J'me suis donc un peu promené sur le net et j'ai trouvé ceci:

    http://www.fairytells.net/index.php/...ilite-partie-1

    Plutôt pas mal au niveau paramètrage de couleurs, j'ai donc changé quelques trucs et pour finir j'ai obtenu ce que je voulais sous FF mais pas sous IE. J'ai des espaces très laids entre les blocs.

    Mon second problème c'est que j'comprend strictement rien au javascript et que je n'ai malheureusement pas le tps de m'y mettre, et que la partie javascript du menu ne fonctionne pas après un copié collé des fichiers du tuto cité ci-dessus.

    Bref, voici les codes sources:

    HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="menu.js" type="text/javascript"></script>
    </head>
     
    <body>
    <div id="menuglobal">
    <div id="menu">
            <ul>
              <li><a href="xxx.html">Culture/animations/loisirs</a>
                <ul>
                  <li><a href="xxx.html">bcdjimc</a></li>
                  <li><a href="xxx.html">Travaux</a></li>
                  <li><a href="xxx.html">Productions</a> 
                    <ul>
                       <li><a href="xxx.html">Productions récentes</a></li>
                       <li><a href="xxx.html">Catalogue du domaine</a></li>
                    </ul>
                  </li>
                  <li><a href="xxx.html">Actualités</a></li>
                  <li><a href="xxx.html">Partenaires</a></li>
                </ul>
              </li>
     
    				<li><a href="yyy.html">Infrastructures</a>
    				<ul>
    					<li><a href="xxx.html">Informations</a></li>
    					<li><a href="xxx.html">Actualités</a>
    					<ul>
    					    <li><a href="xxx.html">A la une</a></li>
    					    <li><a href="xxx.html">Archives</a></li>
    					</ul>
    					</li>
    					<li><a href="xxx.html">Travaux en cours</a></li>
    					<li><a href="xxx.html">Quelques définitions sur la théorie de la fleur qui sent pas bon</a></li>
    				</ul>
    				</li>
     
    				<li><a href="zzz.html">Productions</a>
    				<ul>
    					<li><a href="xxx.html">Publications récentes</a></li>
    					<li><a href="xxx.html">Catalogue général</a></li>
    					<li><a href="xxx.html">Logiciels</a></li>
    					<li><a href="xxx.html">In English</a></li>  
                  	</ul>
    				</li>
     
    				<li><a href="aaa.html">Commander</a>
    				<ul>
    					<li><span>Une publication</span>
    					<ul>
    						<li><a href="xxx.html">Conditions de vente</a></li>
    						<li><a href="xxx.html">Formulaire de commande</a></li>
    						<li><a href="xxx.html">Contact</a></li>
    					</ul>
    					</li>
    					<li><span>Un logiciel</span>
    					<ul>
    						<li><a href="xxx.html">Conditions de vente</a></li>
    						<li><a href="xxx.html">Formulaire de commande</a></li>
    					</ul>
    					</li>
    					<li><a href="Une-prestation.html">Une prestation</a></li>
                  	</ul>
    				</li>
     
    				<li><a href="bbb.html">Partenariats</a>
    				<ul>
    					<li><a href="xxx.html">Associations</a></li>
    					<li><a href="xxx.html">Organismes de recherche</a></li>
    					<li><a href="xxx.html">Entreprises</a></li>
    					<li><a href="xxx.html">International</a></li>
                  	</ul>
                    </li>
    		    </ul>  
            </div>
    </div>
     
    </body>
     
     
    </html>

    CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
     
    /* style des liens */
    #menuglobal
    {
      margin: auto;
      text-align: center;
      font: 80%;
      padding-top: 0px;
    }
     
    /*****************************************************************/
     
    #menu{
      font-size:0.80em;
      margin-top: 3px;
    }
     
    #menu ul{
      margin:0px;
      font-size:1em;
      text-align: center;
    }
     
    #menu ul ul{
      text-align: left;
      color:#000000;
      font-size: 1em;
      width: 8em;
      padding-top: 0.35em;
      padding-left: 2px;
      padding-right: 2px;
    }
     
    #menu ul ul ul{
      width: auto;
      padding-top: 0px;
    }
     
    #menu ul ul ul ul{
      font-size:1em;
    }
     
    #menu li{
      list-style-type:none;
      float:left;
      width:auto;
      padding-top: 0px;
    }
     
    #menu li li{
      list-style-type:none;
      clear:left;
      float:none;
      height:100% !important;
      position:relative !important;
      padding-top: 0px; 
    }
    /***********************************************************************/
     
    #menu li a, #menu li span {
    	display:block;
    	margin:0px 0px 0px 0px;
    	text-decoration:none;
    	color:#FFFFFF;	
    	background-color:#006699;
    	padding-top: 0em;
    }
     
    #menu li a:hover, 
    #menu li a:focus, 
    #menu li span:hover, 
    #menu li span:focus, 
    #menu li.encourt a {
    	color:#FFFFFF;	
    	background-color:#009966;
    	border-bottom: 1px solid #006699;
    	padding-top: 0em;
    }
     
     
    #menu li li a, 
    #menu li li span, 
    #menu li.encourt li a{
    	background-color:#009966;
    	color:#FFFFFF;
    	margin:0px 0px 0px 0px;
    	border-bottom: 1px solid #006699;
    	border-left: 1px solid #006699;
    	border-right: 1px solid #006699;
    	  padding-top: 0em;	
    }
     
    #menu li li a:hover, 
    #menu li li span:hover, 
    #menu li li.encourt span, 
    #menu li li.encourt a, 
    #menu li li.focus a{
    	background-color:#003300;
    	color:#FFF;
    	  padding-top: 0em;
    }
     
    #menu li li li a, 
    #menu li li li span, 
    #menu li li.encourt li a{
    	background-color:#006633;
    	color:#FFFFFF;
    	  padding-top: 0em;	
    }
     
    #menu li li li a:hover, 
    #menu li li li span:hover, 
    #menu li li li a:hover, 
    #menu li li.encourt li.focus a{
    	background-color:#003300;
    	color:#FFFFFF;
    	  padding-top: 0em;
    }
     
     
     
    #menuglobal .withjavascript .encourt .encourt ul, 
    #menuglobal .withjavascript .encourt .encourt .encourt ul{
    	left: 12.5em;
    	width: 14em;
    	top:0em;
    	padding-right:0.2em;	
    }
     
     
     
     
    /* Niveau 1, 2 et 3 masque */
     
    .withjavascript .submenu ul,
    .withjavascript .encourt .submenu ul,
    .withjavascript .encourt .encourt .submenu ul{
    	position:absolute;
    	top:-300em;
    	width:0px;
    	height:0px;
    	margin:0px;
    }
     
    /* Niveau 1, 2 et 3 affiche */
     
    .withjavascript li.encourt{
    	position:relative;
    }
     
    .withjavascript .encourt ul,
    .withjavascript .encourt .encourt ul,
    .withjavascript .encourt .encourt .encourt ul{
    	top:1.5em;
    	width: 12em;
    	height:auto;
    	z-index:50;
    }
     
    #header .withjavascript .encourt .encourt ul, 
    #header .withjavascript .encourt .encourt .encourt ul{
    	left: 12.5em;
    	width: 14em;
    	top:0em;
    	padding-right:0.2em;	
    }

    JavaScript:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
     
    /****** BEGIN LICENSE BLOCK *****
     * Copyright (c) 2005-2006 Harmen Christophe and contributors. All rights reserved.
     *
     * This script is free software; you can redistribute it and/or
     *   modify under the terms of the Creative Commons - Attribution-ShareAlike 2.0
     * <http://creativecommons.org/licenses/by-sa/2.0/>
     * You are free:
     *     * to copy, distribute, display, and perform the work
     *     * to make derivative works
     *     * to make commercial use of the work
     * 
     * Under the following conditions:
     * _Attribution_. You must attribute the work in the manner specified by the
     *   author or licensor.
     * _Share Alike_. If you alter, transform, or build upon this work, you may
     *   distribute the resulting work only under a license identical to this one.
     *     * For any reuse or distribution, you must make clear to others 
     *      the license terms of this work.
     *     * Any of these conditions can be waived if you get permission from 
     *      the copyright holder.
     * 
     * Your fair use and other rights are in no way affected by the above.
     * 
     * This is a human-readable summary of the Legal Code (the full license). 
     * <http://creativecommons.org/licenses/by-sa/2.0/legalcode>
     ***** END LICENSE BLOCK ******/
     
    function trim(s) {return s.replace(/(^\s+)|(\s+$)/g,"");}
     
    function hasClassName(oNode,className) {
    	return (oNode.nodeType==1)?((" "+oNode.className+" ").indexOf(" "+className+" ")!=-1):false;
    }
     
    function addClassName(oNode,className) {
    	if ((oNode.nodeType==1) && !hasClassName(oNode,className))
    		oNode.className = trim(oNode.className+" "+className);
    }
     
    function deleteClassName(oNode,className) {
    	if (oNode.nodeType==1)
        oNode.className = trim((" "+oNode.className+" ").replace(" "+className+" "," "));
    }
     
    function isChildNodeOf(oNode,other) {
    	if (oNode.compareDocumentPosition) {
    		return (oNode.compareDocumentPosition(other)==10);
    	} else if (other.contains) {
    		return other.contains(oNode);
    	}
    	var bIsChildNodeOf = false;
    	function _isChildNodeOf(oNode,other) {
    		while (other) {
    			if (other==oNode) {
    				bIsChildNodeOf = true;
    				return;
    			} else _isChildNodeOf(oNode,other.firstChild);
    			other = other.nextSibling;
    		}
    	}
    	_isChildNodeOf(oNode,other.firstChild);
    	return bIsChildNodeOf;
    }
     
    function addEventLst(EventTarget,type,listener,useCapture) {
    	useCapture = typeof(useCapture)=="boolean"?useCapture:false;
    	if (EventTarget.addEventListener) {
    		EventTarget.addEventListener(type, listener, useCapture);
    	} else if ((EventTarget==window) && document.addEventListener) {
    		document.addEventListener(type, listener, useCapture);
    	} else if (EventTarget.attachEvent) {
    		EventTarget["e"+type+listener] = listener;
    		EventTarget[type+listener] = function() {EventTarget["e"+type+listener](window.event);}
    		EventTarget.attachEvent("on"+type, EventTarget[type+listener]);
    	} else {
    		EventTarget["on"+type] = listener;
    	}
    }
     
    function removeEventLst(EventTarget,type,listener,useCapture) {
    	useCapture = typeof(useCapture)=="boolean"?useCapture:false;
    	if (EventTarget.removeEventListener) {
    		EventTarget.removeEventListener(type,listener, useCapture);
    	} else if ((EventTarget==window) && document.removeEventListener) {
    		document.removeEventListener(type,listener, useCapture);
    	} else if (EventTarget.detachEvent) {
    		EventTarget.detachEvent("on"+type, EventTarget[type+listener]);
    		EventTarget[type+listener]=null;
    		EventTarget["e"+type+listener]=null;
    	} else {
    		EventTarget["on"+type]=null;
    	}
    }
     
    /*
    	domEl() function - painless DOM manipulation
    	written by Pawel Knapik  //  pawel.saikko.com
    */
     
    var domEl = function(e,c,a,p,x) {
    if(e||c) {
    	c=(typeof c=='string'||(typeof c=='object'&&!c.length))?[c]:c;	
    	e=(!e&&c.length==1)?document.createTextNode(c[0]):e;	
    	var n = (typeof e=='string')?document.createElement(e) : !(e&&e===c[0])?e.cloneNode(false):e.cloneNode(true);	
    	if(e.nodeType!=3) {
    		c[0]===e?c[0]='':'';
    		for(var i=0,j=c.length;i<j;i++) typeof c[i]=='string'?n.appendChild(document.createTextNode(c[i])):n.appendChild(c[i].cloneNode(true));
    		if(a) {for(var i=(a.length-1);i>=0;i--) a[i][0]=='class'?n.className=a[i][1]:n.setAttribute(a[i][0],a[i][1]);}
    	}
    }
    	if(!p)return n;
    	p=(typeof p=='object'&&!p.length)?[p]:p;
    	for(var i=(p.length-1);i>=0;i--) {
    		if(x){while(p[i].firstChild)p[i].removeChild(p[i].firstChild);
    			if(!e&&!c&&p[i].parentNode)p[i].parentNode.removeChild(p[i]);}
    		if(n) p[i].appendChild(n.cloneNode(true));
    	}	
    }
     
    /*
    Copyright (c) 2006 Stuart Colville
    <lien url="http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/">http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/</lien>
     
    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
    documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
    the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 
    and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
     
    The above copyright notice and this permission notice shall be included in all copies or substantial 
    portions of the Software.
     
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED 
    TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL 
    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF 
    CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS 
    IN THE SOFTWARE.
    */
     
    function getElementsByClassName(strClass, strTag, objContElm) {
      strTag = strTag || "*";
      objContElm = objContElm || document;    
      var objColl = (strTag == '*' && document.all) ? document.all : objContElm.getElementsByTagName(strTag);
      var arr = new Array();                              
      var delim = strClass.indexOf('|') != -1  ? '|' : ' ';   
      var arrClass = strClass.split(delim);    
      for (i = 0, j = objColl.length; i < j; i++) {
        if( objColl[i].tagName == undefined ) continue;  
        var arrObjClass = objColl[i].className.split(' ');   
        if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
        var c = 0;
        comparisonLoop:
        for (k = 0, l = arrObjClass.length; k < l; k++) {
          for (m = 0, n = arrClass.length; m < n; m++) {
            if (arrClass[m] == arrObjClass[k]) c++;
            if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
              arr.push(objColl[i]); 
              break comparisonLoop;
            }
          }
        }
      }
      return arr; 
    }
     
    // To cover IE 5 Mac lack of the push method
    Array.prototype.push = function(value) {
      this[this.length] = value;                                                              
    }
     
    var menu_timerID = null;
     
    function initMenus() {
        var nMenu = document.getElementById("menu");
        var l = 0;
        var ancrea = 'ancrea';
        nMenu.insertBefore(domEl('p',[domEl('a','Désactiver le menu',[['href','javascript:menuController();']])],[['id','menuControle']]),nMenu.firstChild); 
        var leMenu=nMenu.getElementsByTagName('ul');
        meschilds = leMenu[0].childNodes;
        for(var h=0; h<meschilds.length;h++){
        	if(meschilds[h].nodeType == 1){
                var l = l+1;
                subul = meschilds[h].childNodes[2];
        		subul.insertBefore(domEl('li',[domEl('a','Aller au menu suivant',[['class','skiplink']])],[['class','skipli']]),subul.firstChild);
                meschilds[h].insertBefore(domEl('a','',[['name','skip'+l],['id','skip'+l],['class','ciblea']]),meschilds[h].firstChild);           
            }
        }
        for(var i=1;i<leMenu.length;i++){
    		var liparent;
            liparent=leMenu[i].parentNode;
            addClassName(liparent,"submenu");
     
        }
     
        var lesskip = getElementsByClassName('skiplink', 'a', nMenu);
        for(var j=0;j<lesskip.length;j++){
        lesskip[j].href = "#skip"+(j+2);
        if(j+1==lesskip.length){
    		lasta = document.createElement("a");
        	lasta.id = "skip"+(j+2);
        	lasta.name = "skip"+(j+2);
            lasta.className= "ciblea";
    		nMenu.appendChild(lasta);
            lesskip[j].firstChild.nodeValue="Sortir du menu";
    	}
        }
        loadMenus();
    }
     
    function loadMenus() {
        var nMenu = document.getElementById("menu");
        if (nMenu.addEventListener) {
    		nMenu.addEventListener("mouseover",eventLstMontrerMenu,true);
    		nMenu.addEventListener("focus",eventLstMontrerMenu,true);
    		nMenu.addEventListener("DOMFocusIn",eventLstMontrerMenu,true);
    		nMenu.addEventListener("mouseout",eventLstCacherMenus,true);
    		nMenu.addEventListener("blur",eventLstCacherMenus,true);
    		nMenu.addEventListener("DOMFocusOut",eventLstCacherMenus,true);
     
    	} else {
    		var nA;
    		var lessubmenu = getElementsByClassName('submenu', '*', nMenu);
    		for (var i=0; i<lessubmenu.length; i++) {
    			addEventLst(lessubmenu[i],"mouseover",eventLstMontrerMenu);
    			addEventLst(lessubmenu[i],"mouseout",eventLstCacherMenus);
    			for (var j=0; nA = lessubmenu[i].getElementsByTagName("a")[j]; j++) {
    				addEventLst(nA,"focus",eventLstMontrerMenu);
    				addEventLst(nA,"blur",eventLstCacherMenus);
    			}
    		}
    	}
     
     
        /* on ajoute notre image de fond dans les li pour eviter superposition */
        var leMenu=nMenu.getElementsByTagName('ul');
        for(var i=1;i<leMenu.length;i++){
    		var cLi;
            cLi=leMenu[i].getElementsByTagName("li");
            for (var j=0; cLi[j]; j++) {
                var refcLi = cLi[j].firstChild;
                nBackground = document.createElement("img");
                nBackground.src = "images/testImgActives.gif";
                nBackground.className = "itemBackground";
                nBackground.alt="";
                cLi[j].insertBefore(nBackground,refcLi);
            }    
        }
     
        var mCtrl = document.getElementById("menuControle"); 
    	mCtrl.firstChild.firstChild.nodeValue="Désactiver le menu";
    	addClassName(nMenu,"withjavascript");
     
    }
     
    function unloadMenus() {
    	var nMenu = document.getElementById("menu");
        if (nMenu.removeEventListener) {
    		nMenu.removeEventListener("mouseover",eventLstMontrerMenu,true);
    		nMenu.removeEventListener("focus",eventLstMontrerMenu,true);
    		nMenu.removeEventListener("DOMFocusIn",eventLstMontrerMenu,true);
    		nMenu.removeEventListener("mouseout",eventLstCacherMenus,true);
    		nMenu.removeEventListener("blur",eventLstCacherMenus,true);
    		nMenu.removeEventListener("DOMFocusOut",eventLstCacherMenus,true);
     
    	} else {
    		var nA;
    		var lessubmenu = getElementsByClassName('submenu', '*', nMenu);
    		for (var i=0; i<lessubmenu.length; i++) {
    			removeEventLst(lessubmenu[i],"mouseover",eventLstMontrerMenu);
    			removeEventLst(lessubmenu[i],"mouseout",eventLstCacherMenus);
    			for (var j=0; nA = lessubmenu[i].getElementsByTagName("a")[j]; j++) {
    				removeEventLst(nA,"focus",eventLstMontrerMenu);
    				removeEventLst(nA,"blur",eventLstCacherMenus);
    			}
    		}
    	}
     
        /* on supprime notre image de fond dans les li pour eviter superposition */
        var leMenu=nMenu.getElementsByTagName('ul');
        for(var i=1;i<leMenu.length;i++){
    		var cLi;
            cLi=leMenu[i].getElementsByTagName("li");
            for (var j=0; cLi[j]; j++) {
                cLi[j].removeChild(cLi[j].firstChild);
            }    
        }
     
        var mCtrl = document.getElementById("menuControle");
    	mCtrl.firstChild.firstChild.nodeValue="Activer le menu";
        deleteClassName(nMenu,"withjavascript");
    }
     
    function menuController() {
    	var nMenu = document.getElementById("menu");
    	if (hasClassName(nMenu,"withjavascript")) unloadMenus();
    	else loadMenus();
    }
     
    function eventLstMontrerMenu(evt) {
    	var oNode;
    	if (evt && evt.target) {
    		oNode = evt.target;
    	} else if (window.event) {
    		oNode = window.event.srcElement;
    	} else {
    		oNode = this;
    	}
    	if (menu_timerID!=null) {cacherMenus();}
    	while (oNode.id!="menu") {
    		if (hasClassName(oNode,"submenu")) {
    			addClassName(oNode,"encourt");
            } else if(hasClassName(oNode,"skiplink")){
            oNode.parentNode.className = "skiplifocus";
            } else{
                addClassName(oNode,"focus");
            }
    		oNode = oNode.parentNode;
    	}
     
     
    	// Pour MSIE ou il faut annuler le bouillonnement
    	if (window.event &&
    		(typeof(window.event.cancelBubble)=="boolean") )
    	{
    		window.event.cancelBubble = true;
    	}
    	return false;
    }
     
    function eventLstCacherMenus(evt) {
    	var oNode, nRelatedTarget;
    	if (evt && evt.target) {
    		oNode = evt.target;
    		nRelatedTarget = evt.relatedTarget;
    	} else if (window.event) {
    		oNode = window.event.srcElement;
    		nRelatedTarget = window.event.toElement;
     
    	} else {
    		oNode = this;
    	}
     
    	if (nRelatedTarget) {
    		var nCacherChildsTheme;
    		while (oNode.id!="menu") {
    			if ( (hasClassName(oNode,"submenu")) && (isChildNodeOf(nRelatedTarget,oNode)) ) {
    				nCacherChildsTheme = oNode;
    				break;
    			}
    			oNode = oNode.parentNode;
    		}
     
    		if (nCacherChildsTheme) {
    			cacherMenus(nCacherChildsTheme);
            } else {
    			menu_timerID = setInterval("cacherMenus()",800);
    		}
     
    	} else {
    		cacherMenus();
    	}
     
    	// Pour MSIE ou il faut annuler le bouillonnement
    	if (window.event &&
    		(typeof(window.event.cancelBubble)=="boolean") )
    	{
    		window.event.cancelBubble = true;
    	}
    	return false;
    }
     
    function cacherMenus(oNode) {
    	var nMenu = document.getElementById("menu");
    	if (menu_timerID!=null) {
    		clearInterval(menu_timerID);
    		menu_timerID = null;
    	}
    	oNode = oNode?oNode:document.getElementById("menu");
    	var lessubmenu = getElementsByClassName('submenu','*', nMenu);
        var lessubfocus = getElementsByClassName('focus','*', nMenu);
    	var lessubskiplink = getElementsByClassName('skiplink','*', nMenu);
    	for (var i=0; lessubmenu[i]; i++) {
    		deleteClassName(lessubmenu[i],"encourt");
    	}
    	for (var j=0; lessubfocus[j]; j++) {
    		deleteClassName(lessubfocus[j],"focus");
    	}
        for (var k=0; lessubskiplink[k]; k++) {
    		lessubskiplink[k].parentNode.className = "skipli";
    	}
    }
    Je rappelle que le JS j'ai fait un copié collé idiot car je n'y comprend strictement rien.

    En fait sous FF3 ou Opera, ça fait ce que je veux, un espace entre la bande du menu et les sous menu... Mais sous IE7 cet espace se met partout entre chaque bloc du menu et je voudrai que ça rende comme dans FF3... J'espere que j'suis clair... Mouais je doute lol.

  2. #2
    Futur Membre du Club
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France

    Informations forums :
    Inscription : Octobre 2008
    Messages : 29
    Points : 9
    Points
    9
    Par défaut
    Bon problème résolu en fait, c'était un problème de float en fait.

    Y avait un clear: left et un float none a virer.

    Voici la partie changée au cas ou ça intéresse quelqu'un:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #menu li li{
      list-style-type:none;
      height:100% !important;
      width: 100% !important;
      position:relative !important;
      padding-top: 0px; 
    }
    (voire le fichier CSS du post précédent).

    J'ai aussi rajouté un width: 100% pour que les sous-menus aient tous la même taille.

    Bon j'vais embêter les gens avec mon problème de JS maintenant parce que la le menu sert tjs à rien.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Bug mise en page css sous IE6+, les autre ok.
    Par yann123456 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/01/2009, 22h36
  2. [CSS] Bug bizarre sous IE mais pas FF
    Par totofweb dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 13/09/2006, 20h40
  3. [css sous ie] menu qui disparait qd clic sur precedent ...
    Par michaelbob dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 22/02/2006, 14h37
  4. Pb de CSS sous IE
    Par NicoStein dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 04/05/2005, 00h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo