+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Styling d'iframes (/showthread.php?tid=7560)
Styling d'iframes - fortz - 01-01-2016
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.
RE: Arborescence des pages jeu par navigateur - @lucard - 02-01-2016
Et si tu mets:
display:block ?
RE: Arborescence des pages jeu par navigateur - fortz - 02-01-2016
Non ca ne fonctionne pas
RE: Arborescence des pages jeu par navigateur - Nhay - 03-01-2016
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)
RE: Arborescence des pages jeu par navigateur - fortz - 03-01-2016
ca ne résout rien, regardez : jsfiddle
Merci
RE: Arborescence des pages jeu par navigateur - @lucard - 03-01-2016
.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;
}RE: Arborescence des pages jeu par navigateur - fortz - 03-01-2016
Ok merci beaucoup ça fonctionne parfaitement
RE: Styling d'iframes - Xenos - 03-01-2016
Salut,
n'hésite pas à ouvrir 1 topic par sujet, ce sera plus simple de s'y retrouver.
RE: Styling d'iframes - fortz - 03-01-2016
ok merci désolé, en effet la conversation de base a dévié :p