5568 sujets

Sémantique web et HTML

Affichage aléatoire

bonjour et merci pour votre aide permanente

d'abord le site
http://hoteldumenabe.free.fr
j'ai réussi à progresser sur mon site mais je suis un peu coincé. Lorsque je fais Ctrl + ou -, le site grandi ou rétréci mais pas tout (les photos ou le gif animé par exemple)
ce qui provoque un problème d'affichage chez certains. Je sais que la balise <td width="100%">&nbsp;</td> est responsable de ça mais je ne sais pas comment faire
voici le code
Merci
<!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">
<!-- DW6 -->
<head>
<title>Page d'accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_travel2.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS---------------
var d=new Date();
monthname= new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
//--------------- END LOCALIZEABLE   ---------------
</script>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:1075px;
	top:22px;
	width:67px;
	height:108px;
	z-index:1;
}
#Layer2 {
	position:absolute;
	left:835px;
	top:-72px;
	width:13px;
	height:21px;
	z-index:2;
}
#Layer3 {
	position:absolute;
	left:1156px;
	top:21px;
	width:97px;
	height:104px;
	z-index:3;
}
#Layer4 {
	position:absolute;
	left:86px;
	top:418px;
	width:455px;
	height:105px;
	z-index:4;
}
-->
</style>
</head>
<body bgcolor="#C0DFFD">
<div id="Layer1"><img src="gifanime/helice1.gif" alt="helice" width="83" height="106" /></div>
<div id="Layer2"><img src="arriereplan/avionretouche1.jpg" alt="aviongauche" width="240" height="197" /></div>
<div id="Layer3"><img src="arriereplan/avionretouche.jpg" alt="aviondroit" width="98" height="105" /></div>
<div id="Layer4"><img src="gifanime/lemurien.gif" alt="lemurien" width="550" height="150" /></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#3366CC">
    <td width="382" colspan="3" rowspan="2"><img src="banniere/tsiribihina.jpg" alt="Header image" width="395" height="127" border="0" /></td>
    <td width="378" height="63" colspan="3" id="logo" valign="bottom" align="left" nowrap="nowrap">HOTEL DU MENABE </td>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr bgcolor="#3366CC">
    <td height="64" colspan="3" id="tagline" valign="top" align="center">Belo Sur Tsiribihina</td>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="7" bgcolor="#003366"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
  </tr>
  <tr bgcolor="#CCFF99">
    <td colspan="7" id="dateformat" height="25">&nbsp;&nbsp;
      <script language="JavaScript" type="text/javascript">
      document.write(TODAY);	</script>
    </td>
  </tr>
  <tr>
    <td colspan="7" bgcolor="#003366"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
  </tr>
  <tr>
    <td width="165" valign="top" bgcolor="#E6F3FF"><table border="0" cellspacing="0" cellpadding="0" width="179" id="navigation">
        <tr>
          <td width="171">&nbsp;<br />
            &nbsp;<br /></td>
        </tr>
        <tr>
          <td width="175"><a href="page de texte.html" class="navText">L ' HOTEL </a></td>
        </tr>
        <tr>
          <td width="175"><a href="calendrier.html" class="navText">LES CHAMBRES </a></td>
        </tr>
        <tr>
          <td width="175"><a href="catalogue.html" class="navText">LA RESTAURATION </a></td>
        </tr>
        <tr>
          <td width="175"><a href="page de produit.html" class="navText">LES TSINGY </a></td>
        </tr>
        <tr>
          <td width="175"><a href="javascript:;" class="navText">CONTACT</a></td>
        </tr>
      </table>
      <br />
      &nbsp;<br />
      &nbsp;<br />
      &nbsp;<br />
    </td>
    <td width="50"><img src="mm_spacer.gif" alt="" width="50" height="1" border="0" /></td>
    <td width="305" colspan="2" valign="top"><img src="mm_spacer.gif" alt="" width="305" height="1" border="0" /><br />
      &nbsp;<br />
      &nbsp;<br />
      <table border="0" cellspacing="0" cellpadding="0" width="305">
        <tr>
          <td class="pageName">Bienvenue</td>
        </tr>
        <tr>
          <td class="bodyText"><p>B&acirc;tisse coloniale datant du si&egrave;cle dernier, Denise et Spyros vous accueille de mani&egrave;re tr&egrave;s conviviale. </p>
            <p>Apr&egrave;s une descente de la Tsiribihina en pirogue ou en chaland, apr&egrave;s la visite des Tsingy de Bemahara, une halte s'impose &agrave; l'h&ocirc;tel du Menabe debelo sur Tsiribihina.</p>
            <p>La douche, le lit (enfin le lit!!) et les repas succulents sont pr&eacute;vus apr&egrave;s l'aventure pour redonner des forces avant de continuer le p&eacute;riple malgache. </p>
            <p>&nbsp;</p></td>
        </tr>
      </table>
      <br />
    </td>
    <td width="50"><img src="mm_spacer.gif" alt="" width="50" height="1" border="0" /></td>
    <td width="190" valign="top"><br />
      &nbsp;<br />
      <table border="0" cellspacing="0" cellpadding="0" width="190">
        <tr>
          <td colspan="3" class="subHeader" align="center">NOUVELLES DESTINATIONS</td>
        </tr>
        <tr>
          <td width="40" height="641"><img src="mm_spacer.gif" alt="" width="40" height="1" border="0" /></td>
          <td width="110" id="sidebar" class="smallText"><p><img src="image/belo06a.jpg" alt="Image 1" width="207" height="254" vspace="6" border="0" /><br />
              La ville se reveille <br />
              <a href="javascript:;">agrandir &gt;</a></p>
            <p><img src="image/Hotel 2005.jpg" alt="Image 2" width="335" height="144" vspace="6" border="0" /><br />
              L'h&ocirc;tel<br />
              <a href="javascript:;">agrandir &gt;</a></p>
            <br />
            &nbsp;<br />
            &nbsp;<br />
          </td>
          <td width="40">&nbsp;</td>
        </tr>
      </table></td>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="165">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="167">&nbsp;</td>
    <td width="138">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="190">&nbsp;</td>
    <td width="100%">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Modifié par brunoaimej (29 Apr 2007 - 14:00)
