Se connecter avec
S'enregistrer | Connectez-vous

Iframe avec hauteur variable

Dernière réponse : dans Programmation
Expert Programmation

Bonjour a tous

je suis entrain de faire un site dont le corpt du site et une frame
mais comment fair pour que la frame frame prene la place quel veux en hauteur

comme si j'avais mis height="auto" qui ne marche pas

j'ai vue quil falais enlevais la doctrine ensuite 100% marchais
mais sa ne marche pas

???????????????


voila lecode si sa peut vou aider

<html>
<head>
<title>Bienvenue al-ka-y-dien</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks 8 Dreamweaver 8 target. Created Fri Apr 20 19:18:44 GMT+0200 2007-->
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
function clicie() {
// Fonction de détection pour Internet Explorer
if ((event.button==2)||(event.button==3)) {
alert("Respectez les droits d'auteur...");
}
}
function clicns(e){
// Fonction pour Netscape
if(e.which==3){
alert("Respectez les droits d'auteur...");
return false;
}
}


if (document.all) { document.onmousedown=clicie;}
if (document.layers) {document.captureEvents(Event.MOUSEDOWN); document.onmousedown = clicns;}
if (window.sidebar) {document.captureEvents(Event.MOUSEDOWN); document.onmousedown = clicns;}

</SCRIPT>
</head>
<body bgcolor="#ffff67">
<table border="0" cellpadding="0" cellspacing="0" width="750" align="center">
<!-- fwtable fwsrc="index.png" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "905486688" fwnested="0" -->
<tr>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="16" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="630" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="12" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="20" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="32" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="6"><img name="index_r1_c1" src="images/index_r1_c1.jpg" width="750" height="44" border="0" id="index_r1_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="44" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2" colspan="2"><img name="index_r2_c1" src="images/index_r2_c1.jpg" width="56" height="99" border="0" id="index_r2_c1" alt="" /></td>
<td colspan="2"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash...','width','642','height','75','src','swf/ban','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','swf/ban' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash..." width="642" height="75">
<param name="movie" value="swf/ban.swf" />
<param name="quality" value="high" />
<embed src="swf/ban.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="642" height="75"></embed>
</object></noscript></td>
<td rowspan="2" colspan="2"><img name="index_r2_c5" src="images/index_r2_c5.jpg" width="52" height="99" border="0" id="index_r2_c5" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="75" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img name="index_r3_c3" src="images/index_r3_c3.jpg" width="642" height="24" border="0" id="index_r3_c3" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="24" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="index_r4_c1" src="images/index_r4_c1.jpg" width="40" height="146" border="0" id="index_r4_c1" alt="" /></td>
<td colspan="4"><iframe name="menu"
align="center"
marginwidth="0"
marginheight="0"
src="menu1.html"
frameborder="no"
scrolling="auto"
width="678"
height="146">
</iframe></td>
<td><img name="index_r4_c6" src="images/index_r4_c6.jpg" width="32" height="146" border="0" id="index_r4_c6" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="146" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="index_r5_c1" src="images/index_r5_c1.jpg" width="750" height="16" border="0" id="index_r5_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6">
<iframe name="corpt"
align="center"
marginwidth="0"
marginheight="0"
src="index_admin.php"
frameborder="no"
scrolling="no"
width="750"
height="100%">
</iframe>
</td>
<td><img src="images/spacer.gif" width="1" height="85" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="index_r7_c1" src="images/index_r7_c1.jpg" width="750" height="22" border="0" id="index_r7_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3" colspan="2"><img name="index_r8_c1" src="images/index_r8_c1.jpg" width="56" height="88" border="0" id="index_r8_c1" alt="" /></td>
<td>
<iframe name="copyright"
align="center"
marginwidth="0"
marginheight="0"
src="autreframe/copyright.html"
frameborder="no"
scrolling="no"
width="630"
height="30">
</iframe>
</td>
<td rowspan="3" colspan="3"><img name="index_r8_c4" src="images/index_r8_c4.jpg" width="64" height="88" border="0" id="index_r8_c4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
</tr>
<tr>
<td> <iframe name="heure javascript"
align="center"
marginwidth="0"
marginheight="0"
src="autreframe/heure.html"
frameborder="no"
scrolling="no"
width="630"
height="37">
</iframe></td>
<td><img src="images/spacer.gif" width="1" height="37" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="index_r10_c3" src="images/index_r10_c3.jpg" width="630" height="21" border="0" id="index_r10_c3" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="21" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>


c'est ma la iframe en rouge qui pose probleme

Autres pages sur : iframe hauteur variable

Lassé par la pub ? Créez un compte

