Styling d'iframes

[fortz]

Tout d'abord bonne année

Alors j'ai travaillé un peu sur les iframe là et je me confronte à un problème :
J'ai réussi à centrer un iframe au milieu de la page grace au code suivant :

Code :

.iframe {
   text-align: center;
   vertical-align: middle;
   display: table-cell;
   position: absolute;
}

.iframe_draggable {
position: relative;
z-index: 999;
   width:800px;
   height:500px;
   background-color:blue;
   border-top : 10px solid red;
}

<div class="iframe">
<iframe class="iframe_draggable" src="modules/membres/view/profil.php"></iframe>
</div>

$(".iframe_draggable").draggable();

Donc tout va bien là-dessus ! Par contre le problème c'est que si j'en met deux ou trois (au cas où l'utilisateur veuille ouvrir plusieurs iframes/popups alors les différents iframes ne s'empilent pas et se mettent à la suite les uns des autres. Ce comportement me semble logique vu que les div se comportent de cette façon avec mon css. Donc j'ai ajouté la propriété position : absolute; mais du coup plus rien n'est centré

Aurais-tu une solution pour que les iframes s'empilent et qu'ils soient centrés ?

Merci.

[@lucard]

Et si tu mets:
display:block ?

[fortz]

Non ca ne fonctionne pas

[Nhay]

Du coup, un display:inline sur tes iframes devrait résoudre le soucis si tu veux tout sur la même ligne. (A condition qu'elles soient côté à côté, dans la même div)

[fortz]

ca ne résout rien, regardez : jsfiddle

Merci

[@lucard]

.iframe {

  text-align: center;

  /* display: table-cell;      // Ces 2 lignes ne servent à rien //

  vertical-align:middle;*/

  position: absolute;

  width: 100%; /*pour qu'on y voit mieux*/

  height: 100%;

  border:1px red solid; /*pour qu'on y voit mieux*/

}



.iframe_draggable {

  position: relative;

  z-index: 5; /*Pourquoi toujours 999 ?  */

  width: 100px;

  height: 100px;

  display: inline;

  background-color: blue;

  border-top: 10px solid red;

  top: 50%; /*Pour que ça soit au milieu (verticalement)*/

  margin-left:-108px;  /*Pour qu'elles s'empilent les une sur les autres (100 de width + 8px de border/padding/margin (iframe default border)) */

}

.iframe_draggable:hover {

  border-top: 10px solid pink;

  cursor:grabbing; /*juste pour que ça soit plus cool.*/

}

Tu peux aussi changer le style du iframe

iframe{

  margin:0px;

  padding:0px;

  border:1px solid grey;

}

[fortz]

Ok merci beaucoup ça fonctionne parfaitement

[Xenos]

Salut,

n'hésite pas à ouvrir 1 topic par sujet, ce sera plus simple de s'y retrouver.

[fortz]

ok merci désolé, en effet la conversation de base a dévié :p