Modérateur
Bonjour brunoaimej,

N'aurais-tu pas oublié quelquechose ? Smiley cligne

Ce qui t'as été demandé dans le sujet ci-dessus est aussi valable dans le cas présent. Merci donc de bien vouloir prendre le temps d'éditer tes messages. Smiley rolleyes

Par ailleurs, à la vue de ton code, il serait bon que tu fasses un petit tour de ce côté. Smiley smile
Modifié par koala64 (29 Apr 2007 - 13:49)
Merci merci

mais avec la meilleure volonté du monde je ne comprends pas tout à ce qui m'a été demandé
je ne suis plus tout jeune

j'essaie cependant de suivre à la lettre vos conseils
Modérateur
Il faut que tu édites ton message. Pour celà, tu as un bouton "éditer" en haut à droite de chaque post.

Une fois dans la fenêtre d'édition, tu dois encadrer ton code par :

[ code]...[ /code] (sans les espaces)
Modérateur
a écrit :
et pour ce post est ce que je respecte ce que l'on me demande?
oui, oui, c'est bon. Smiley cligne

a écrit :
et dois je attendre une reponse?
merci Smiley decu

Disons qu'actuellement, tu fais ta mise en page via un tableau. Généralement, c'est à éviter. Tu trouveras de nombreuses explications ici sur le pourquoi du comment.

Le mieux que tu aurais à faire, c'est (avant que tu ne t'embourbes plus encore dans des codes complexes et pas très propres) de consulter ce tuto par exemple qui t'explique comment faire une mise en page conforme et sémantique.

Je conçois que ce soit un peu décourageant, vu comme ça, mais accroches-toi parce que ça va véritablement te faire progresser.

Le comportement sera tout autre au Ctrl+/-

Pour tes photos, tu peux définir des propriétés CSS height et width en em sur chacune de tes images (équivalentes à la largeur et la hauteur en px de celles-ci)
Modifié par koala64 (29 Apr 2007 - 14:28)
koala64 a écrit :
Pour tes photos, tu peux définir des propriétés CSS height et width en em sur chacune de tes images (équivalentes à la largeur et la hauteur en px de celles-ci)

De préférence, attendre de bien maitriser les CSS avant de se lancer dans ce genre de manipulation relativement aléatoire. Smiley confus

N'oublions pas que plusieurs outils proposent des fonctionnalités de zoom de la page (fonctionnalité différente de l'agrandissement du texte) : Internet Explorer 7, Opera, et peut-être Firefox 3 d'ici quelques mois... Pas la peine de réinventer l'eau chaude en utilisant un procédé par ailleurs plutôt casse-gueule (les dimensions de blocs en EM).
Modifié par Florent V. (29 Apr 2007 - 15:19)
Modérateur
Florent V a écrit :
fonctionnalité différente de l'agrandissement du texte
oui, tu fais bien de le préciser. Smiley cligne

Il est vrai que même lorsque je fais des mises en pages "élastiques", j'ai tendance à laisser les images à leur dimensions d'origine tout en m'arrangeant pour que la mise en page soit cohérente à l'agrandissement des polices.

Cela dit, je trouve ce point plutôt flou (même si j'ai lu le billet de Laurent consacré à ce sujet : là où il dit que width et height dans le xhtml, ce n'est pas mal). J'ai pris l'option de ne pas redimensionner l'image plus par intuition que par réelle conviction.

Concernant IE7, on peut effectivement n'augmenter que les polices tout comme on peut faire un véritable zoom. Dans le premier cas, ça peut se justifier, du point de vue de celui qui développe le site afin de conserver sa mise en page, et dans le second, ça ne pose pas de problème particulier à première vue. Cela dit, tout ce qu'on fait si on agit ainsi, c'est émuler le second cas (et ce n'est peut-être pas ce que souhaitait l'utilisateur -> lui ne voulait peut-être voir que le texte augmenter lorsqu'il a cliqué sur "affichage > taille de texte > plus grande")
Modifié par koala64 (29 Apr 2007 - 15:47)
Sujet clos
Aller à