Superposition de deux div.

Version imprimable

11/06/2007, 12h03
zulot

Superposition de deux div.

Bonjour.

J'aimerais pouvoir superposer deux div.

chacune contenant du texte different, et les faire switcher grace a du java script. Mais il faut qu'elles aient le meme emplacement.

Comment faire pour qu'elles aient le meme emplacement?
Quel attribut pour les rendre visible et invisible?

Merci

Bonjour,
en les positionnant en absolute, tu pourras les mettre au "même emplacement".
Ensuite, attribut leur un z-index : celui ayant la valeur la + grande sera au-dessus.
Tu n'a plus qu'à modifier les z-index via JS pour les faire passer en-dessus / en-dessous ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <html> <head> <style type="text/css"> #div1 {position : absolute; top:200px; left:50px; width:100px; background-color:blue; } #div2 {position : absolute; top:200px; left:50px; width:100px; background-color:red; } </style> <script type="text/javascript"> function SwitchIt() { var z = document.getElementById('div2').style.zIndex; document.getElementById('div2').style.zIndex = document.getElementById('div1').style.zIndex; document.getElementById('div1').style.zIndex = z; } </script> </head> <body> <div id="div1" style="z-index:10;"> div1 </div> <div id="div2" style="z-index:5;"> div deux </div> <input type="button" onclick="SwitchIt();" value="Switch"> </body> </html>
A+

11/06/2007, 15h57
zulot

Euh z-index y a pas mieux genre visible unvisible?

Pourquoi ca a ete deplacer en javascript je demande rien de javascript je veux des renseignement html et un argument de div??????
11/06/2007, 15h59
E.Bzz

Citation:

Envoyé par zulot

Euh z-index y a pas mieux genre visible unvisible?

z-index c'est pour la superposition.
Si tu voulais masquer, fallait demander comment ... masquer :mrgreen:
13/06/2007, 14h24
zulot

Pardon je me suis mal exprimer c'etait en fait 2 div au meme emplacement mais je les masques alternativement. Et je me suviens plus de l'argument pour visible lol

Et pour l'emplacement c'est donc en absolute

Et je comprends tjs pas pourquoi j'ai atteri en javascript
13/06/2007, 14h34
E.Bzz

Citation:

Envoyé par zulot

je les masques alternativement. Et je me suviens plus de l'argument pour visible lol

Ben comment tu as fait, alors ?

visible = "visible" / "hidden"

Citation:

Et je comprends tjs pas pourquoi j'ai atteri en javascript

Ca va venir :mrgreen:

tiens, j'ai ça sous la main, ça devrait t'être utile.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function show(DivId){
	if(dom){
		document.getElementById(DivId).style.visibility = "visible";
	}else if(ie4){
		document.all[DivId].style.visibility = "visible";
	}else if (ns4){
		document.layers[DivId].visibility = "show";
	}
}
function hide(DivId){
	if (dom){
		document.getElementById(DivId).style.visibility = "hidden";
	}else if (ie4){
		document.all[DivId].style.visibility = "hidden";
	}else if (ns4){
		document.layers[DivId].visibility = "hide";
	}
}

13/06/2007, 14h48
marcha

Y encore des gens sur IE4 et Netscape 4 :lol: ?

Pour tes div tu peux en effet les placer en absolu, mais le problème
dans ce cas c'est qu'elles sortent du flux. Cela peut être génant pour
le contenu qui suit.

le code document.getElementById(DivId).style.visibility = "hidden"; // ou visible
permet en effet de masquer / afficher la div, mais celles-ci restent dans le flux.

je te conseil document.getElementById(DivId).style.display = 'none'; // block
pour qu'elle n'occupe plus d'espace dans le flux et tu laisse le div en position static
(positionnement par défaut).

Le positionnement en absolu n'est pas forcement une mauvaise solution, mais
si il n'est pas nécessaire, autant l'éviter pour des raisons d'accessibilité. Les mal
voyant utilisent beaucoup le zoom texte (CTRL + molette sur FF) ce qui provoque des chevauchements avec les positions absolues.
14/06/2007, 12h18
zulot

oki merci.

Et dans mon css de base je met comment en invisible?

je met visibility: hidden;