Pb affichage site avec include sous firefox

Question

a_marie2000

1 May 2006 à 16:36

Bonjour,

Je tente de créer un site avec la fonctionnalité include de PHP que j'ai découverte sur le tutoriel du site.

Tout semble fonctionner correctement avec le navigateur IE mais une fois ouvert sur firefox, le bloc central .frame se décale à droite.

Voici le code de ma page index.php :


<html>
<head>
<title>LUM - Systèmes d'éclairage mobiles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv='Page-Exit' content='progid:DXImageTransform.Microsoft.GradientWipe(Duration=1)'>
<style type="text/css"><!--body 
{
margin: 0; 
padding:0;
position: absolute;
width: 100%;
height: 100%;
font-family: verdana, arial, sans-serif;}

.haut {
width: auto;
height: 126px;
background-color: #D6D6D6;
font-size: 36px;
padding: 10px;}

.conteneur {
height: 500px;
width: 80%;}

.gauche {
position: absolute;
left: 10px;
width: 20%;
height: 338px;}

.frame {
margin-left: 20%; /* on place ce bloc à droite du bloc menu de 180px de large */
width: 100%;
height: 450px;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
font-size: 14px;
}

.bas {
width: auto;
height: 20px;
background-color: #FFFFFF;
color: #fff;
font-size: 12px;
padding: 10px;}
--></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];}}
}

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_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/top_menu/top_menu_10.gif','images/top_menu/top_menu_12.gif','images/top_menu/top_menu_13.gif','images/top_menu/top_menu_14.gif','images/top_menu/top_menu_11.gif','images/top_menu/top_menu_15.gif')" scroll="no">
<div class="haut"> 
  <table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td width="15%">&nbsp;</td>
      <td width="896" valign="bottom"> <div align="center"><br>
          <img src="images/top_menu/logo-lum.gif" width="187" height="78"><br>
          <br>
        </div></td>
    </tr>
  </table>
  <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
    <tr> 
      <td width="20%"> </td>
      <td width="861"><div align="left"><a href="index.php?page=accueil" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/top_menu/top_menu_10.gif',1)"><img src="images/top_menu/top_menu_02.gif" width="51" height="35" border="0"><img src="images/top_menu/top_menu_03.gif" name="Image8" width="94" height="35" border="0"></a><a href="index.php?page=presentation" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/top_menu/top_menu_11.gif',1)"><img src="images/top_menu/top_menu_04.gif" name="Image7" width="122" height="35" border="0" onClick="MM_swapImage('Image7','','images/top_menu/top_menu_11.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="index.php?page=eclairage" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/top_menu/top_menu_12.gif',1)"><img src="images/top_menu/top_menu_05.gif" name="Image9" width="127" height="35" border="0"></a><a href="index.php?page=gamme_1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/top_menu/top_menu_13.gif',1)"><img src="images/top_menu/top_menu_06.gif" name="Image10" width="124" height="35" border="0"></a><a href="index.php?page=services_1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/top_menu/top_menu_14.gif',1)"><img src="images/top_menu/top_menu_07.gif" name="Image11" width="140" height="35" border="0"></a><a href="index.php?page=contact" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/top_menu/top_menu_15.gif',1)"><img src="images/top_menu/top_menu_08.gif" name="Image12" width="142" height="35" border="0"></a></div></td>
    </tr>
  </table>
</div></div>
<div class="gauche"> 
  <?php 
