Div qui pousse une autre div

Bonjour,

Je cherche le moyen en css de faire cela.

L'idée c'est de pousser une div par une autre div de façon à ce que la div poussée sorte de l'écran mais que je n'ai pas de scroll pour autant. Vous me suivez ?

Voilà ce que j'essaie de faire ^^

<div id="poussetoi" style="width:100%;background-color:red;">AUREVOIR</div>
<div id="arretedepousser">STOP</div>

Merci de votre aide.
Modifié par callie (11 Feb 2016 - 16:48)

salut,
déjà c'est très impoli de pousser mais bon tu me diras qu'on ne pourra jamais éduquer toutes ces divs !
Si tu veux quand même garder cet élément mal élevé, tu n'as qu'à ajouter un overflow:hidden sur le parent.
Voici ce que ça pourrait donner.

Salut,

Waouh, c'est cool merci !

J'ai vu qu'il y avait une alternative avec position:absolute.

Ca semble marcher juste en mettant cet attribut sur la div "poussetoi"

Tu peux essayer et me dire si c'est bien comme façon de faire ?

Par contre ce sera pas aussi joli que ton effet

Bonjour,

callie a écrit :
J'ai vu qu'il y avait une alternative avec position:absolute.

Ca semble marcher juste en mettant cet attribut sur la div "poussetoi"

Tu peux essayer et me dire si c'est bien comme façon de faire ?

Je ne vois pas trop ce que ça pourrait donner, il faudrait que tu nous montres le code...

... Mais je ne vois pas trop comment tu "pousserais" quoi que se soit, car justement en position:absolute ton élément sort du flux et devient "indépendant" et donc sans interaction par rapport aux autres éléments.
Modifié par SolidSnake (12 Feb 2016 - 11:04)

Bonjour,

ZELANSAN j ai bien aimé ton code.

Sur mon site acmt47.fr , j avais 4 images cote à cote sur la meme ligne. je me suis demande s il etait possible de faire la meme chose que toi.

Apres avoir cherche ce week end, j ai enfin reussi. 1 image s affiche, quand on la survole, 3 autres images coulissent et viennent se placer à cote.

C'est grace à ton code. merci et bravo.

Bonjour,
j'ai essayé de réadapter le code a mes désir mais rien ne marche du coup je sais pas si quelqu'un a la réponse..
en faites j'ai des image cote a cote
http://img15.hostingpics.net/pics/75874813459604102082825176741181225659598n.jpg
et au passage de la souris l'image se déplis et du texte apparaitra a coté bref jusque la c'est bon le soucis c'est que mon image se deplis par dessus les autres et j'aimerais plutot qu'elle les pousse, mais je n'arrive pas a trouver comment faire..
est ce le faites qu'il y ai botstrap ?
merci

Personne ne pousse personne, ceci n'est qu'illusion !

En synchronisant une translation des images pliées au moment où l'une d'elle se déplie tu auras la sensation que l'une pousse l'autre alors qu'il s'agit de deux animations distinctes.

Tu vois ce que je veux dire ?

PS : Il serait peut-être plus judicieux d'ouvrir ton propre sujet Theneograph plutôt que de déterrer une relique. Courage, tu peux le faire !
:-P

haha oui je vois
a un moment j'ai reussi a déplacer le reste des image a passage de la souris mais l'image elle ne c'est pas déplier.

oui c'est ce que je me suis dit mais je me suis aussi dit que bon février 2016 il y a pire comme déterrage