J'ais la solution ^^, que j'ais trouver en cherchant pas mal sur divers forums, par contre il faut que tu sache que si tu applique ma solution (qui me parait etre la seul), le contenu de ta frame sera uniquement visible aux internautes ayant les dernieres versions de leur navigateur, IE7, Mozilla FF ect...

Regarde mon site http://area-fiftyone.ifrance.com (clic sur les liens des membres en bas) pour avoir un aperçus.

Je te donne le code que tu adapteras a ta page:

A placer dans la la balise head, AVANT! ta feuille de style css:
-------------------------------------------------
  1. <head>
    

  2. <script>
    

  3. function actu_iframe(){
    

  4. if(navigator.appName=="Microsoft Internet Explorer" ){
    

  5. if(document.all) document.all.id_iframe.style.height = document.frames("ID DE TON IFRAME" ).document.body.scrollHeight;
    

  6. else document.getElementById("ID DE TON IFRAME" ).style.height = document.getElementById("ID DE TON IFRAME" ).contentDocument.body.scrollHeight;
    

  7. }
    

  8. else{
    

  9. document.getElementById("iframe" ).style.height = document.getElementById("iframe" ).contentDocument.body.offsetHeight+"px";
    

  10. }
    

  11. }
    

  12. </script>	   
    

  13. <!--[if gte IE 5]>
    

  14. 				<script>
    

  15. 				function actu_iframe()
    

  16. {
    

  17. if(document.all) document.all.iframe.style.height = document.frames("ID DE TON IFRAME" ).document.body.scrollHeight;
    

  18. else document.getElementById("ID DE TON IFRAME" ).style.height = document.getElementById("ID DE TON IFRAME" ).contentDocument.body.scrollHeight;
    

  19. }
    

  20. </script>
    

  21. 		<![endif]--> 
    

  22. <link rel="stylesheet" media="screen" type="text/css" title="xxx" href="TA FEUILLE DE STYLE.css"/>
    

  23. </head>

------------------------------------------------------------

A placer dans ta balise iframe:
------------------------------------------------------------
  1. <iframe onLoad="actu_iframe();" id="ID DE TON IFRAME"></iframe>


J'espère que ca t'auras aidé!
Expert Programmation

