18041 sujets

Questions générales et questions de débutants

Déformation selon écran ?

Bonjour
J'ai découvert l'existence de http://browsershots.org/ et j'ai testé mon petit site.
Perso, je travaille sur mon bon vieil écran de 21" et l'affichage est nickel sous les navigateurs habituels. Mais les copies d'écran faites grâce à browsershots me montrent une image déformée, étirée en largeur.

- Question : les utilisateurs d'écrans larges voient-ils tous mon site en "panavision" ou est-ce juste un défaut de présentation des icônes de browsershots ?

- Dans l'hypothèse ou mon site serait effectivement déformé sur les nouveaux écrans, y a t-il moyen de bidouiller le code pour pallier le pb sans mettre la pagaille sur les écrans classiques ?
Voici le code de l'index :

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 
<title>Coxxxxxxx</title>
 
<style type="text/css"> 
 
<!-- 
 
body {background-color: #B30037; 
 
    background-repeat: no-repeat;} 
 
#container { 
    margin-top: 50px; 
} 
a:link {	text-decoration: none;}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #000000;
}
.REPRO {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #770000;
	letter-spacing: 3px;
	font-weight: bold;
	font-style: normal;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
a {
	font-family: Courier New, Courier, monospace;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
}
body,td,th {
	color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div align="center">
  <table width="900" height="630" border="0" cellpadding="0" cellspacing="0" background="IMxxxxxxxxxil.jpg">
    <tr>
      <td height="435" colspan="2" align="right" valign="bottom" class="graphcrea">&nbsp;</td>
      <td width="187" align="center" valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td width="189" height="195" align="left" valign="top">&nbsp;</td>
      <td width="524" align="center" valign="top" class="Style1"><div align="center">
        <p><span class="Style1"><a href="Edition.html" target="_self"><br />
  &eacute;dition</a> . <a href="PresseAffiche.html" target="_self">annonce-presse, affiche</a> . <a href="Packaging.html" target="_self">packaging, PLV, jaquette</a><br />
          <a href="Logo.html" target="_self">logo</a> . <a href="Illustration.html" target="_self">illustration</a> . <a href="Retouche.html" target="_self">retouche photo, montage </a>. <a href="Contact.html">contact</a></span><br />
          <br />
          <br />
          <br />
          <br />
          <br />
          <span class="REPRO">REPRODUCTION INTERDITE DE TOUT OU PARTIE DE CE SITE</span> <br />
        </p>
        </div></td>
      <td height="195" valign="top">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>
Bonjour,

Pour tester, tu dois pouvoir étirer la fenêtre de tes navigateurs au delà de la largeur de l'écran. J'y arrive sans souci sur Linux (Gnome) ou OS X, de mémoire c'est faisable aussi sous Windows.

Quelques remarques sur ton code:
- Il te manque un Doctype au début du code HTML. Il faut toujours, toujours, toujours utiliser un Doctype en bonne et due forme (et valider son code HTML, ça va de soi).
- La mise en page en tableaux, les attributs de mise en forme dans le code HTML, c'est plutôt has been en 2010. Smiley cligne
Merci pour ta réponse.
- Pour le torture test "étirage d'écran", c'est OK.

- Je suis sûre que tu as raison pour ce qui est des tableaux, mais je ne sais pas faire mieux ! Et manque total de temps pour y remédier... Et pas de sous pour Flash. D'ailleurs, si quelqu'un connait des logiciels gratuits valables sous Mac OsX, ça m'intéresse.
Modifié par Skaramouche (12 Dec 2010 - 20:43)
ça en haut de page, ça irait ? :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


(j'ai créé un nouveau doc sur Dreamweaver et j'ai recopié le haut...
Bonjour Skaramouche.
Le DOCTYPE que tu proposes est le bon (XHTML 1.0 transitionnal).

Concernant la déformation des captures sur browsershots, c'est le site qui les étire (on le voit à l'interface du navigateur). Leurs miniatures sont corrects mais les aperçus en plus grand sont affichés étirés sur leur page (l'image, elle, ne l'est pas).

Ce que voulais dire Florent par c'est plutôt has been en 2010 c'est qu'aujourd'hui il est recommandé de faire des sites web en XHTML mis en page et stylisé par du CSS (éviter les tableaux, trop souvent figés). Il ne te recommandait pas d'utiliser Flash. Smiley cligne
Sujet clos
Aller à