28173 sujets

CSS et mise en forme, CSS3

[Resolu] Probleme sous IE pour un menu tout simple avec rollover

bonsoir tout le monde,
voila je viens d'essayer de realiser un des menu plutot simple present dans les gabarits d'alsa et le resultat attendu n'est pas au rende-vous je dirais ...

L'affichage est nikel sous FF mais qq peu etrange sous IE :

Les images ne s'affichent pas en debut de rubrique, j'ai remarqué que cela dependait du positionnement dans le code html (les balises de fin comme </li> doivent etre sur les meme lignes que les liens par exemple)
Et lorsque l'on parcourt le menu du haut vers le bas les images disparaissent ..

donc je m'y perd un peu ...

Voici mon code


ul.lienMenu {
	list-style-type: none;
	margin: 7px;
	padding: 0;
}

ul.lienMenu  div.spacer {
	height: 10px;
}

ul.lienMenu  a{
	display: block;
	text-decoration: none;
	text-indent: 20px;
	background-image:url(../images/pics/puce0.gif);
	background-position: left center;
	background-repeat: no-repeat;
}
	 
ul.lienMenu  a:hover{
	background-image:url(../images/pics/puce1.gif);
	background-position: left center;
	background-repeat: no-repeat;
	color: #72A3CB;
	background-color:#FFFFFF;
	/*font-size:12px;*/
}


pour le code html suivant : 

						<ul class="lienMenu">
							<li>
							<a href="#">Découvrir Obiblio</a></li><div class="spacer"></div><li>
							<a href="#">Rechercher un document</a></li><li>
							<a href="#">Les plus téléchargés</a></li><li>
							<a href="#">Les mieux notés</a></li><div class="spacer"></div><li>
							<a href="#">Forum</a></li><li><a href="#">Annuaire des membres</a></li><li>
							<a href="#">La boîte à idées</a></li><div class="spacer"></div><li>
							<a href="#">FAQ</a></li><li>
							<a href="#">Forum d'aide et de support</a></li><li>
							<a href="#">Charte du site</a></li><li>
							<a href="#">Faire un lien vers Obiblio</a></li><div class="spacer"></div><li>
							<a href="">Contacter Obiblio</a></li><li>
							<a href="">Contacter le webmaster</a></li><li>
							<a href="">Contacter un administrateur</a></li></ul>


merci de votre aide
Modifié par kvndevils (08 Jul 2006 - 12:46)
Pour info specifier la hauteur des liens a resolu mon probleme sous ie
Modifié par kvndevils (04 Jul 2006 - 11:31)
Bonjour

J'ai un peu pataugé dans ton histoire.
Voilà comment je procèderais pour ton menu.


<!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>Biblio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">

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

#menu {
    width:30%;
    margin-left:20px;
 }
#menu a {
    display:block;
    width:100%;
    height:20px;
    line-height:20px;
    text-decoration:none;
    color:#000;
    background:url(puce0.gif) 2px 6px no-repeat;
}
#menu a span {
    padding-left:25px;
}
#menu a:hover {
    display:block;
    width:100%;
    height:20px;
    text-decoration:none;
    color:#c00;
    background:url(puce1.gif) 2px 6px no-repeat;
}
/*...................................................*/

#menu #spc {
    width:100%;
    margin:0 0 1em 0;
}
#menu #spc a {
    display:block;
    width:100%;
    height:20px;
    line-height:20px;
    text-decoration:none;
    color:#000;
    background:url(puce0.gif) 2px 6px no-repeat;
}
#menu #spc a span {
    padding-left:25px;
}
#menu #spc a:hover {
    display:block;
    width:100%;
    height:20px;
    text-decoration:none;
    color:#c00;
    background:url(puce1.gif) 2px 6px no-repeat;
}

</style>
</head>

<body>
<div id="menu">
<ul>
<li><a href="#nogo"><span>Découvrir Obiblio</span></a></li>
<li><a href="#nogo"><span>Rechercher un document</span></a></li>
<li><a href="#nogo"><span>Les plus téléchargés</span></a></li>
<li id="spc"><a href="#nogo"><span>Les mieux notés</span></a></li>

<li><a href="#nogo"><span>Forum</span></a></li>
<li><a href="#nogo"><span>Annuaire des membres</span></a></li>
<li id="spc"><a href="#nogo"><span>La boîte à idées</span></a></li>

<li><a href="#nogo"><span>FAQ</span></a></li>
<li><a href="#nogo"><span>Forum d'aide et de support</span></a></li>
<li><a href="#nogo"><span>Charte du site</span></a></li>
<li id="spc"><a href="#nogo"><span>Faire un lien vers Obiblio</span></a></li>

<li><a href="#nogo"><span>Contacter Obiblio</span></a></li>
<li><a href="#nogo"><span>Contacter le webmaster</span></a></li>
<li id="spc"><a href="#nogo"><span>Contacter un administrateur</span></a></li>
</ul>
</div>
</body>
</html>


Pour les petits réglages, je te laise faire. Smiley cligne

@+
Modifié par Michel (04 Jul 2006 - 12:07)
merci pour ton aide mais c'etait surtout les images en rollover qui me posait probleme .. Sinon mettre un div en spacer dans la liste n'etait pas tres propre donc j'ai fais plusieurs petites listes au final ...

merci encore
Bonjour

Juste en passant,
pour simplifier, tu peux aussi faire comme ça.


<style type="text/css">

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

#spc{margin:0 0 1em 0;}

#menu {
     width:30%;
     margin-left:20px;
  }
#menu a {
    display:block;
    width:100%;
    height:20px;
    line-height:20px;
    text-decoration:none;
    color:#000;
    background:url(puce0.gif) 2px 6px no-repeat;
}
#menu a span {
    padding-left:25px;
}
#menu a:hover {
    display:block;
    width:100%;
    height:20px;
    text-decoration:none;
    color:#c00;
    background:url(puce1.gif) 2px 6px no-repeat;
}

</style>


@+
Sujet clos
Aller à