11548 sujets

JavaScript, DOM et API Web HTML5

Sous menu qui passe sous les sliders ou les toggles (IE7)

Bonjour,

J'ai réalisé (en dur) un sous menu mais celui-ci passe sous mon slider et sous mes toggles (en gros tout ce qui comporte du JS). J'ai ce problème uniquement sous IE7.

J'utilise la version de Wordpress 3.1.3.

Code CSS (spécifique IE7)
[code=css]

subnav{
    z-index: 999 !important;
    display: block !important;
}
wpcontent_slider_container{
    z-index: 99 !important;
}


Code Html
[code=html]

<div class="menu-header">
    <ul id="nav">
        <li>
            <div class="bordureGauche"></div>
            <a href="#">
                Nos idées
            </a>
            <ul id="subnav">
                <div class="floatL">
                    <li>
                        <a href="#">
                            Test sous menu 1 <br />
                            <img class="img-menu" src="<?php bloginfo('template_directory'); ?>/images/logos/logo_twitter.png" />
                            <div class="desc-menu">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer diam ligula, ultrices et venenatis et, dapibus a massa. Sed volutpat metus at mi aliquet laoreet. Proin fermentum, elit vel sollicitudin mattis, sapien neque faucibus lacus, id vehicula lacus odio varius dolor. Phasellus molestie pulvinar faucibus.
                            </div>
                        </a>
                    </li>
                </div>
                <div class="clear"></div>
                <div class="floatL">
                    <li>
                        <a href="#">
                            Test sous menu 6 <br />
                            <img class="img-menu" src="<?php bloginfo('template_directory'); ?>/images/logos/logo_twitter.png" />
                            <div class="desc-menu">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer diam ligula, ultrices et venenatis et, dapibus a massa. Sed volutpat metus at mi aliquet laoreet. Proin fermentum, elit vel sollicitudin mattis, sapien neque faucibus lacus, id vehicula lacus odio varius dolor. Phasellus molestie pulvinar faucibus.
                            </div>
                        </a>
                    </li>
                </div>
                <div class="clear"></div>
            </ul>
            
            <div class="bordureDrte"></div>
        </li>
    </ul>
</div><!-- #menu-header -->


Quelqu'un aurais une solution ? Car sur internet je n'ai rien trouvé d'autre que de mettre des z-index...

Merci d'avance
Mélusine
Bonjour,

À ce qu'il me semble le z-index ne fonctionne que si l'attribut est accompagné d'une propriété/valeur du genre "position:relative".

Bien à vous
Bonjour

Je suis allée faire un tour sur l'astuce de comment fonctionnent les z-index et voilà ce qu'ils disent :

1. Seuls les éléments positionnés peuvent avoir un z-index. Un élément positionné est un élément dont la propriété CSS "position" a pour valeur "relative", "absolute" ou "fixed". Par défaut, les éléments d'une page ne sont pas positionnés (ils sont en "position:static").

et comme tout mes éléments sont soit en position relative soit en position absolute...

Voilà l'adresse du lien incriminé : (onglet 'Nos idées Kdopass') : http://kdopass.agencehorizon.com/
C'est ce que je voulais dire, simplement :

Ne pas oublier le "#" pour l'ID, et il me semble qu'il faudrait mettre ce code pour que le bloc soit réellement déclaré en position relative :
#subnav{
position: relative;
z-index: 999 !important;
display: block !important; 
}


Voilà voilà... mais je ne suis pas un pro.
Modifié par Olivier C (30 Jun 2011 - 08:07)
Avez vous bien déclaré votre id subnav en position relative comme je vous l'ai indiqué plus haut ?
#subnav{
position: relative;
z-index: 999 !important;
display: block !important; 
}

Dans votre premier exemple ce n'était pas le cas, la propriété z-index ne pouvait donc fonctionner...
Bonjour

Je n'avais pas compris la dernière fois, veuillez m'excuser.

Le problème est que si je le déclare en position:relative ça fais tout bouger car, dans ma feuille de style principale, il est déclaré et positionné en position:absolute..

Code pour tout les navigateurs : 

#subnav {
	display: none;
	position: absolute;
	top: 37px;
	left: -324px;
	z-index: 99999;
	background: #fff;
	opacity: 0.9;
}


Code pour IE7 :

#subnav{
	z-index: 19999 !important;
	top: 38px !important;
	left: -335px !important;
}



Merci de votre aide.
Sujet clos
Aller à