Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Iframes et IE...

passparla

Par passparla
dans Programmation

 Partager

Messages recommandés

passparla Junior Member

passparla

Posté(e)
Posté(e)

bonjour,

 

je suis actuellement en train de construire un site en utilisant la balise <iframe>...

la méthode fonctionne très bien sous mozilla mais le contenu de la page cible ne s'affiche pas sous internet explorer...

 

petite vérification de la compatibilité des iframes avec ie : j'ai fait en vitesse une page index avec une iframe à l'interieure, une page test.htm à insérer dedans et ça fonctionne!

 

alors peut être que si je vous donne le code, une bonne âme pourrait me montrer du doigt la ou les fautes commises!

 

ça donne ça:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- saved from url=(0014)about:internet -->

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Bienvenue sur www.blabla.fr</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">td img {display: block;}body {

margin-top: 20px;

background-color: #333333;

}

</style>

<!--Fireworks CS3 Dreamweaver CS3 target. Created Thu Feb 21 11:33:49 GMT+0100 2008-->

<script type="text/javascript">

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

 

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

 

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<body onload="MM_preloadImages('images/boutons/bouton_acceuil2.png','images/boutons/bouton_contact2.png','images/boutons/bouton_trompe2.png')">

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

<!-- fwtable fwsrc="index.png" fwpage="Page 1" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "412274407" fwnested="0" -->

<tr>

<td><img src="images/spacer.gif" width="194" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="522" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="84" height="1" border="0" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

</tr>

 

<tr>

<td colspan="3"><img name="bandeau" src="images/bandeau.jpg" width="800" height="168" border="0" id="bandeau" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="168" border="0" alt="" /></td>

</tr>

<tr>

<td rowspan="2" background="images/menu_g.jpg"><table width="194" height="329" border="0">

<tr>

<td width="133" height="43"><div align="center"><a href="pages/accueil.htm" target="contenu" onmouseover="MM_swapImage('accueil','','images/boutons/bouton_acceuil2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/boutons/bouton_acceuil1.png" name="accueil" width="126" height="41" border="0" id="accueil" /></a></div></td>

<td width="51"> </td>

</tr>

<tr>

<td height="43"><div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('trompe','','images/boutons/bouton_trompe2.png',1)"><img src="images/boutons/bouton_trompe1.png" name="trompe" width="126" height="41" border="0" id="trompe" /></a></div></td>

<td> </td>

</tr>

<tr>

<td><div align="center"></div></td>

<td> </td>

</tr>

<tr>

<td><div align="center"></div></td>

<td> </td>

</tr>

<tr>

<td><div align="center"></div></td>

<td> </td>

</tr>

<tr>

<td><div align="center"></div></td>

<td> </td>

</tr>

<tr>

<td><div align="center"></div></td>

<td> </td>

</tr>

<tr>

<td><div align="center"><a href="pages/contact.htm" target="contenu" onmouseover="MM_swapImage('contact','','images/boutons/bouton_contact2.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/boutons/bouton_contact1.png" name="contact" width="126" height="41" border="0" id="contact" /></a></div></td>

<td> </td>

</tr>

</table></td>

<td bgcolor="#000000">

<iframe name=contenu align=center marginwidth="0" marginheight="0" frameborder=no src="pages/accueil.htm" style="height:400px; width:500px; overflow: auto">

</iframe>

</td>

<td rowspan="2"><img name="menu_d" src="images/menu_d.jpg" width="84" height="473" border="0" id="menu_d" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="409" border="0" alt="" /></td>

</tr>

<tr>

<td><img name="bas" src="images/bas.jpg" width="522" height="64" border="0" id="bas" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="64" border="0" alt="" /></td>

</tr>

</table>

</body>

</html>

 

merci ! :P

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Bonjour Passparla,

 

Ta page est un exemple significatif de la médiocre qualité du code HTML que produit DreamWeaver. J'ai donc commencé par démonter la mise en page que tu souhaites. Elle se résume au schéma suivant :

 

img-125800i8gqd.jpg

La mise en page à l'aide de tableaux est un détournement dommageable de la fonction première de la balise <table>, réservée aux énumérations. Ton schéma est suffisamment simple pour être traité à l'aide de blocs <div>, avec un bandeau haut au-dessus de 3 colonnes contiguës.

 