if (!isset($_GET['page'])) $page= ''; else $page= $_GET['page']; 
 switch($page)
{
case 'entreprise_1':include ('entreprise_menu.html');break;
case 'entreprise_2':include ('entreprise_menu.html');break;
case 'entreprise_3':include ('entreprise_menu.html');break;
case 'eclairage_1':include ('eclairage_menu.html');break;
case 'eclairage_2':include ('eclairage_menu.html');break;
case 'gamme_1': include ('gamme_menu.html');break;
case 'gamme_2': include ('gamme_menu.html');break;
case 'gamme_3': include ('gamme_menu.html');break;
case 'gamme_4': include ('gamme_menu.html');break;
case 'gamme_5': include ('gamme_menu.html');break;
case 'gamme_6': include ('gamme_menu.html');break;
case 'gamme_7': include ('gamme_menu.html');break;
case 'gamme_8': include ('gamme_menu.html');break;
case 'services_1': include ('services_menu.html');break;
case 'services_2': include ('services_menu.html');break;
case 'services_3': include ('services_menu.html');break;
case 'services_4': include ('services_menu.html');break;
case 'services_5': include ('services_menu.html');break;
case 'contact':include ('contact_menu.html');break;
case 'presentation': include ('entreprise_menu.html');break;
case 'eclairage': include ('eclairage_menu.html');break;
} 
?>
</div>
<div class="frame"> 
  <?php 
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
 switch($page)
{ 
case 'entreprise_1':include ('entreprise_1.html');break;
case 'entreprise_2':include ('entreprise_2.html');break;
case 'entreprise_3':include ('entreprise_3.html');break;
case 'eclairage':include ('eclairage_1.html');break;
case 'eclairage_1':include ('eclairage_1.html');break;
case 'eclairage_2':include ('eclairage_2.html');break;
case 'gamme_1': include ('gamme_1.html');break;
case 'gamme_2': include ('gamme_2.html');break;
case 'gamme_3': include ('gamme_3.html');break;
case 'gamme_4': include ('gamme_4.html');break;
case 'gamme_5': include ('gamme_5.html');break;
case 'gamme_6': include ('gamme_6.html');break;
case 'gamme_7': include ('gamme_7.html');break;
case 'gamme_8': include ('gamme_8.html');break;
case 'services_1': include ('services_1.html');break;
case 'services_2': include ('services_2.html');break;
case 'services_3': include ('services_3.html');break;
case 'services_4': include ('services_4.html');break;
case 'services_5': include ('services_5.html');break;
case 'contact':include ('contact.html');break;
case 'accueil': include ('accueil.html');break;
case 'presentation': include ('entreprise_1.html');break;
} 
?>
</div>
<div class="bas"> 
  <div align="center"><font color="#666666" size="1" face="Verdana, Arial, Helvetica, sans-serif">(c) 
    2006 Lum S.A. - SIRET : XXXXXXXXX - APE XXXC</font></div>
</div>
</body>
</body></html>

et l'exemple du code de l'une des pages appelée dans le bloc .frame


<div align="left"> 
  <p>&nbsp;</p>
  <table width="64%" border="0" align="left" cellpadding="0" cellspacing="0">
    <tr> 
      <td width="54">&nbsp;</td>
      <td width="600"> <div align="left"></div>
        <table width="600" border="0" align="left" cellpadding="0" cellspacing="0">
          <tr> 
            <td width="21">&nbsp;</td>
            <td width="109" bgcolor="#FFFFFF"> <div align="center"><img src="images/thumbnails/fluolum/icone_fluolum.jpg" width="106" height="75"></div></td>
            <td width="32">&nbsp;</td>
            <td width="22">&nbsp;</td>
            <td width="100" bgcolor="#FFFFFF"> <div align="center"><img src="images/thumbnails/lampadaires_fluo/Lpd-9958.jpg" width="15" height="75"></div></td>
            <td width="36">&nbsp;</td>
            <td width="22">&nbsp;</td>
            <td width="96" bgcolor="#FFFFFF"> <div align="center"><img src="images/thumbnails/lampadaires_fluo/Lpd%209896.jpg" width="14" height="75"></div></td>
            <td width="32">&nbsp;</td>
            <td width="22"><div align="center"></div></td>
            <td width="108" bgcolor="#FFFFFF"> <div align="center"><img src="images/thumbnails/lampes_fluo/2545.jpg" width="75" height="58"></div></td>
          </tr>
          <tr valign="top"> 
            <td><img src="images/marqueur_fluo.jpg" width="21" height="22"> </td>
            <td width="109"><font size="1" face="Arial, Helvetica, sans-serif">Fluolum</font></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/marqueur_fluo.jpg" width="21" height="22"></font></td>
            <td width="100"><font size="1" face="Arial, Helvetica, sans-serif">Lampadaire 
              fluo</font></td>
            <td width="36"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/marqueur_halo.jpg" width="21" height="22"></font></td>
            <td width="96"><font size="1" face="Arial, Helvetica, sans-serif">Lampadaires 
              halog&egrave;ne</font></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/marqueur_fluo.jpg" width="21" height="22"></font></td>
            <td width="108"><font size="1" face="Arial, Helvetica, sans-serif">Lampes 
              fluo</font></td>
          </tr>
          <tr> 
            <td>&nbsp;</td>
            <td width="109"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="100"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="36"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="96"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="108"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
          </tr>
          <tr> 
            <td>&nbsp;</td>
            <td width="109" bgcolor="#FFFFFF"> <div align="center"><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/thumbnails/lampes_halo/2032.jpg" width="73" height="75"></font></div></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="100" bgcolor="#FFFFFF"> <div align="center"><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/thumbnails/lampes_incan/9514.jpg" width="54" height="75"></font></div></td>
            <td width="36"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="96" bgcolor="#FFFFFF"> <div align="center"><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/thumbnails/lampes_halo/9480.jpg" width="75" height="58"></font></div></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td width="108" bgcolor="#FFFFFF"> <div align="center"><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/thumbnails/portemanteaux/PM%20930.jpg" width="17" height="75"></font></div></td>
          </tr>
          <tr valign="top"> 
            <td height="34"><img src="images/marqueur_halo.jpg" width="21" height="22"></td>
            <td width="109"><font size="1" face="Arial, Helvetica, sans-serif">Lampes 
              halog&egrave;ne</font></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/marqueur_incan.jpg" width="21" height="22"></font></td>
            <td width="100"><font size="1" face="Arial, Helvetica, sans-serif">Lampes 
              incandescentes</font></td>
            <td width="36"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/marqueur_led.jpg" width="21" height="22"></font></td>
            <td width="96"><font size="1" face="Arial, Helvetica, sans-serif">Lampes 
              LED</font></td>
            <td width="32"><font face="Arial, Helvetica, sans-serif">&nbsp;</font></td>
            <td><font size="1" face="Arial, Helvetica, sans-serif"><img src="images/marqueur_pm.jpg" width="21" height="22"></font></td>
            <td width="108"> <p><font size="1" face="Arial, Helvetica, sans-serif">Portemanteaux 
                <br>
                et accessoires</font></p></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <p align="left">&nbsp;</p>
