28173 sujets

CSS et mise en forme, CSS3

Plop

J'ai fait le tour du forum et trouvé de multiples solutions à ce probleme de div avec background en PNG sous IE6 et de liens non clickables.
Mais aucune des solutions proposées ne solutionne mon probleme.
En effet, le div, dont le bg est en png, contenant les liens, à une position absolute et un z-index > 0.
Et là... les solutions de a en relative, de zoom:1, etc.. rien ne fonctionne.

Si quelqu'un a une idée, d'avance merci.
Un code complet ou, mieux, une page en ligne?

Pas de page en ligne, pas de problème. Pas de problème, pas de réponse. Smiley cligne
Desolé pour le retard, j'avais perdu mon pass et pas envie de recréer un compte.

Alors le code :
HTML :

<div id="menu">
    <div id="menu1" class="menu">
        <ul>
            <li><a href="plop.php">Plop</a></li>
            <li><a href="plop.php">Plop</a></li>
            <li><a href="plop.php">Plop</a></li>                    
        </ul>
    </div>
    <div id="menu2" class="menu">
        <ul>
            <li><a href="plop.php">Plop</a></li>
            <li><a href="plop.php">Plop</a></li>
            <li><a href="plop.php">Plop</a></li>                    
        </ul>
    </div>            
    <a href="javascript:void(0);" onclick="menu('menu1');"><img src="images/menu-item1.jpg" /></a>
    <a href="javascript:void(0);" onclick="menu('menu2');"><img src="images/menu-item1.jpg" /></a>            
</div>


Et le CSS :

#menu1{
	position:absolute;
	background-image:url(images/menu1.png);
	width:138px;
	height:167px;
	z-index:20;
}


Donc sous FF, IE7 et cie ya pas de probleme, c'est juste sous IE6 ou les liens du menu ne sont pas cliquables.
Le probleme se solutionne quand je passe #menu1 en position:relative; mais là, bien evidemment plus de z-index...
J'ai testé de passer les liens du menu en poition relative, de mettre en zoom:1 (on sait jamais...) rien ne fonctionne.

Si vous avez une idée, d'avance merci Smiley smile
Bonjour,

Il me semble que si l'élément qui a un «fond» dessiné via DirectX (avec la propriété filter et AlphaImageLoader) est positionné (en absolu ou fixe ou relatif), il te faut un élément non positionné qui fasse «tampon» entre ton conteneur positionné avec fond dessiné via DirectX et les éléments que tu vas positionner en relatif pour regagner le contrôle total des liens.

Cas où les liens ne seront pas cliquables:
<div style="filter: bla bla;">
	<a href="...">mon lien</a>
</div>

<div style="filter: blabla; position: relative;">
	<a href="..." style="position: relative;">mon lien</a>
</div>

<div style="filter: blabla; position: absolute;">
	<a href="..." style="position: relative;">mon lien</a>
</div>

<div style="filter: blabla; position: absolute;">
	<div style="position: relative;">
		<a href="...">mon lien</a>
	</div>
</div>


Cas où les liens seront cliquables:
<div style="filter: bla bla;">
	<a href="..." style="position: relative;">mon lien</a>
</div>

<div style="filter: blabla;">
	<div style="position: relative;">
		<a href="...">mon lien</a>
	</div>
</div>

<div style="filter: blabla; position: absolute;">
	<div>
		<a href="..." style="position: relative;">mon lien</a>
	</div>
</div>

<div style="filter: blabla; position: absolute;">
	<div>
		<div style="position: relative;">
			<a href="...">mon lien</a>
		</div>
	</div>
</div>


Enfin, en tout cas c'est ce que j'ai constaté lors de mes derniers tests. Mais je peux me tromper.

En voyant ton code HTML, il me semble que si div#menu1 ul est bien en position statique (et pas absolue ou relative) et si soit les li soit les liens sont positionnés en relatif, ça devrait marcher.

Pas trop le temps de tester ça en détail ce soir. Je te laisse donc faire les tests qui vont bien. Smiley smile
Modifié par Florent V. (05 Feb 2008 - 00:57)
Merci pour ta reponse Florent.
Je garde ca sous le coude ca reservira surement.
Bon.. là ca ne fonctionne pas, je vais pas me casser la tete plus longtemps pour ce navigateur de #@!% et faire un hack pour mettre un pauvre jpg en fond.
Salut,

Petit commentaire conditionnel à mettre dans le code pour ie6, cest plus propre Smiley cligne

	  <!--[if !IE ]> <-->
      	  <img src="image.png" alt="" />
	<!--> <![endif]-->
	<!--[if IE 7]>
     	  <img src="image.png" alt="" />
	<![endif]-->		
	<!--[if lte IE 6]>
	  <img src="image.gif" alt="" />
	<![endif]-->

com1: pour tous sauf les ie
com2 : pour ie7
com3 : pour ie6 et<