Smiley smile Bonjour a tous.

J'aimerai vous posez le cas d'une des pages de mon site web, où, apparemment, celle-ci est incompatible avec le navigateur Opéra.
Tous les autres navigateurs affiche cette page correctement (IE, Firefox, et Netscape 7). Son code est en outre validé par le w3c.
Le voici:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<link rel="STYLESHEET" href="ficss/image.css" type="text/css"/>
	
	<title>Rencontre avec des couleurs</title>
    
</head>
<body>
      <div class="marg"></div>
      <div class="conteneur1"> /*conflit*/

   

	<div class="tit"><h1>
        Rencontre avec des couleurs</h1></div>
	
   <div class="tit1"><h2>Submergé</h2></div>
        
	
               <div class="contenc"><p class="indic">
        Ce sont quelques impressions évoquées dans ces images que vous recherchez. Quelques
        commentaires présents dans certaines d'entre_elles expriment des perceptions différentes.<br />
        Laissez vous guider par votre instinct qui ne manquera pas de vous faire glisser
        sur ces images.</p></div>
		
    <div class="prem">
        <ul class="boat">
            <li><a class="boat" href="#relais">Bas de page.</a></li>
        </ul>
    </div>
    <div class="cdrperse">
        <a href="mailto:lactanova@aliceadsl.fr?subject=Perseïde">
            <img class="perse" src="images/perseide ins.jpg" alt="contactez-moi" />
        </a>
    </div>	

<div class="contend">
  <table id="gentbl2">/*conflit*/
  <colgroup>
  <col width="3*" />
  <col width="2*" />
  </colgroup>
  
    <tr><td id="formt1">/*conflit*/

     <div id="cadrePrincipal" class="divbet">
 <table>
   <tr>
    <td>	
 <table>
	<colgroup>
	<col width="3*" />
	<col width="2*" />
	</colgroup>
	<tr><td>
	 <div class="divcet">
            <img class="imabet" src="images/dune inv.jpg" alt="Dune"/></div></td>
      
	 <td><div class="divdelt">
           Enfin, après une laborieuse course sur une venelle entourée de parois croulantes,
            je récupérais mes songes auprès de cette lumière, serein, subissant la joie enjôleuse
            de ses couleurs.</div></td></tr>
            
      <tr><td><div class="divom">Mon corps épousait la légère mélodie d'un pastel et de ses formes,
            et je me rendais peu à peu compte que je n'écoutais que le silence, rassuré de cette ambiance sollicitant
            l'enthousiasme de mes rêves qui évoluaient maintenant libérés de mes inhibitions,
            dans cet espace confortable, infini....</div></td></tr>
	</table></td></tr>
	
	<tr><td><table>
	<colgroup>
	<col width="3*" />
	<col width="2*" />
	</colgroup>
			
	  <tr><td id="relais"><div class="divpi">
            <img class="imacet" src="images/photo10.jpg" alt=" Image chromatique"/></div></td>
        <td><div class="ro">
            Après avoir ébloui ma vue, ces formes fascinaient mes mains, les sensations étant
            largement suffisantes pour que je ne parle plus, toute expression devenant pur plaisir.
      </div></td></tr>
	  </table></td></tr>
	  </table>
        </div></td>   
<td id="formt2"><div class="divpha" id="CadreDroit">
    <ul class="liens">
	<li><a href="bienvenus.htm">Soyez le bienvenu! (continuer) </a></li>
        <li><a href="index.htm">Revenir à la page d'accueil. </a></li>
            <li><a href="menu lueurs.htm">Sommaire du site </a></li>
    </ul>
    <br />
<img class="imapha" src="images/FLYING_SOUTH.jpg bis.jpg" alt="oiseaux dans le ciel"/></div></td></tr>
</table>
  </div>
  
<div class="xh1">
	   <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="35%" width="70%" /></a>
  </p>
  </div>
</div>

</body>
</html>

Cette page est actuellement publié provisoirement à l'addresse suivante:
http://www.lueurs.eu/rencontrer des couleurs.htm.
Pourriez-vous, svp, me rendre service en essayant d'afficher cette page avec vos navigateurs, et notemment avec Opera (les dernières versions de préférence) afin de m'indiquer si celle-ci est compatible avec ce dernier ou si cela vient d'un bug sur mon pc. Si tel n'est pas le cas, peut-être auriez-vous une idée sur l'origine du problème.
Je vous remercie.
Modifié par masque (17 May 2007 - 12:38)
Bonjour,

