28173 sujets

CSS et mise en forme, CSS3

Décalage vertical de menus fais avec <ul><li> sous IE

Salut à tous,

Je travaille actuellement à la refonte graphique d'un site que j'essai de faire en XHTML/CSS. Pour ce site, j'ai mis en place un menu réalisé grâce à des balises <ul> et <li>. Tout fonctionne bien sous firefox (comme d'hab) et tout fonctionne pas bien sous IE (comme d'hab Smiley sweatdrop ). En fait mes liens de menu, au lieu d'être sur la même ligne se décale petit à petit vers le bas sous IE.

Certains d'entre vous on déjà eu un problème semblable ? Je vous glisse un petit bout de code :


<div class="menuGenFond">
		<ul id="listeMenu">
			<li><a id="menu1" title="Institut" accesskey="1" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','show','kalkEtud','','hide','kalkInter','','hide','kalkDocu','','hide','kalkRech','','hide','kalkVieEtud','','hide','kalkEntre','','hide')"></a></li>
			<li><a id="menu2" title="Etudes" accesskey="2" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','hide','kalkEtud','','show','kalkInter','','hide','kalkDocu','','hide','kalkRech','','hide','kalkVieEtud','','hide','kalkEntre','','hide')"></a></li>
			<li><a id="menu3" title="International" accesskey="3" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','hide','kalkEtud','','hide','kalkInter','','show','kalkDocu','','hide','kalkRech','','hide','kalkVieEtud','','hide','kalkEntre','','hide')"></a></li>
			<li><a id="menu4" title="Documentation" accesskey="4" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','hide','kalkEtud','','hide','kalkInter','','hide','kalkDocu','','show','kalkRech','','hide','kalkVieEtud','','hide','kalkEntre','','hide')"></a></li>
			<li><a id="menu5" title="Recherche" accesskey="5" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','hide','kalkEtud','','hide','kalkInter','','hide','kalkDocu','','hide','kalkRech','','show','kalkVieEtud','','hide','kalkEntre','','hide')"></a></li>
			<li><a id="menu6" title="Vie étudiante" accesskey="6" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','hide','kalkEtud','','hide','kalkInter','','hide','kalkDocu','','hide','kalkRech','','hide','kalkVieEtud','','show','kalkEntre','','hide')"></a></li>
			<li><a id="menu7" title="Entreprises" accesskey="7" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','hide','kalkEtud','','hide','kalkInter','','hide','kalkDocu','','hide','kalkRech','','hide','kalkVieEtud','','hide','kalkEntre','','show')"></a></li>
			<li><a id="menu8" title="Recherche" accesskey="8" href=""></a></li>
		</ul>
		<div><a id="menuIntranet" title="Intranet" accesskey="9" href="#"></a></div> <!-- Bouton intranet -->
	</div>


et pour le css : 


.menuGenFond /* CSS pour le fond du menu de haut de page */
{
	background-image: url(images/fonds/fond_haut.jpg); /* On définit l'image de fond */
	background-repeat: no-repeat; /* On indique qu'on ne souhaite pas que celle-ci se répète */
	width: 1000px ; /* On fixe la dimension horizontale (celle de l'image) --- OBLIGATOIRE */
	height: 125px; /* On fixe la dimension verticale (celle de l'image) --- OBLIGATOIRE */
}

ul#listeMenu /* CSS pour la liste des boutons du menu de haut de page */
{
	list-style-type: none; /* Pour que les champs n'aient pas de puces */
	margin:0px; margin-left:110px; /* On fixe les marges internes */
	padding:0px; padding-top:25px; /* On fixe les marges externes*/
	display:block;
}

ul#listeMenu a /* CSS pour les liens dans la liste des boutons */
{
	text-decoration: none;
	display: block;
}

a#menu1 /* CSS pour bouton n°1 */
{
	background-image:url(images/menuHaut/insti_01.gif);
	width:61px;
	height:47px;
	float:left;
}
a#menu1:hover {	background-image:url(images/menuHaut/insti_02.gif); }

a#menu2 /* CSS pour bouton n°2 */
{
	background-image:url(images/menuHaut/etud_01.gif);
	width:58px; 
	height:47px;
	float:left;
}
a#menu2:hover {	background-image:url(images/menuHaut/etud_02.gif); }

a#menu3 /* CSS pour bouton n°3 */
{
	background-image:url(images/menuHaut/inter_01.gif); 
	width:116px;
	height:47px;
	float:left;
}
a#menu3:hover {	background-image:url(images/menuHaut/inter_02.gif); }

a#menu4 /* CSS pour bouton n°4 */
{
	background-image:url(images/menuHaut/docu_01.gif); 
	width:120px;
	height:47px;
	float:left ;
}
a#menu4:hover {	background-image:url(images/menuHaut/docu_02.gif); }

a#menu5
{
	background-image:url(images/menuHaut/rech_01.gif); 
	width:87px;
	height:47px;
	float:left ;
}
a#menu5:hover {	background-image:url(images/menuHaut/rech_02.gif); }

a#menu6 /* CSS pour bouton n°6 */
{
	background-image:url(images/menuHaut/vie_01.gif); 
	width:109px;
	height:47px;
	float:left ;
}
a#menu6:hover {	background-image:url(images/menuHaut/vie_02.gif); }

a#menu7 /* CSS pour bouton n°7 */
{
	background-image:url(images/menuHaut/ent_01.gif); 
	width:91px;
	height:47px;
	float:left ;
}
a#menu7:hover {	background-image:url(images/menuHaut/ent_02.gif); }

a#menu8 /* CSS pour bouton n°8 (Recherche) */
{
	background-image:url(images/menuHaut/Boutonrech_01.gif);
	width:249px; height:47px;
	float:left ;
}
a#menu8:hover {	background-image:url(images/menuHaut/Boutonrech_02.gif); }

a#menuIntranet
{
	background-image:url(images/menuHaut/intra_01.gif);
	background-repeat: no-repeat;
	width:91px; height:33px;
	float:left;
	margin:0px; margin-left:805px;
	padding:0px;
}
a#menuIntranet:hover {	background-image:url(images/menuHaut/intra_02.gif); }


Voila, j'espère que certaines personnes pourront m'aider ou du moins m'orienter.

Mer ci d'avance et longue vie a IE ( Smiley rale )
Hello,

Est-ce que tu aurais s'il te plaît un morceau de code beaucoup plus bref illustrant ton problème ? Un exemple en ligne pour comprendre quel est exactement ton problème ?

Ceci dit, les problèmes de hauteur d'éléments de liste avec IE sont assez fréquents je crois, c'est lié au haslayout, et ça a été traité il y a peu de temps ici. Smiley smile
Sachant que je suis actuellement au taff (hé oui malheureusement Smiley bawling ), je ne vais pas pouvoir vérifier de suite le lien que tu viens de me fournir. En revanche, voici un morceaux de code un peu plus bref


<div class="menuGenFond">
		<ul id="listeMenu">
			<li><a id="menu1" title="Institut" accesskey="1" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','show','kalkEtud','','hide','kalkInter','','hide','kalkDocu','','hide','kalkRech','','hide','kalkVieEtud','','hide','kalkEntre','','hide')"></a></li>
			<li><a id="menu2" title="Etudes" accesskey="2" href="javascript:;" onMouseOver="MM_showHideLayers('kalkVide','','hide','kalkInsti','','hide','kalkEtud','','show','kalkInter','','hide','kalkDocu','','hide','kalkRech','','hide','kalkVieEtud','','hide','kalkEntre','','hide')"></a></li>
</ul>
</div>


et pour le css correspondant


ul#listeMenu /* CSS pour la liste des boutons du menu de haut de page */
{
	list-style-type: none; /* Pour que les champs n'aient pas de puces */
	margin:0px; margin-left:110px; /* On fixe les marges internes */
	padding:0px; padding-top:25px; /* On fixe les marges externes*/
	display:block;
}

ul#listeMenu a /* CSS pour les liens dans la liste des boutons */
{
	text-decoration: none;
	display: block;
}

a#menu1 /* CSS pour bouton n°1 : Institut ---- Le fonctionnement est similaire pour tous les boutons du menu*/
{
	background-image:url(images/menuHaut/insti_01.gif); /* On indique l'image de fond du bouton */
	width:61px;	height:47px; /* On fixe les dimensions */
	float:left; /* On le met en float pour pouvoir les aligner à gauche les un des autres (les boutons) */
}
a#menu1:hover {	background-image:url(images/menuHaut/insti_02.gif); } /* On indique l'image de fond du bouton en rollover */

a#menu2 /* CSS pour bouton n°2 : Etudes */
{
	background-image:url(images/menuHaut/etud_01.gif);
	width:58px; height:47px;
	float:left;
}
a#menu2:hover {	background-image:url(images/menuHaut/etud_02.gif); }


En espérant que tu puisse y voir un peu plus clair. Je te fournirai bien un lien vers la page en cours mais sachant qu'il s'agit d'un site réalisé dans le cadre de mon travail, je ne sais pas si je peux fournir cette info (si le chef le sais aïe aïe aïe Smiley fulmine )
Si c'est dans le cadre de ton travail, pourquoi ne suis-tu pas le lien que je t'ai donné ? C'est un autre sujet sur le forum. Smiley smile
Pas de problème, cela est prévu. Je voulais juste te dire que je n'aurais pas le temps tout de suite et je t'ai donc remis un bout de code si des fois tu souhaitais jetter un coup d'oeil (des fois que mon post t'empeche de dormir Smiley biggrin ).

En tout cas merci de m'avoir répondu car je commencé à croire que personne aller me répondre. Je te tiens au courant des que j'ai des nouvelles à ce sujet.

Merci Eldebaran. Et bon week end !!
Sujet clos
Aller à