Page 1 sur 1
superposition de blocs
Posté : 19 oct. 2007, 15:29
par d0m
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?
Posté : 19 oct. 2007, 15:34
par fab
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?
Posté : 19 oct. 2007, 15:35
par Truc
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>
Posté : 19 oct. 2007, 15:52
par d0m
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.
Posté : 19 oct. 2007, 18:18
par Truc
En effet j'ai compri de travers
Peux tu faire une capture d'écran ?
Posté : 19 oct. 2007, 19:55
par Aureusms
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>
Posté : 19 oct. 2007, 20:15
par Berzemus
moi je te recommanderais de mettre le style dans une feuille de style, histoire de séparer la structure de la mise en page.
Posté : 22 oct. 2007, 08:21
par d0m
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]
Posté : 22 oct. 2007, 12:08
par AB
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>
Posté : 22 oct. 2007, 12:23
par Truc
@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
Posté : 22 oct. 2007, 14:06
par d0m
Merci les gens, la technique d'AB fonctionne parfaitement.