voila le code de ma page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--"http://www.w3.org/TR/html4/loose.dtd"-->
<html>
<head>
<title>ALKAHIDA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function actu_iframe(){
if(navigator.appName=="Microsoft Internet Explorer" ){
if(document.all) document.all.id_iframe.style.height = document.frames("page" ).document.body.scrollHeight;
else document.getElementById("page" ).style.height = document.getElementById("page" ).contentDocument.body.scrollHeight;
}
else{
document.getElementById("iframe" ).style.height = document.getElementById("iframe" ).contentDocument.body.offsetHeight+"px";
}
}
</script>
<!--[if gte IE 5]>
<script>
function actu_iframe()
{
if(document.all) document.all.iframe.style.height = document.frames("page" ).document.body.scrollHeight;
else document.getElementById("page" ).style.height = document.getElementById("page" ).contentDocument.body.scrollHeight;
}
</script>
<![endif]-->
<link href="image/lien.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #333333;
scrollbar-3dlight-color: #00000;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #666666;
scrollbar-darkshadow-color: Black;
scrollbar-face-color: #FFCC66;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-track-color: #333333;
}
.Style1 {font-weight: bold}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('image/bouton2.png')">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="800" height="160" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="20" rowspan="3" valign="top" background="image/image1.png"><!--DWLayoutEmptyCell--> </td>
<td width="490" height="40" valign="top" background="image/image2.png"><!--DWLayoutEmptyCell--> </td>
<td width="280" rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="280" height="130" align="right" valign="middle" background="image/image4.png"><img src="image/logo.png" width="243" height="91"></td>
</tr>
</table></td>
<td width="10" rowspan="3" valign="top" background="image/image5.png"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="90" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="490" height="90" align="left" valign="middle" background="image/image3.png"><img src="image/ban1.png" width="468" height="60"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="30" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="auto" height="30" align="left" valign="middle"><a href="#" class="menu">Accueil . </a></td>
<td width="auto" align="left" valign="middle"><a href="page/" target="page" class="menu">Photos . </a></td>
<td width="auto" align="left" valign="middle"><a href="#" class="menu">Vidéos . </a></td>
<td width="auto" align="left" valign="middle"><a href="#" class="menu">Bouteilles ? </a></td>
<td width="auto" align="left" valign="middle"><a href="#" class="menu">Plant ?</a></td>
<td width="auto" align="left" valign="middle"><a href="#" class="menu">Nous !</a></td>
<td width="auto" align="left" valign="middle"><a href="#" class="menu">Vous ! </a></td>
<td width="auto" align="left" valign="middle"><a href="admin/index.php" target="page" class="menu">Admin.</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="0"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table></td>
</tr>
<tr>
<td height="745" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="800" height="13"></td>
</tr>
<tr>
<td height="423" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="50" height="30" valign="top" background="image/tv1.png"><!--DWLayoutEmptyCell--> </td>
<td width="700" valign="top" background="image/tv2.png"><!--DWLayoutEmptyCell--> </td>
<td width="50" valign="top" background="image/tv3.png"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="210" valign="top" background="image/tv4.png"><!--DWLayoutEmptyCell--> </td>
<td rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="700" height="353"><iframe onLoad="actu_iframe();" src="page/accueil.php" id="page" name="page" width="700" align="right" scrolling="auto" frameborder="0"></iframe></td>
</tr>
</table></td>
<td valign="top" background="image/tv4.png"><!--DWLayoutEmptyCell--> </td>
<tr>
<td height="70" valign="top" background="image/tv6.png"><!--DWLayoutEmptyCell--> </td>
<td valign="top" background="image/tv6.png"><!--DWLayoutEmptyCell--> </td>
<tr>
<td height="73" valign="top" background="image/tv4.png"><!--DWLayoutEmptyCell--> </td>
<td valign="top" background="image/tv4.png"><!--DWLayoutEmptyCell--> </td>
<tr>
<td height="40" valign="top" background="image/tv8.png"><!--DWLayoutEmptyCell--> </td>
<td valign="top" background="image/tv9.png"><!--DWLayoutEmptyCell--> </td>
<td valign="top" background="image/tv10.png"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="0"></td>
<td></td>
<td></td>
</tr>
</table></td>
</tr>
<tr>
<td height="22"> </td>
</tr>
<tr>
<td height="268" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="49" height="30" valign="top" background="image/cadre1.png"><!--DWLayoutEmptyCell--> </td>
<td width="462" valign="top" background="image/cadre2.png"><!--DWLayoutEmptyCell--> </td>
<td width="29" valign="top" background="image/cadre3.png"><!--DWLayoutEmptyCell--> </td>
<td width="260"> </td>
</tr>
<tr>
<td height="89" valign="top" background="image/cadre4.png"><!--DWLayoutEmptyCell--> </td>
<td colspan="3" rowspan="3" valign="top" class="cadre"><div align="center">
<p><strong>D</strong>esigne by<strong> T</strong>eddy.<br>
<strong>S</strong>ite by <strong>T</strong>eddy,<strong> B</strong>enjamin,<strong> A</strong>ntoine.<br>
<strong>S</strong>ite mientenue par :<strong> A</strong>ntoine, <strong>B</strong>enjamin, <strong>C</strong>olin, <strong>J</strong>ordann,<strong> R</strong>odolphe, <strong>Y</strong>ohann,<strong> T</strong>eddy . </p>
</div><br> <br> <br><div align="center" ><p><strong>Copyright : <br>
"Tout pourri Corporarion ©
2007", tout droits réservés.</strong></p></div>
</td>
</tr>
<tr>
<td height="90" valign="top" background="image/cadre5.png"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="59"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="19" align="center" valign="middle" class="Style1"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>


sa ne marche pas !!!
mais pourquoi ?
Expert Programmation

Quand il a dit "ID FRAME", ça veut dire qu'il faut remplacer cette valeur là par l'ID de ta frame.
Dans ton cas, tu as nommé ta phrase "page", donc il ne faut pas appeler la frame avec "id_frame", mais avec "page"
Expert Programmation

Me dis pas que tu as bien toutes les valeurs; dans le code que tu nous as donné, ça correspond à rien tout ce que tu as mis.
Tu nommes ton iframe "page", après tu l'utilises avec "id_frame" et "iframe"

Omar ta réponse me fait rigoulé!, Adrelec1, je me suis un peu perdu dans
ton tableau, entre les tr, td, th ect...ca serais mieu si tu mettais ta page en ligne qu'on puisse voir a quoi cela ressemble, ou même un screenshot de ta page... sinon, je vois que tu appel une feuille de style .css, et qu'en dessous tu rajoute encore du css??? Pourquoi???.
Si tu donne un id a ta frame, il faut que tu remplace tous les 'ID FRAME' par l'id que tu lui a atribué, comme l'a souligner Omar_ShaRif.
Expert Programmation

J'ai ouvert la source de ton site, j'ai regardé 5 lignes, y'a déjà plein d'id qui manquent :

Citation :

