Page 1 sur 1

Div, Position, Top et Height!

Posté : 22 déc. 2007, 18:52
par FloBaoti
Salut à tous!

Pour une fois que je veux mettre des Divs les uns sur les autres, je n'y arrive pas!

Je m'explique, j'ai plusieurs div comme ça:

Code : Tout sélectionner

<div style="position:relative; top:10px; height:50px;">Div 1</div> <div style="position:relative; top:70px; height:50px;">Div 2</div> <div style="position:relative; top:130px; height:50px;">Div 3</div>
Je voudrais donc que l'instruction Top prennent comme référence le bloc conteneur et non le bas du Div situé au dessus de lui!

En gros, dans mon exemple, que chaque Div soit espacé de 10px de celui qui le précède...

Vous voyez ce que je veux dire. Je voudrais que les Div sortent totalement du layout de la page...

Si ça peut vous aider à la compréhension, c'est pour la gestion d'un agenda, chaque Div représente un évènement et en fonction de l'heure et de leur durée, je leur fixe respectivement leur Top et leur Height.

Merci par avance si vous avez une astuce ;)

Bonnes fêtes à tous et @++

Posté : 22 déc. 2007, 19:18
par Shrell
La position relative ne retire pas à proprement parler ta boite du flux, elle ne fait que la déplacer "relativement" à la position qu'elle occuperait en temps normal.
Il faut donc utiliser le positionnement absolu, et pour que tes boites soient positionnées par rapport au conteneur et non pas au document, il faut que le conteneur soit lui même positionné (même si tu ne changes pas sa place)
Ce qui nous donne :

Code : Tout sélectionner

<div id="conteneur" style="position: relative;"> <div style="position:absolute; top:10px; height:50px;">Div 1</div> <div style="position:absolute; top:70px; height:50px;">Div 2</div> <div style="position:absolute; top:130px; height:50px;">Div 3</div> </div>
Là tout devrait être bon :-)

Posté : 22 déc. 2007, 19:30
par FloBaoti
Excellent!! Merci beaucoup :wink:

Bonnes fêtes.

@++

Posté : 22 déc. 2007, 23:11
par Truc
Modération :
FloBaoti, si ta question est résolue, pense à ajouter le tag [Résolu]
pour indiquer aux personnes qui voudront consulter ce sujet qu'il contient une solution.
Tu peux réaliser cette opération en cliquant sur le bouton Image en haut à gauche de ce sujet.

Posté : 23 déc. 2007, 00:26
par FloBaoti
Effectivement, désolé je n'ai pas l'habitude :oops:

:wink: