18073 sujets

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

[abandonné] Menu CSS alsacréation : plantage sous IE

Bonjour,

Après moults difficultés j'ai réussit à mettre au point un gabarit qui fonctionne avec toutes mes exigences (SPIP, Tidy, nombreux menus déroulants, navigateurs...).

Le point délicat reste le menu déroulant d'Aslacreation : Une fois installé avec les paramètres ci-dessous voici le comportement que j'ai :

- Safari : Ok
- IE MAC 5.2 : ok mais trasparence du fond blanc rendant illisible les menus (juxtaposition avec le texte dessous)
- IE XP : problème, clignote entre alignement à gauche et centré (il se met à gauche au chargement puis centre au milieu, ça fait pas génial !)
- Firefox (Linux et XP) : ok mais me crée un méga scroll horizontal Smiley fache

J'ai mis en bas de cette page une page d'exmple complète pour que vous testiez sur IE avec mon gabarit
Modifié par Samuel Berg (26 Oct 2005 - 14:42)
Bonjour, je n'ai lu que le début, mais :
z-index:100px;
c'est nouveau ? ça vient de sortir? Smiley biggol
Je n'ai pas envie de reconstituer la page HTML, tu ne peut pas nous mettre une URL, ce serait plus simple à corriger
Modifié par chmel (21 Oct 2005 - 12:45)
Bah, à vrai dire on rentre dans les propriétés volatiles des divs, et là je suis un peu perdu... J'ai recopier sans me poser de question.

Pour le respect de ceux qui veulent m'aider j'ai reconstituéi une page test.html mettant en exergue le problème (essayez le menu sous IE)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title>Document sans titre</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>
<style type="text/css" media="all"> 

body {
background: #dde0ec;
color: #000;
font: 0.7em verdana, arial, sans-serif;
text-align: center;
line-height: 1.3em;
margin: 15px;
padding: 0;
}

#conteneur_b {
position: relative;
background: #dde0ec url(../IMG/d/b.gif) bottom right no-repeat;
margin: 0 auto 0 auto;
}

#conteneur {
text-align: left;
width: 740px;
margin: 0 auto 0 auto;
background: #fff;
}

#entete {
height: 74px;
}

#gauche {
float: left;
width: 200px;
margin: 0;
background: #fff;
}

#droite {
margin: 0 0 0 220px;
background: #c33;
}

#pied {
clear:both;
background:#000;
text-align:right;
padding:1em 15px;
}


/* autres divs */

#menu_inline1 li {
	display: inline;
	}

#cadre { 
	width: 200px;
	margin: 0 0 0 10px;
	background-color: #dde0ec;
	}

#contenu {
	padding: 0 2px 0 15px;
	}

/* menu CSS */

#menu {
	position: absolute;
	margin: 0 auto 0 auto;
	top: 74px;
	width: 740px	}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}

#menu dl {
	float: left;
	width: 110px;
	}
	
#menu dt {
	background: #dde0ec;
	color: #000;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	margin: 0;
	height: 17px;
	}
	
#menu dd {
	display: none;
	background: #fff;
	color: #000;
	border: 1px solid #000;
	}

#menu ul {
	background: #fff;
	color: #000;
	margin: 0 5px;	
	}
	
#menu li {
	text-align: left;
	}

#menu dt a {
	background: #dde0ec;
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	}
	
#menu dt a:hover {
	background: #fff;
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	}

#menu dt a:hover, #menu dt a:focus {
	background: #fff;
	}	

</style>

</head>

<body>
<div id="conteneur_b">
<div id="conteneur">

<div id="entete">
<a href="/" title="retour &agrave; l&acute;accueil">Mon site un must seen des standards du Web</a>
</div>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour ? l'accueil">Accueil</a></dt>
</dl>

<dl>			
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
<li><a href="#">Sous-Menu 1.4</a></li>
<li><a href="#">Sous-Menu 1.5</a></li>
<li><a href="#">Sous-Menu 1.6</a></li>
</ul>

</dd>
</dl>
<dl>	
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd>
</dl>
	
<dl>	
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
	
<dl>	
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>

</div>

<ul id="menu_inline1">
<li><a href="#" title="Plan du site">Plan du site</a> |</li>
<li><a href="#" title="Page de contact" >Contact</a> |</li>
<li><a href="#" title="Informations sur le site" >Cr&eacute;dits</a></li>
</ul>

<div id="gauche">

<div id="cadre">
<div id="hautdroit"></div><div id="hautgauche"></div>
<div id="contenu">
<p>voici un cadre</p>
<p>voici un cadre</p>
<p>voici un cadre</p>
</div>
<div id="basdroit"></div><div id="basgauche"></div>
</div>

</div>


<div id="droite">
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
<p>ceci est mon menu droite</p>
</div>
<div id="pied">
<p>ceci est mon pied de page</p>
<p>ceci est mon pied de page</p>
<p>ceci est mon pied de page</p>
<p>ceci est mon pied de page</p>
<p>ceci est mon pied de page</p>
</div>



</div>
</div>
</body>
</html>

Modifié par Samuel Berg (21 Oct 2005 - 13:21)
Sous IE6 en Emulation Linux (Win 95) et XP tout court (testé sur 2 ordinateurs différents), et une connexion à 8 megas (enfin c'est ce qu'ils disent...) le menu s'affiche à gauche puis au milieu, en réactualisant la page des fois c'est automatique (très vite) et d'autres fois pendant 2-3 secondes le menu s'affiche à gauche, bref ça fait pas très sérieux pour un site professionnel !

Voir surtout le mega scroll horizontal sur Firefox !
Modifié par Samuel Berg (21 Oct 2005 - 17:14)
Sujet clos
Aller à