superposition de blocs

19 oct. 2007, 15:29

Bonjour,

j'ai un petit problème pour superposer 3 blocs <div>.

C'est 3 rectangles de meme hauteur. Je les créent par ce procédé :

Code : Tout sélectionner

<DIV STYLE="width:100px;height:20px;"></DIV>
<DIV STYLE="width:100px;height:20px;position:relative;top:-20;"></DIV>
<DIV STYLE="width:100px;height:20px;position:relative;top:-40;"></DIV>

La superposition fonctionne, par contre il se crée 2 espaces vides correspondant aux derniers blocs sous la superposition. Comment faire pour éviter cela?

19 oct. 2007, 15:34

je suis pas sur de bien comprendre ce que tu veux dire par espace ide mais tu a regardé du côté de la propriété css z-index?

19 oct. 2007, 15:35

et si tu faisais tout simplement

<div style="width:100px;height:20px;margin:0px"></div>
<div style="width:100px;height:20px;margin:0px"></div>
<div style="width:100px;height:20px;margin:0px"></div>

19 oct. 2007, 15:52

je suis pas sur de bien comprendre ce que tu veux dire par espace ide mais tu a regardé du côté de la propriété css z-index?

oui je l'utilise, la superposition des blocs fonctionnent, les 3 blocs sont bien superposés sur les 20 premiers pixels.
Par contre il y a du blanc sur les pixels 21 à 60, comme si le second <div> était créé sous le premier, le 3ème sous le 2ème,
et seulement ensuite les 2e et 3e déplacé à la position du premier pour la superposition.

Si maintenant je crée un 4e div sans position relative, il est créé sur les pixels 61 à 80.

@truc Par ta méthode, les blocs sont affichés les uns en dessous des autres et non superposés.

19 oct. 2007, 18:18

En effet j'ai compri de travers

Peux tu faire une capture d'écran ?

19 oct. 2007, 19:55

As tu essayé en absolute ou cela te dérange-t-il ?
pour cela créé tes 3 blocs dans un autre bloc qui lui sera positionné

<div style="position : absolute; top : ici; left : la;">
<div id="bloc_1" style="position : absolute; top : 0; left :0; z_index:0;">
</div>

<div id="bloc_2" style="position : absolute; top : 0; left :0; z_index:1;">
</div>

<div id="bloc_2" style="position : absolute; top : 0; left :0; z_index:2;">
</div>
</div>

19 oct. 2007, 20:15

moi je te recommanderais de mettre le style dans une feuille de style, histoire de séparer la structure de la mise en page.

22 oct. 2007, 08:21

Je complète mon explication :
Le but est de créer un tableau avec chaque cellule comportant ces 3 div superposés.
Je ne maitrise pas trop les absolute et relative.

Je pourrais placer ces jauges facilement en absolute par rapport à la cellule TD correspondante mais est ce possible?

@truc pour la capture d'image, j'ai pas d'endroit où la mettre pour l'instant.[/img]

22 oct. 2007, 12:08

Bonjour,

Une solution :

Code : Tout sélectionner

<table>
<tr>
<td>
<div style="position:relative">
<DIV STYLE="width:100px;height:20px;"></DIV>
<DIV STYLE="position:absolute;width:100px;height:20px;top:0;"></DIV>
<DIV STYLE="position:absolute;width:100px;height:20px;top:0;"></DIV> 
</div>
</td>
</tr>
</table>

22 oct. 2007, 12:23

@truc pour la capture d'image, j'ai pas d'endroit où la mettre pour l'instant.[/img]

Il y a des lieu de stockage pour ça

22 oct. 2007, 14:06

Merci les gens, la technique d'AB fonctionne parfaitement.

superposition de blocs

Qui est en ligne