</div>

Si vous avez des idées... merci d'avance !

A_Marie[/i][/i][/i][/i][/i][/i]
Modifié par a_marie2000 (01 May 2006 - 16:37)

blue

1 May 2006 à 18:50

Bonjour et bienvenue,

Aurais-tu un exemple en ligne stp ?

fvsch

1 May 2006 à 19:28

blue a écrit :
Bonjour et bienvenue,

Aurais-tu un exemple en ligne stp ?

Vi parce que là si on doit se recréer une page nous-même à partir de ce que tu as donné, ça risque de prendre un peu de temps pour pas grand chose.

Au fait, nul besoin de donner le code PHP, il ne sert à rien pour la mise en page. Ce qui compte, c'est le HTML produit et le CSS utilisé.

Ensuite, il faudrait que je voie la page mais il me semble qu'avec un bloc prenant 100% de la largeur et ayant une marge à gauche de 20%, on se retrouve avec une largeur de 120%, ce qui va faire un scroll horizontal, forcément. Si tu supprimes le width 100%, ça devrait marcher correctement (un bloc prenant toute la largeur disponible par défaut…).

Seulement voilà, ce que je te dis là n'est valable que pour une structure de page respectant un minimum les standards, et n'utilisant pas de tableau de mise en forme. J'ai bien peur que ça ne soit pas valable dans ton cas. Et malheureusement, comme les tableaux de mise en page étaient déjà obsolètes quand je me suis mis au web, je n'ai jamais appris à les utiliser correctement. Enfin, quelqu'un d'autre pourra peut-être t'aider.

a_marie2000

2 May 2006 à 16:00

oui en fait tout est là :
http://www.mediacorporate.com/lum/index.php

Merci d'avance Smiley smile

fvsch

2 May 2006 à 20:43

Hello

J'allais te proposer de corriger deux ou trois erreurs de ton code CSS, mais vu le HTML derrière, je crois que ça va être ça la priorité.
En fait, le mieux à faire serait de valider le code (ou du moins d'utiliser un validateur pour repérer les plus grosses erreurs). Par exemple, à l'heure actuelle, tu as deux balises body dans ta page, ce qui n'est pas d'une très grande logique…

Sujet clos