Pour clarifier le code, tous les éléments de présentation sont ensuite déportés dans la feuille de style. Globalement, le source fait 111 lignes au lieu de 129 (ce qui peut ne pas paraître significatif), mais devient limpide,

- le contenu est décrit en 23 lignes au lieu de 88,

- la présentation est décrite à part (dans le HEADER), avec 51 lignes au lieu de 5 (et pourrait même être externée, de même que le JavaScript, ce qui amènerait la page HTML à 34 lignes) !

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bienvenue sur www.blabla.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body     {margin-top: 20px;
         background-color: #333333;
         text-align:center;
        }
div      {margin:0;
         padding:0;
        }
img      {border:0;}
iframe   {height:400px;
         width:500px;
         padding:0;
         border:0;
         overflow: auto;
        }
#bandeau {width:800px;
         height:168px;
         background:url(images/bandeau.jpg) no-repeat;
        }
#corps   {width:800px;
         height:473px;
         background-color:red;
        }
#gauche  {width:194px;
         height:473px;
         float:left;
         background:url(images/menu_g.jpg) no-repeat;
        }
#centre  {width:522px;
         height:473px;
         float:left;
         text-align:center;
        }
#droite  {width:84px;
         height:473px;
         float:left;
         background:url(images/menu_d.jpg) no-repeat;
        }
#accueil {margin-top:70px;
         width:126px;
         height:41px;
         border:0;
        }
#trompe  {margin-top:15px;}
         width:126px;
         height:41px;
         border:0;
        }
#contact {margin-top:170px;}
         width:126px;
         height:41px;
         border:0;
        }
</style>
<!--Fireworks CS3 Dreamweaver CS3 target. Created Thu Feb 21 11:33:49 GMT+0100 2008-->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/boutons/bouton_acceuil2.png','images/boutons/bouton_contact2.png','images/boutons/bouton_trompe2.png')">
<div id="bandeau"></div>
<div id="corps">
 <div id="gauche">
   <a href="pages/accueil.htm" target="contenu" onmouseover="MM_swapImage('accueil','','images/boutons/bouton_acceuil2.png',1)" onmouseout="MM_swapImgRestore()">
     <img src="images/boutons/bouton_acceuil1.png" name="accueil" id="accueil" />
   </a>
   <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('trompe','','images/boutons/bouton_trompe2.png',1)">
     <img src="images/boutons/bouton_trompe1.png" name="trompe" id="trompe" />
   </a>
   <a href="pages/contact.htm" target="contenu" onmouseover="MM_swapImage('contact','','images/boutons/bouton_contact2.png',1)" onmouseout="MM_swapImgRestore()">
     <img src="images/boutons/bouton_contact1.png" name="contact" id="contact" />
   </a>
 </div>
 <div id="centre">
   <iframe name="contenu" src="pages/accueil.htm">
   </iframe>
   <img src="images/bas.jpg" alt="" />
 </div>
 <div id="droite"></div>
</div>
</body>
</html>

Cette reformulation va peut-être résoudre ton problème (j'ai en tout cas réussi en insérant une page HTML à moi dans la balise <iframe>). Il y a en effet un pataquès dans les enchevêtrements de tables (et leurs nombres de colonnes) de la mise en forme initiale, qui pourrait provoquer un dysfonctionnement sous certains navigateurs. Dans un cas pareil, j'aurais eu tendance à penser qu'IE fonctionne et que FF bogue... il se trouve que c'est le contraire :P

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Le problème semble avoir trouvé sa solution.

Ainsi, afin de signaler clairement à ceux qui ont un problème similaire qu'ils ont peut-être une solution toute trouvée (s'ils pensent à utiliser la fonction Recherche en indiquant le mot-clé "résolu" auparavant), et afin de signaler aux autres contributeurs qu'il est inutile de continuer à se creuser la tête sur le problème (à moins d'avoir des suppléments d'informations à apporter pour mieux comprendre ce qui posait problème), un modérateur a préfixé le titre du topic avec la mention [résolu].

Merci, à l'avenir, de bien vouloir prendre à votre charge cette mise à jour quand vous estimez que votre problème a été résolu de manière satisfaisante (et parallèlement, si le problème a disparu "mystérieusement", inutile d'induire les gens en erreur :P) Pour cela, p_edit.gif votre premier message :P

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...