Bonjour,
J'ai récemment trouvé un script sur dynamic drive me permettant le redimensionnement dynamique d'une iframe (la hauteur) en fonction de son contenu.
Très satisfait de ce script, je rencontre actuellement quelques difficultés de fonctionnement avec le chargement d'une de mes pages et cela proviens apparemment du CSS de la page en question. Je dis bien apparemment car si je désactive le CSS de ma page, l'iframe affiche bien la page et s'ajuste correctement au contenu.
A essayer avec firefox car IE ne pose apparemment pas de problèmes ... MAIS le truc de ouf, c'est que ca doit marcher avec firefox (le script est prévu pour et un exemple ci-dessous vous le prouvera).
En suivant le lien ci-dessous, vous verrez mon problème ...
Dans la page, vous verrez deux iframes :
- La première iframe est mon problème. (C'est la page que je tente de charger avec le CSS posant problème (si il s'agit bien du css)).
L'iframe NE s'ajuste PAS au contenu. ==> Si je désactive le CSS, l'iframe s'ajuste au contenu.
- Dans la seconde iframe c'est une page de test (sans css) et elle se charge correctement et l'iframe est redimensionnée en fonction du contenu.
LIEN :
http://www.150.be/test/gallery_details.php?galid=1
Ce que j'ai essayé déjà c'est :
- de rajouter height:100%; dans #galleryDetailContainer la ca marche +- mais ca déconne grave avec le diaporama (la page s'aggrandit au fure et a mesure du diaporama)
- de supprimer un a un les parties du code CSS. j'en suis arrivé à la conclusion que c'est le float : left; qui pose problème. Si je supprime float:left dans #galleryDetail mon iframe s'ajuste bien mais la mise en page n'est pas conservée.
POUVEZ-VOUS M'AIDER ? Je sèche Grave ^^
Voici le code de mon CSS
Code : Tout sélectionner
div, h1, h2, p, form, label, input, textarea, img, span{
margin:0;
padding:0;
border:0;
}
/*----------------------------------------- GALERIES PAGE DETAILS*/
/*Icones photo et video*/
#galleryHomeTools img{
float:left;
padding:0 0 0 2px;
}
/*Date de publication et nombre de vues*/
#galleryHomeTools p{
float:right;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#878767;
}
#galleryDetailContainer{
padding:50px 0 0 0;
}
#galleryDetailDiaporama{
margin: 0 auto;
text-align:center;
}
#galleryDetailDiaporama img{
width:800px;
height:600px;
}
/*Affichage bandeau du titre de la gallerie*/
#bannerGalleryDetailContainer{
background:url(medias/images/bandeautitre.png) 0 0 no-repeat;
width:932px;
height:30px;
padding:0 0 20px 0;
margin: 0 auto;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTitle1{
font:normal 17px/17px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:6px 0 0 20px;
float:left;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools{
font:normal 12px/17px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:7px 20px 0 0;
float:right;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools a{
color:#FFFFFF;
text-decoration:none;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools a:hover{
color:#9CCC37;
text-decoration:none;
}
/*Affichage des images de la gallerie*/
#galleryDetail{
float: left;
padding:0 0 0 21px;
margin:0 0 20px 0;
width:170px;
height:175px;
}
/*Images des galeries Full*/
#galleryDetail img.galleryDetailPicture1{
float: left;
display:block;
padding:0 0 0 10px;
width:150px;
height:113px;
}
/*Titre et lien des galeries Full*/
#galleryDetail p.galleryDetailTitle1{
float: left;
font:bold 10px/17px Arial, Helvetica, sans-serif;
background:inherit;
width:150px;
text-align: center;
margin:0px auto;
padding:0 0 0 10px;
}
#galleryDetail p.galleryDetailTitle1 a {
color:#878767;
text-align: center;
text-decoration:none;
}
#galleryDetail p.galleryDetailTitle1 a:hover{
color:#616149;
text-decoration:none;
}
/*Bordure des galeries (sub-container)*/
#galleryDetailBorder{
width:170px;
height:175px;
background:#EEEEEE;
}
#galleryDetailBorder:hover{
background:#DFDFDF;
}<div id="galleryDetailContainer">
<div id="bannerGalleryDetailContainer">
<p class="bannerGalleryDetailTitle1">La galerie photo ...</p>
<p class="bannerGalleryDetailTools"><a href="'.$_SERVER['PHP_SELF'].'?galid='.$_GET['galid'].'&action=mini" target="_self">Miniatures</a> | <a href="'.$_SERVER['PHP_SELF'].'?galid='.$_GET['galid'].'&action=diapo" target="_self">Diaporama</a></p>
</div>
<div id="galleryDetail">
<div id="galleryDetailBorder">
<div id="galleryHomeTools">
<a href="'.$photo.'" target="_blank"><img src="medias/images/view.png" alt="Voir l\'image" /></a>
<p>Taille: '.$row['photo_size'].'<br />
Type: '.$row['photo_type'].'</p>
</div>
<a href="'.$photo.'" target="_blank"><img class="galleryDetailPicture1" src="'.$photo.'" alt="'.$row['photo_filename'].'" /></a><br />
<p class="galleryDetailTitle1"><a href="'.$photo.'" target="_blank">'.$title.'</a></p>
</div>
</div>
</div>
Et pour finir voici le code de dynamic drive :
http://www.dynamicdrive.com/dynamicinde ... messi2.htm
Meci à tous ceux et celles qui pourrait m'aider
Bonjour,
J'ai récemment trouvé un script sur dynamic drive me permettant le redimensionnement dynamique d'une iframe (la hauteur) en fonction de son contenu.
Très satisfait de ce script, je rencontre actuellement quelques difficultés de fonctionnement avec le chargement d'une de mes pages et cela proviens apparemment du CSS de la page en question. Je dis bien apparemment car si je désactive le CSS de ma page, l'iframe affiche bien la page et s'ajuste correctement au contenu.
A essayer avec firefox car IE ne pose apparemment pas de problèmes ... MAIS le truc de ouf, c'est que ca doit marcher avec firefox (le script est prévu pour et un exemple ci-dessous vous le prouvera).
En suivant le lien ci-dessous, vous verrez mon problème ...
[u]Dans la page, vous verrez deux iframes :[/u]
- La première iframe est mon problème. (C'est la page que je tente de charger avec le CSS posant problème (si il s'agit bien du css)).
L'iframe NE s'ajuste PAS au contenu. ==> Si je désactive le CSS, l'iframe s'ajuste au contenu.
- Dans la seconde iframe c'est une page de test (sans css) et elle se charge correctement et l'iframe est redimensionnée en fonction du contenu.
LIEN : http://www.150.be/test/gallery_details.php?galid=1
[u][b]Ce que j'ai essayé déjà c'est :[/b][/u]
- de rajouter height:100%; dans #galleryDetailContainer la ca marche +- mais ca déconne grave avec le diaporama (la page s'aggrandit au fure et a mesure du diaporama)
- de supprimer un a un les parties du code CSS. j'en suis arrivé à la conclusion que c'est le float : left; qui pose problème. Si je supprime float:left dans #galleryDetail mon iframe s'ajuste bien mais la mise en page n'est pas conservée.
[color=#FF0000][b]POUVEZ-VOUS M'AIDER ? Je sèche Grave ^^[/b][/color]
[b]Voici le code de mon CSS[/b]
[code]div, h1, h2, p, form, label, input, textarea, img, span{
margin:0;
padding:0;
border:0;
}
/*----------------------------------------- GALERIES PAGE DETAILS*/
/*Icones photo et video*/
#galleryHomeTools img{
float:left;
padding:0 0 0 2px;
}
/*Date de publication et nombre de vues*/
#galleryHomeTools p{
float:right;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#878767;
}
#galleryDetailContainer{
padding:50px 0 0 0;
}
#galleryDetailDiaporama{
margin: 0 auto;
text-align:center;
}
#galleryDetailDiaporama img{
width:800px;
height:600px;
}
/*Affichage bandeau du titre de la gallerie*/
#bannerGalleryDetailContainer{
background:url(medias/images/bandeautitre.png) 0 0 no-repeat;
width:932px;
height:30px;
padding:0 0 20px 0;
margin: 0 auto;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTitle1{
font:normal 17px/17px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:6px 0 0 20px;
float:left;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools{
font:normal 12px/17px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:7px 20px 0 0;
float:right;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools a{
color:#FFFFFF;
text-decoration:none;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools a:hover{
color:#9CCC37;
text-decoration:none;
}
/*Affichage des images de la gallerie*/
#galleryDetail{
float: left;
padding:0 0 0 21px;
margin:0 0 20px 0;
width:170px;
height:175px;
}
/*Images des galeries Full*/
#galleryDetail img.galleryDetailPicture1{
float: left;
display:block;
padding:0 0 0 10px;
width:150px;
height:113px;
}
/*Titre et lien des galeries Full*/
#galleryDetail p.galleryDetailTitle1{
float: left;
font:bold 10px/17px Arial, Helvetica, sans-serif;
background:inherit;
width:150px;
text-align: center;
margin:0px auto;
padding:0 0 0 10px;
}
#galleryDetail p.galleryDetailTitle1 a {
color:#878767;
text-align: center;
text-decoration:none;
}
#galleryDetail p.galleryDetailTitle1 a:hover{
color:#616149;
text-decoration:none;
}
/*Bordure des galeries (sub-container)*/
#galleryDetailBorder{
width:170px;
height:175px;
background:#EEEEEE;
}
#galleryDetailBorder:hover{
background:#DFDFDF;
}[/code]
[b]Voici le code de ma page :[/b]
[php]<div id="galleryDetailContainer">
<div id="bannerGalleryDetailContainer">
<p class="bannerGalleryDetailTitle1">La galerie photo ...</p>
<p class="bannerGalleryDetailTools"><a href="'.$_SERVER['PHP_SELF'].'?galid='.$_GET['galid'].'&action=mini" target="_self">Miniatures</a> | <a href="'.$_SERVER['PHP_SELF'].'?galid='.$_GET['galid'].'&action=diapo" target="_self">Diaporama</a></p>
</div>
<div id="galleryDetail">
<div id="galleryDetailBorder">
<div id="galleryHomeTools">
<a href="'.$photo.'" target="_blank"><img src="medias/images/view.png" alt="Voir l\'image" /></a>
<p>Taille: '.$row['photo_size'].'<br />
Type: '.$row['photo_type'].'</p>
</div>
<a href="'.$photo.'" target="_blank"><img class="galleryDetailPicture1" src="'.$photo.'" alt="'.$row['photo_filename'].'" /></a><br />
<p class="galleryDetailTitle1"><a href="'.$photo.'" target="_blank">'.$title.'</a></p>
</div>
</div>
</div>[/php]
[b]Et pour finir voici le code de dynamic drive[/b] : http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
Meci à tous ceux et celles qui pourrait m'aider :D
