28172 sujets

CSS et mise en forme, CSS3

Menu qui ne s'affiche pas correctement sous IE

Bonjour j'ai créer un menu en CSS et Javascript mais il ne s'affiche pas correctement sous IE... J'aimerais pouvoir le faire fonctionner sous IE et aussi sur les autres navigateurs.

Voilà mon HTML :

<div id="barre-menu">
		<div id="menu">
			<div id="accueil"> 
				<a href="/index/index" style="display:block;width:100%;height:100%;"></a>
			</div>
			
			<div id="scitoyen"> 
				<a href="#" style="display:block;width:100%;height:100%;"></a>
					
			</div>
			
			<div id="idees"> 
				<a href="#" style="display:block;width:100%;height:100%;"></a>
			</div>
			
			<div id="volontaire"> 
				<a href="/auth/inscription" style="display:block;width:100%;height:100%;"></a>
			</div>
			
			<div id="regions"> 
				<a href="#" style="display:block;width:100%;height:100%;"></a>
			</div>
			
			<div id="blog"> 
				<a href="/blog/blog/" style="display:block;width:100%;height:100%;"></a>
			</div>
			
			<div id="don"> 
				<a href="/page/" style="display:block;width:100%;height:100%;"></a>
			</div>
			
			<div id="sc">
					<ul>
						<li><a href="/page/">blabla</a></li>
						<li><a href="/page/">blabla</a></li>
						<li><a href="/page/e">blabla</a></li>
					</ul>
			</div>
			
			<div id="sidees">
					<ul>
						<li><a href="/page/">blabla</a></li>
						<li><a href="/page/l">blablal</a></li>
						<li><a href="/page/n">blabla</a></li>
						<li><a href="/page/">blabla</a></li>
						<li><a href="/page/e">blabla</a></li>
						
					</ul>
			</div>
			
			<div id="sregions">
					<ul>
						<li><a href="/index/index">Alsace</a></li>
						<li><a href="/index/index">Aquitaine</a></li>
						<li><a href="/index/index">Auvergne</a></li>
						<li><a href="/index/index">Bourgogne</a></li>
						<li><a href="/index/index">Bretagne</a></li>
						<li><a href="/index/index">Centre</a></li>
						<li><a href="/index/index">Champagne-Ardenne</a></li>
						<li><a href="/index/index">Corse</a></li>
						<li><a href="/index/index">Franche-Comté</a></li>
						<li><a href="/index/index">Île-de-France</a></li>
						<li><a href="/index/index">Languedoc-Roussillon</a></li>
						<li><a href="/index/index">Limousin</a></li>
						<li><a href="/index/index">Lorraine</a></li>
						<li><a href="/index/index">Midi-Pyrénées</a></li>
						<li><a href="/index/index">Nord-Pas-de-Calais</a></li>
						<li><a href="/index/index">Basse-Normandie</a></li>
						<li><a href="/index/index">Haute-Normandie</a></li>
						<li><a href="/index/index">Pays de la Loire</a></li>
						<li><a href="/index/index">Picardie</a></li>
						<li><a href="/index/index">Poitou-Charentes</a></li>
						<li><a href="/index/index">Provence-Alpes-Côte d'Azur</a></li>
						<li><a href="/index/index">Rhône-Alpes</a></li>
						<li><a href="/index/index">Guadeloupe</a></li>
						<li><a href="/index/index">Guyane</a></li>
						<li><a href="/index/index">Martinique</a></li>
						<li><a href="/index/index">La Réunion</a></li>
					</ul>
			</div>
			
		</div>
	</div>



Le javascript simplissime :

<script>
     $(document).ready(function(){

       // Menu citoyen
       $("#scitoyen").mouseover(function(event){
    	   $("#sc").show();
       });
       $("#scitoyen").mouseout(function(event){
    	   $("#sc").hide();
       });
       $("#sc").mouseout(function(event){
    	   $("#sc").hide();
       });
       $("#sc").mouseover(function(event){
    	   $("#sc").show();
       });


       // Menu idées
       $("#idees").mouseover(function(event){
    	   $("#sidees").show();
       });
       $("#idees").mouseout(function(event){
    	   $("#sidees").hide();
       });
       $("#sidees").mouseout(function(event){
    	   $("#sidees").hide();
       });
       $("#sidees").mouseover(function(event){
    	   $("#sidees").show();
       });


       // Menu Regions
       $("#regions").mouseover(function(event){
    	   $("#sregions").show();
       });
       $("#regions").mouseout(function(event){
    	   $("#sregions").hide();
       });
       $("#sregions").mouseout(function(event){
    	   $("#sregions").hide();
       });
       $("#sregions").mouseover(function(event){
    	   $("#sregions").show();
       });
       
     });