Je ne sais pas si ton problème vient de là, mais certaines de tes URLs sont incorrectes. Il vaut mieux éviter d'utiliser des espaces dans tes noms de fichiers, ou au moins les échapper avec "%20" :
[b]Avant[/b]
<img class="perse" src="images/perseide ins.jpg" alt="contactez-moi" />
[b]Après[/b]
<img class="perse" src="images/perseide%20ins.jpg" alt="contactez-moi" />

Par ailleurs, une des images a pour source "images/FLYING_SOUTH.jpg bis.jpg". C'est un peu étrange, non ?
En réponse à Mr Julien Royer:
Je te remercie pour ces remarques.
Il est vrai que je n'accorde que peu d'importance à certains noms de fichiers (les fichers images surtout) alors qu'ils peuvent entraîner certains problèmes.
J'en prends bonne note et corrige le problème.
Smiley cligne A charge de revanche.


PS: Mon problème semble provenir d'une autre cause. Mon navigateur Opera n'affiche toujours pas ce code. Mais ces réglages ne peuvent qu'optimiser celui-ci.
Smiley ohwell Après quelques essais, je viens de me rendre compte que mon code html (xhtml pour etre plus précis) est parfaitement accepté par mon navigateur Opera. Le probleme survient lorsque cette ligne de mon code css est lue:

 div.conteneur1    {position:absolute;left:0px;top:2px;width:765px;height:1800px;}


Dois-je adapter mon code css pour une compatibilité avec Opéra,
ou dois-je refaire une autre page web en utilisant une autre solution qu'un conteneur de code (j'utilise le "div.conteneur1" afin d'adapter ma page à une résolution d'écran- en l'occurence,une largeur de 800 pixels)?
Modifié par masque (12 May 2007 - 16:26)
Salut,

ta page a tout simplement réussi à planter Opera (9.1), chez moi. Tu dis que tu effecutes une détection de la résolution de l'écran ? Comment ?

