Version imprimable
Bonjour, je sais que le sujet est connu mais je galère ...
Voici ce que je désire obtenir :
http://fayanet.ovh.org/superposition.JPG
Les div A et B se suivent dans le flux.
A1 et A2 sont respectivement en float left et right dans la div A.
La hauteur de la div A dépend de celle de la div A1.
J'aimerais que lorsque A2 est plus grande que A, elle chevauche la div du dessous (B).
Voilà voilà ... si quelqu'un à une piste. Merci d'avance.
Bonsoir
Je pense avoir compris ce que tu veux, tu aura une réponse dans ces deux tutoriels : http://css.developpez.com/tutoriels/...issement-flux/ et http://css4design.developpez.com/tut...flux-partie-2/.
Bonne lecture ;)
Merci beaucoup, je consulte et je posterai la solution.
Si je trouve !
Alors ... j'ai l'impression que les méthodes proposées ne correspondent pas à ce que je veux :
la propriété overflow permet à la div A de prendre en compte la hauteur de A1 et A2 or c'est justement ce que je ne veux pas :
j'aimerais qu'elle s'adapte seulement à la hauteur de A1 mais que A2 dépasse ET chevauche B.
Ce doit être une question de z-index et position mais je ne trouve pas le bon mélange :?
EDIT :
Voici un exemple qui fonctionne sous Firefox et pas sous IE :( :
http://fayanet.ovh.org/test/
En cliquant sur les titres, la div B ne bouge pas et c'est bien ce que je veux.
Reste à dompter IE ...
(le lien du CSS est dans la div B)
Ok j'avais compris l'inverse...
En réfléchissant rapidement je dirais si tu peut donner une hauteur fixe à la div A ce serait un plus :
Code:
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
35
36
37
Sinon je verrais la position relative :
Code:
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
35
36
Cette dernière solution me parrait beaucoup plus bancale, je n'ai testé qu'avec firefox 3. Le css se trouve dans le html, désolé, mais ça va plus vite comme ça, faut pas le refaire...
Sinon quelqu'un d'autre trouvera peut être une autre solution...
Bonsoir,
c'est faisable sans trop de difficultés en positionnant le bloc A2 en absolute, c-a-d retiré du flux.
Mais autant se passer de positionnement absolue et utiliser une solution à base de flottants et de blocs en flux normal:
L'astuce consiste à exploiter justement le flottement pour retirer partiellement le bloc A2 du flux normal vis à vis de son bloc parent (A ici)Code:
2
3
4
5
donc sans qu'il puisse influer sur la hauteur de A.
Ce bloc doit se trouver AVANT le bloc A1 dans le code pour s'afficher au même niveau.
Attention, pour que cette méthode fonctionne sous IE7- (au passage ne pas oublier de tester sous IE8 qui vient de sortir en version finale) les blocs A et B ne doivent pas avoir le layout, c-a-d qu'il se doivent pas être dotés de largeur ou hauteur (principalement).
Le layout provoque ici un comportement non standard sous IE7- > le bloc englobe ses enfants flottant alors que ça ne devrait pas.
Merci pour vos réponses.
J'ai résolu le problème en inversant la position des div :
A2 en absolute se retire du flux et se colle à gauche.
A1 en float right se colle à droite et A s'adapte à sa hauteur (avec un pti coup de overflow:hidden).
Enfin on joue sur les z-index et voilà :D. J'espère juste que ça bougera pas sous Opera et Safari.
Encore merci.
Pour ceux que ça intéresse : http://fayanet.ovh.org/test/