</script>


Les CSS :

#barre-menu {
	position:relative;
	width:1000px;
	height: 42px;
	
	background-image: url('/img/imgsc/barre-menu.png');
	padding-top:20px;
	margin-left:175px;
	margin-top:5px;
	z-index: 10;
	
}

#menu {
	position:relative;
	width:929px;
	height: 25px;
	background-image: url('/img/imgsc/menu.png');
	z-index: 1;
	margin-left:20px;
}

#menu:after { 
  content: ""; 
  display: block; 
  clear: both; 
}

#accueil {
	width:50px;
	height:25px;
	text-align:center;
	float:left;
}

#scitoyen {
	position:relative;
	width:180px;
	height:25px;
	text-align:center;
	margin-left: 40px;
	float:left;
}

#idees {
	width:120px;
	height:25px;
	text-align:center;
	margin-left: 15px;
	float:left;
}

#volontaire {
	width:180px;
	height:25px;
	text-align:center;
	margin-left: 5px;
	float:left;
}


#regions {
	width:100px;
	height:25px;
	text-align:center;
	margin-left: 5px;
	float:left;
}

#blog {
	width:100px;
	height:25px;
	text-align:center;
	margin-left: 5px;
	float:left;
}

#don {
	width:110px;
	height:25px;
	text-align:center;
	margin-left: 5px;
	float:left;
}


Si vous souhaitez allez voir directement j'ai mis pour vous en ligne :
http://debug.socialismecitoyen.fr

Merci d'avance de votre aide car là je suis bloqué...

A bientôt
Bonjour, plus de détails sur le problème nous aiderait.

Sur quelle version de IE ton menu est-il mal affiché ?
Bonjour mabelle,

Sous Internet Explorer 7, la div qui contient le nom des régions et qui doit s'afficher sous l'onglet Régions par exemple, elle s'affiche justement pas en dessous mais à droite en dehors du site. Essaye de faire un test si tu peux tu le verra tous de suite...

Merci d'avance.
Tu as float: left en même temps que position: absolute sur tes sous menus? Essaye en enlevant ton float.
Bonjour mabelle,

J'ai enlevé le float:left mais cela fait toujours le même problème sous IE. Comment je peux faire autrement ?
Quand j'enlève le position: absolute; cela fonctionne sous IE mais il ne fonctionne plus sous mozilla et chrome...

J'avoue que je ne sais pas comment faire pour que cela fonctionne partout ! Smiley decu
Tu as plusieurs erreurs de validation. Une bonne chose à faire avant de continuer à débugger, c'est de les corriger. Parfois, une erreur ailleurs est en cause.
Merci mabelle de me répondre. J'ai corrigé les quelques erreurs css. Les erreurs html n'ont aucune incidence sur le reste.

Le problème vient du fait que si j'enlève le position:absolute; tout fonctionne sous IE mais sous Firefox cela scintille et le menu ne s'ouvre pas.

Je vais te mettre en ligne la version sans position:absolute;

Car cela fonctionne sous IE mais plus sous chrome et firefox...

Tient moi au courant dès que tu as vu.

Si tu veux voir : http://debug.socialismecitoyen.fr/
thibaud25 a écrit :
Les erreurs html n'ont aucune incidence sur le reste.


Tu ne peux pas en être certain et de toutes façons, c'est une bonne habitude à prendre. Les bugs qui concernent IE6 et IE7 sont parfois capricieux...

Je t'encourage aussi à regarder si tu ne pourrais pas améliorer ta structure de navigation en utilisant des sous-listes.
Est-ce qu'il est possible en CSS de faire une condition qui dise si c'est sous IE on ne met pas position:absolute;

C'est possible de faire cela en CSS ?

J'entends bien que sous IE le moteur de rendu HTML est débile.

Sous WebKit et Gecko je peux t'assurer que les quelques erreurs HTML ou javascript n'ont aucune incidence sur les rendus qui utilise les CSS.
thibaud25 a écrit :
Est-ce qu'il est possible en CSS de faire une condition qui dise si c'est sous IE