Rien à voir, mais il faut supprimer le prologue xml de ta page :
<?xml version="1.0"?>
D'une part, parce qu'il ne sert à rien, ta page étant servie comme text/html, et d'autre part parce qu'il va faire basculer IE6 en mode Quirks (mode de rendu de compatibilité avec les "vieux" documents HTML).
RE....
Je reviens sur cette question que j'ai résolu avec différents test sur le navigateur Opéra 2.0 (ou supérieur).
Le code qui posait le problème (que vous pouvez voir en haut dans l'intitulé de la question) représentait apparemment un plusieurs conflits lorsqu'il exprimait les paramétrages des conteneurs qui y étaient créés (j'ai indiqué se trouvait ces conflits).
Apparemment Opera présente la caractéristique de ne pouvoir supporter un mélange entre les "div" les "tables" dont on définit la taille grâce aux codes normalisés. Les autres navigateurs ne présentaient aucun problème pour traduire ce code ( les plus connus: IE, Firefox, Netscape). Ce code étant validé par le w3c.
J'ai donc modifié ce code en :

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<link rel="STYLESHEET" href="ficss/image.css" type="text/css"/>
	
	<title>Rencontre avec des couleurs</title>
    
</head>
<body>
      
      <div class="conteneur1">

   

	<div class="tit"><h1>
        Rencontre avec des couleurs</h1></div>
	
   <div class="tit1"><h2>Submergé</h2></div>
        
	
               <div class="contenc"><p class="indic">
        Ce sont quelques impressions évoquées dans ces images que vous recherchez. Quelques
        commentaires présents dans certaines d'entre_elles expriment des perceptions différentes.<br/>
        Laissez vous guider par votre instinct qui ne manquera pas de vous faire glisser
        sur ces images.</p></div>
		
    <div class="prem">
        <ul class="boat">
            <li><a class="boat" href="#relais">Milieu de page.</a></li>
        </ul>
    </div>
    <div class="cdrperse">
        <a href="mailto:lactanova@aliceadsl.fr?subject=Persee">
            <img class="perse" src="images/persee.jpg" alt="contactez-moi"/>
        </a>
    </div>	

<div class="contend" id="relais">

  
 

 <div id="cadrePrincipal" class="divbet">
 <table>
   <tr>
    <td>	
 <table>
	<colgroup>
	<col width="3*"/>
	<col width="2*"/>
	</colgroup>
	<tr><td>
	 <div class="divcet">
            <img class="imabet" src="images/duninv.jpg" alt="Dune"/></div></td>
      
	 <td><div class="divdelt">
           Enfin, après une laborieuse course sur une venelle entourée de parois croulantes,
            je récupérais mes songes auprès de cette lumière, serein, subissant la joie enjôleuse
            de ses couleurs.</div></td></tr>
            
      <tr><td><div class="divom">Mon corps épousait la légère mélodie d'un pastel et de ses formes,
            et je me rendais peu à peu compte que je n'écoutais que le silence, rassuré de cette ambiance sollicitant
            l'enthousiasme de mes rêves qui évoluaient maintenant libérés de mes inhibitions,
            dans cet espace confortable, infini....</div></td></tr>
	</table></td></tr>
	
	<tr><td><table>
	<colgroup>
	<col width="3*"/>
	<col width="2*"/>
	</colgroup>
			
	  <tr><td><div class="divpi">
            <img class="imacet" src="images/croma.jpg" alt="Image chromatique"/></div></td>
        <td><div class="ro">
            Après avoir ébloui ma vue, ces formes fascinaient mes mains, les sensations étant
            largement suffisantes pour que je ne parle plus, toute expression devenant pur plaisir.
      </div></td></tr>
	  </table></td></tr>
	  </table>
        </div>   
<div class="divpha" id="CadreDroit">
    <ul class="liens">
	<li><a href="bienvenus.htm">Soyez le bienvenu! (continuer) </a></li>
        <li><a href="index.htm">Revenir à la page d'accueil. </a></li>
            <li><a href="menu lueurs.htm">Sommaire du site </a></li>
    </ul>
    <br/>
<img class="imapha" src="images/volsud.jpg" alt="oiseaux dans le ciel"/></div>
  </div>
  
<div class="xh1">
	   <p>
    <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="35%" width="70%"/></a>
  </p>
  </div>
</div>

</body>
</html>

Le code css est également transformé en ce qui concerne les conteneurs définis par les "tables" et les "div".


 div.conteneur1 {position:absolute;left:0px;top:2px;width:780px;height:1800px;}/*conteneur principal*/
div.contend   {position:absolute;top:45%;width:99%;height:52%;}

J'ai éliminé le paramétrage des "tables" et favorisé celui des "div".

Ma page s'affiche maintenant correctement sur les quatre navigateurs.
Si vous avez des remarques sur ce théme, elles seront le bienvenu.
Il est étonant de voir de tels bug sur un navigateur qui maintenant est censé avoir les mêmes capacité que les autres standarts, qui eux ont une souplesse de traduction des codes normalisés plus importantes ( c'est du moins la conclusion que je tire de cette expérience.
Smiley biggrin Merci de votre attention.
Je suppose que c'est une faute de frappe de ta part, mais comme c'est la 2ième fois que ça se produit ... On parle bien de la version "desktop" du navigateur Opera, pas d'Opera Mini ?

Parce qu'Opera, le grand, en est à la version 9.2, et pas 2.0 Smiley murf
Smiley smile A l'intention de Mr Thomas D.
C'est bien la version Opéra 9.2. Excusez-moi pour cette confusion.
En ce qui concerne la détection de résolution d'écran, je n'en effectue aucune dans mon code. Il est possible de le faire en javascript, et de faire basculer le navigateur sur une page web adaptée. Mais cela me demandrait beaucoup plus de travail et surtout d'espace. Je n'ai pas trouvé, et n'ai pas encore la compétence de réaliser, un code javascript permettant de sélectionner une page css en fonction d'une résolution d'écran définie. C'est pourtant ce que je voudrais.
Je me contente de créer des pages que j'adapte à une résolution de 800px de large, et seulement lorsque le confort de lecture l'éxige. Dans les autres cas, je crée des pages plus importantes en largeur. Dans tous les cas, le conteneur principal est indispensable, celui qui défini la taille du contenu web.
Ex:
 
<div style="position:absolute; width:800px; height:1200px;etc">bla bla</div> /*adapté a une résolution d'ecran de 800 px de large et plus pour un confort de lecture dés les plus basses résolutions*/

<div style="position: absolute; width: 1024px ( ou différent);height: 1500px; etc;">bla bla</div>/*adapté à la vocation que l'on attribue à la page*/

Je te remercie également pour ton conseil.
Smiley cligne A charge de revanche.
Si tu as des commentaires, ils seront bien accueillis.