<script>
function actu_iframe(){
if(navigator.appName=="Microsoft Internet Explorer" ){
if(document.all) document.all.id_iframe.style.height = document.frames("page" ).document.body.scrollHeight;
else document.getElementById("page" ).style.height = document.getElementById("page" ).contentDocument.body.scrollHeight;
}
else{
document.getElementById("iframe" ).style.height = document.getElementById("iframe" ).contentDocument.body.offsetHeight+"px";
}
}
</script>


Dans le script pour IE5 c'est pareil...

Et pourtant Omar, lol, je te colle le code de ma page principal :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>aREA-51</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="area51.ico" />
<script>
function actu_iframe(){
if(navigator.appName=="Microsoft Internet Explorer" ){
if(document.all) document.all.id_iframe.style.height = document.frames("iframe" ).document.body.scrollHeight;
else document.getElementById("iframe" ).style.height = document.getElementById("iframe" ).contentDocument.body.scrollHeight;
}
else{
document.getElementById("iframe" ).style.height = document.getElementById("iframe" ).contentDocument.body.offsetHeight+"px";
}
}
</script>
<!--[if gte IE 5]>
<script>
function actu_iframe()
{
if(document.all) document.all.iframe.style.height = document.frames("iframe" ).document.body.scrollHeight;
else document.getElementById("iframe" ).style.height = document.getElementById("iframe" ).contentDocument.body.scrollHeight;
}
</script>
<![endif]-->
<link rel="stylesheet" media="screen" type="text/css" title="clearblack" href="hithesky.css"/>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>

<p style="padding:0;margin:0;"><a href="http://www.web-stats.org" title="statistiques pour site web" >
<script type="text/javascript">
//<![CDATA[
var wso_id=7030;
//]]>
</script>
<script type="text/javascript" src="http://js1.web-stats.org/wso.js"></script>
<object>
<noscript>
<p><img style="border:0;" alt="statistiques pour site web" src="http://7030.web-stats.org/wso.gif?S=NJ" /></p>
</noscript>
</object>
</a></p>

<body>

<div class="champ">
<a href="index2.html" title="cliquer pour revenir au home">
<div class="header">
<img src="ressource/header.gif" alt="header"/>
</div>
</a>

<div class="bouton1">
<a href="info/info.html" alt="le collectif" target="I1">a propos</a>/ <a href="mailto:area-fiftyone@ifrance.com">nous contacter</a>
</div>

<div class="frame">
<iframe onLoad="actu_iframe();" name="I1"id="iframe" src="ressource/+.html" scrolling="no" frameborder=no>Votre navigateur ne supporte pas les
frames.</iframe>
</div>

<div class="bouton2">
design/ graphisme
<div class="sousbouton">
<a href="work/design-graph/manon.jpg" rel="lightbox">
<div>design-BigUp Alberto Seveso-001</div>
</a>
</div>
<div class="sousbouton">
<a href="work/design-graph/manon2.jpg" rel="lightbox">
<div>design-BigUp Alberto Seveso-002</div>
</a>
</div>
<div class="sousbouton">
<a href="work/design-graph/graph.jpg" rel="lightbox">
<div>graphisme murale exclu area-51-001</div>
</a>
</div>
</div>

<div class="bouton2">
illustrations
<div class="sousbouton">
<a href="work/illu/gtob.jpg" rel="lightbox">
<div>illustration-greyTurnigblue</div>
</a>
</div>
</div>

<div class="bouton2">
customs
<div class="sousbouton">
<a href="work/custom/objet/ipod.jpg" rel="lightbox">
<div>custom-Contestsheepme Ipod</div>
</a>
</div>
<div class="sousbouton">
<a href="work/custom/logo/sweetbear.jpg" rel="lightbox">
<div>logoTshirt-sweetbear</div>
</a>
</div>
</div>

<div class="bouton2">
photos
</div>

<a id="menulien" href="info/info.html" target="I1">
<div class="bouton2">
aREA-51
</div>
</a>

<div class="listeartiste">
<a href="membres/stck/stck.html" target="I1">Stickmaniak</a> + <a href="membres/eK/eK.html" target="I1">eK</a> + <a href=
"membres/rm1/rm1.html" target="I1">ROM1<a/> + <a href="membres/mrg/mrg.html" target="I1">Margoth</a> + <a href=
"membres/popss/popss.html" target="I1">Popss</a> + <a href="membres/cloch/cloch.html" target="I1">Clochette</a> +
<a href="membres/h²/h².html" target="I1"> H² </a> +
</div>
<div id="droits">
ce site ainsi que son contenu sont protégés par <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/">
Creative Commons Attribution 3.0 License</a><br/>
site designé et coder par stickmaniak sauf "lightbox" - 2007 tous droits réservé
</div>

</div>

</body>


Tu vois, ca marche très bien comme cela.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde