Bonjour, bonsoir !

Je découvre petit à petit les nouvelles propriétés sur CSS3, pour ce qui est des transitions, etc, du coup j'ai un peu envie d'en mettre un peu partout. Sauf que j'ai une idée en tête, je ne sais pas si elle est possible, mais en tout cas, je n'y parviens pas toute seule, malheureusement.

Voici le lien de mon forum test : xx

Mon soucis réside dans la partie STAFF de ma page d'accueil.
J'ai fais une petite bulle qui, au passage du curseur s'agrandit pour laisser apparaitre son contenue. C'est très brut. Le problème, c'est que j'aimerais que lorsqu'elle s'agrandit, elle passe par dessus la deuxième bulle à ses côtés, au lieu de tout décalé.

HELP
Je vous remercie d'avance.

Voici le HTML de la PA :

Code:

<div class="vigadmin"> <img src="http://placeboeffect.free.fr/tapis/kath110.jpg"/> <br/> Kathleen Manchester <br/> Fondatrice</div><div class="vigadmin" style="left : 30px;"> <img src="http://placeboeffect.free.fr/tapis/kath110.jpg"/> <br/> Nathanaël Lewis <br/> Administrateur</div>

Et voici mon CSS :

Code:

.vigadmin {
  border-radius : 100px ;
  border : 2px grey solid ;
  width : 40px ;
  height : 40px ;
  overflow : hidden ;
  position : relative ;
  left : 0 ;
  top : 0 ;
  z-index : 2 ;
}

.vigadmin:hover {
  position : relative ;
  border-radius : 20px ;
  width : 200px ;
  height : 150px ;
  z-index : 3 ;
  }

Hello,

Tel que c'est codé ton image grandit au survol, si j'ai bien saisi, donc forcément elle poussera les autres vu qu'elle est toujours dans le flux. Il faudrait qu'elle sorte du flux pour que ça marche...

Peut-être qu'en les positionnant en absolu ça marcherait mieux ?

Genre

Code:

<div class="Conteneur">
  <div class="bloc">Blabla</div>
  <div class="bloc decalage1">BlaBla</div>
</div>

Code:

.Conteneur { position:relative;}
.bloc { /*les trucs communs à tous les blocs, et un position:absolute; avec top et left égaux à 0 pour commencer */ }
.decalage1 { top:30px;left:30px;}

(Oui tout mettre dans le CSS ça t'évitera de devoir systématiquement retoucher le HTML)

En gros comme si je faisais des infobulles °_° ?

Heuuuu... ouais, si tu veux O.o Sauf que là ce ne sont pas des infobulles, fondamentalement.

Tu es une magicienne. Je crois que tu m'agaces. *lance des pétales*
J'ai regardé dans ton code source, et en faite, j'avais bien foiré mes positions.
Le fait que cela passe par dessus tout, c'est simplement avec le z-index, nope ?Le position absolute influence normalement que son positionnement ? Je veux être sûre d'avoir bien compris ._.

Et le coup de tout mettre dans le css... c'était pas bête du tout. J'dois aimer me compliquer la vie je crois bien --"

J'ai mis un z-index parce que sinon le premier bloc passe sous le second qui lui même passe sous le troisième. Donc voui ça permet de décider quel est l'ordre d'importance des blocs (et donc de définir lequel est au dessus des autres).

Et le positionnement absolu, comme son nom l'indique, positionne le bloc, oui XD Par contre il faut faire gaffe à ce que ça soit positionné par rapport à quelque chose (c'est à dire à un bloc relatif ou absolu) '_'

C'est ce que j'avais essayé de faire, mais j'avais changé le z-index au hover. J'étais sur la piste x)
Merci beaucoup !

Oui, Pamina tu peux archiver ♥

Merci beaucoup encore une fois ^w^ !

OK. J'archive. Merci pour ta réponse, Ketsia.