28173 sujets

CSS et mise en forme, CSS3

Cacher une tag <select></select> sous un div position rela

Salut,
qlq peut m'aider car j'arrive pas cacher le tag 'select' sous un div position absolute. (sous Ie et firefox)

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Essai</title>
</head>
<body>

<div align="center">
<div style="position:absolute; left:50px; top:0px; width:200px; height:540px; background:gray; z-index:2;">
<div style="position:relative; padding:10px; width:100px; z-index:1;">
<select name="" style="font-size:9px; width:55px;">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>

</body>
</html>

Merci de votre

Booz
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Ok,

qlq peut m'aider car j'arrive pas cacher le tag 'select' sous un div position absolute. (sous Ie et firefox)

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Essai</title>
</head>
<body>

<div align="center">
<div style="position:absolute; left:50px; top:0px; width:200px; height:540px; background:gray; z-index:2;">
<div style="position:relative; padding:10px; width:100px; z-index:1;">
<select name="" style="font-size:9px; width:55px;">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>

</body>
</html>


Merci d'avance pour les réponses.

Booz
Hello,

IE6 fait passer tout les éléments <select par dessus tout élément de ta page car c'est le moteur de rendu de ton systeme d'exploitation qui est utilisé pour leur affichage, pas celui de ton navigateur, et tu n'a donc pas l'emprise dessus.

En clair, impossible de cacher les select sous des divs absolute sous IE, la meilleur solution est de les masquer completement (visibility:hidden)
merci Tymlis,

c'est très clair mais le pb c'est que j'ai une menu déroulant qui est en div absolute dont leur contenu est très long (augmenter en hauteur), or sur la page contenu général (en bas du menu) il y a cette tag select qu'on doit être visible tjrs sauf au deroulant du menu qu'elle (tag select) doît disparaître.

Que dois-je faire? peut-être une action java?

Merci encore pour les réponses.

Booz
Il te suffit alors, lors de l'apparition de la div en absolute, de masquer le select, puis de le réafficher lorsque tu fermes la div absolute
Il faut modifier les propriétés CSS via javascript avec par exemple
 document.getElementById('id_select').style.display = 'none';


Puis le rendre visible avec : 
 document.getElementById('id_select').style.display = 'inline';


Tu peux rajouter ces lignes dans le code qui te sert a afficher ton menu.

Dhalsim
Sujet clos
Aller à