18041 sujets

Questions générales et questions de débutants

[RESOLU] Positionnement Menu différent entre Firefox et IE

Bonsoir !
Voilà mon problème du jour :

J'ai essayé de bien positionner mon bloc de liens dans le block div. Pour se faire j'ai coloré les deux. Mais l'ennui c'est que dans internet explorer c'est tout décalé..
Voici 2 captures d' écran :
Sous Firefox :
upload/26120-Firefox.jpg

Sous IE :
upload/26120-IE.jpg

======
HTML
======

<!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=utf-8" />
<title>Présentation</title>
<link rel="stylesheet" type="text/css" href="accueil.css"/>
</head>



<body>
<div>
<h1>Présentation</h1>
</div> <!-- Titre de page -->

<div id="menu">
<ul>
	<li class="en-cours"><a href="accueil.html">Présentation</a></li>
    <li><a href="machin.html">Machin</a></li>
    <li><a href="truc.html">Truc</a></li>
</ul>
</div> <!-- menu -->


<div id="contenu">
<p>Blablablabla..</p>
</div> <!-- contenu -->









</body>
</html>


=====
CSS
=====

@charset "utf-8";
/* CSS Document */

html {
	font-size: 100%;	
}

body {
	margin: 0;
	background: url("planete.png");
	
	
	
}

h1 {   
    color: white;  
    font-size: 3em;  
    font-family: monospace, "Times New Roman", Times, serif;  
    width: 400px;  
    margin-left: 530px;  
    margin-top: 280px;  
}
#menu {
	float:left;
	width: 160px;
	margin-top: 85px;
	margin-left:50px;
	
	background: white;
}
#menu li{
	margin-bottom: 7px
	
	
}
#menu li a {
	display:block;
	width: 140px;
	padding: 10px;
	background:green;
	
}
ul
{
  list-style-type: none;
  margin-left: -40px;
  
} 
#contenu {
	float:left;	
}

Modifié par geopl (30 Jan 2010 - 21:13)
La gestion des marges dans IE sur les éléments flottants n'est pas identique. Si je me souviens bien, IE double les marges. Donc tu fais margin-left:-40px, ça marche pour tous les navigateurs sauf que IE voit ça comme margin-left:-80px.

En second lieu, par défaut il y a des marges sur certains éléments comme les listes. D'ailleurs, si tu cherches "CSS reset line" ou quelque chose de semblable, tu verras une série de propriété CSS qui "ramène" à un point de départ commun, chose que tu n'as pas.

Donc voilà, c'est tout et ça fonctionne, j'ai le même résultat dans tous les navigateurs maintenant. Suffit de faire des ajustements pour le design mais au moins, c'est parfait des deux côtés.


* { margin:0; padding:0; }
ul 
{ 
  list-style-type: none;    
}


N'oublie pas d'éviter les marges sur les éléments flottants puisque dans IE, c'est mal interprété et ça fait une erreur comme tu connais désormais, favorise à ce moment le padding.

En espérant avoir répondu à ta question.
Ok ca fonctionne. Par contre maintenant j'ai un problème de marge à l'interieur du DIV menu.

Firefox :

upload/26120-Firefox11.jpg

IE :

upload/26120-IE11.jpg 

@charset "utf-8";
/* CSS Document */

html {
	font-size: 100%;	

}

body {
	margin: 0;
	background: url("planete.png");
	
	
	
}

h1 {   
    color: white;       /*Problème de décalage entre Firefox et IE si propriétés attribuées au DIV de Titre*/
    font-size: 3em;  
    font-family: monospace, "Times New Roman", Times, serif;  
    width: 400px;  
    margin-left: 530px;  
    margin-top: 280px;  
}
#menu {
	float:left;
	width: 160px;
	margin-top: 85px;
	margin-left:50px;
	
	background: white;
}
#menu li{
	margin-bottom: 7px /* Espace entre les liens*/
	
	
	
}
#menu li a {
	display:block;
	width: 140px;
	padding: 10px;
	background:green;
	
}
ul
{
  list-style-type: none;
  padding-left:0 ;  /* supprime le décalage des listes. */
  margin-left:0; 
  
  
} 
#contenu {
	float:left;	
}



Au fait, tu dis qu'il vaut mieux éviter les marges avec les éléments flottants mais comment positionner mon menu sans utiliser de marges ?
Modifié par geopl (30 Jan 2010 - 12:17)
J'ai essayé d' enlever le float left avec Firebug et je vois que tout se positionne impeccablement.

Par contre sur IE j'ai une marge sous le dernier lien et pas sur Firefox :

Firefox :

upload/26120-Firefox12.jpg

IE :

upload/26120-IE12.jpg

Si je comprend bien vaut mieux ne pas utiliser de float-left pour les menus ?

QQ'un sait pourquoi j'ai une marge en dessous dans IE ? C' est peut-être pas très important mais ça me stresse de pas avoir la même chose dans les 2 navigateurs ! ^^
Comme j'ai dit dans ma réponse précédente, je suis persuadé que c'est parce que tu n'as pas utilisé le "reset" line.

Tu vois, dans l'exemple CSS que je t'ai donné, j'avais ajouté * { margin:0; padding:0 } pour que ça fonctionne. Ça retirera toutes les "espacements" par défaut de tous les éléments et tu pourras ensuite mieux contrôler les contrôler ensuite.

Pour les floats, dans ton cas ça ne sert à rien effectivement puisqu'ils sont disposés naturellement en bloc. Donc il est effectivement inutile d'avoir des floats même si c'est pas un problème.

Fais des recherches sur la "CSS reset line" et tu en apprendras sans doute davantage sur ton problème Smiley cligne
Modifié par Sorano (30 Jan 2010 - 14:54)
En effet pour le margin 0 et padding 0 ça m'a supprimé les espacements.
Mais le second problème qui concerne la marge au dessus du menu c'est en supprimant le float-left qu'il s'est résolu.

En tout cas mon menu est disposé comme je le souhaitais ! Merci beaucoup pour toute ces techniques !
Sujet clos
Aller à