Tu peux voir du côté des commentaires conditionnels.
Bien sûr il faut viser précisément à quelles versions d'IE on s'adresse, les récentes étant de bonne facture et ne demandant pas plus de correctifs qu'un Firefox 3, un Opera 10 ou un Safari 4.
Et si on peut trouver une solution élégante sans en passer par des correctifs pour tel ou tel navigateur, c'est mieux.

thibaud25 a écrit :
J'entends bien que sous IE le moteur de rendu HTML est débile.

Disons plutôt qu'avec les vieilles versions d'IE, le moteur de rendu est lui-même vieux et donc pas terrible. Ça redevient beaucoup plus fiable avec IE8.

thibaud25 a écrit :
Sous WebKit et Gecko je peux t'assurer que les quelques erreurs HTML ou javascript n'ont aucune incidence sur les rendus qui utilise les CSS.

J'espère que tu n'es pas assureur, car c'est bien évidemment faux. Smiley lol
Ça dépend de l'erreur, mais certaines erreurs de syntaxe HTML peuvent avoir de grosses conséquences sur le rendu, quel que soit le navigateur.
Modifié par fvsch (25 Feb 2011 - 21:20)
Ce que je voulais dire fvsch s'est que les petites erreurs de type (end tag for "input" omitted, but OMITTAG NO was specified) n'ont aucune incidence sur l'affichage d'une DIV de menu par exemple.

Il est évident que s'il y a une erreur au niveau de la div ou des css cela provoquera des erreurs de rendu. Mabelle fait du zèle en me demandant de corriger les petites erreurs. Surtout que l'erreur provient du position:absolute;

Par contre je ne sais pas pourquoi cela scintille sous firefox quand j'enlève : position:absolute;
Et sous IE8 cela fonctionne quand j'enlève.

Je suis bloqué je ne comprend pas.
Là tout de suite il y a un gros problème de positionnement sous tous les navigateurs, avec un contenu aligné à gauche et une image de fond globale centrée horizontalement. L'image n'est donc pas raccord avec le contenu.

Ensuite, quand les sous-menus ne sont pas positionnés en absolu, la combinaison d'une série de flottants donne des choses bizarres car le dépassement des flottants n'est pas géré, les éléments flottants ne sont pas regroupés dans un même conteneur qui bloquerait le dépassement des flottants, et enfin il doit y avoir un peu de fusion des marges qui joue (voir sur cette image la marge en jaune):
upload/2043-1298676403.jpg

Cette technique de positionnement est vraiment pas terrible.
La convention de codage pour un menu simple c'est ça:
<ul>
  <li><a href="1">Lien 1</a></li>
  <li><a href="1">Lien 2</a></li>
  ...
</ul>

Et la convention de codage pour un menu déroulant c'est:
<ul>
  <li>
    <a href="1">Lien 1</a>
    <ul>
      <li><a href="1a">Lien 1.a</a></li>
      <li><a href="1b">Lien 1.b</a></li>
      ...
    </ul>
  </li>
  <li>
    <a href="1">Lien 2</a>
    <ul>...</ul>
  </li>
  ...
</ul>


Partant de là, côté positionnement CSS on va utiliser:
- Le positionnement flottant pour les LI de premier niveau.
- Le positionnement absolu pour les UL de deuxième niveau (sous-menus).

Bien sûr ça implique de bien savoir utiliser le positionnement flottant (en gérant le dépassement des flottants), et de bien savoir utiliser le positionnement absolu (en positionnant l'élément par rapport à un parent ou ancêtre lui-même positionné).

Rappel pour la route: Guide de survie du positionnement CSS.
thibaud25 a écrit :
Mabelle fait du zèle en me demandant de corriger les petites erreurs.


Tu peux percevoir mon commentaire comme étant du zèle mais n'oublie pas que pour nous, qui essayons de t'aider à corriger un bug du style que tu as, un code sans erreur est une première étape. Imagine que l'on passe du temps à essayer de trouver et que l'erreur provient d'une erreur de validation. Donc, ça aide à éliminer les autres erreurs qui sont mineures comme tu le dis si bien.

On a pas tous l'expertise de Florent. D'ailleurs, il t'a bien expliqué le problème de structure que tu avais avec tes sous-menus, ce que je t'avais souligné.
Sujet clos
Aller à