Aller au contenu

probleme de calques

cortex

Par cortex
dans Le Webdesign

 Partager

Sujets conseillés

cortex

cortex

Posté
Posté (modifié)

bonjour !

j'utilise dreamweaver 8 et j'ai un probleme récurrent avec les calques sur différents sites web.

en effet, ils se placent de façon totalement "aléatoire": ils ne sont pas du tout au meme endroit sur dreamweaver, internet explorer ou firefox.

je trouvais plus propre l'utilisation de tableau mais je voudrais pouvoir afficher ces calques "on mouse over" uniquement, et ce n'est pas possible avec un tableau.

je vous donne le code source d'une des pages où j'ai ce probleme en espérant que vous pourrez m'aider... 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Enfants de Possotomé</title>


  <style type="text/css">
<!--
.Style1 {
font-size: 36px;
font-weight: bold;
}
.Style2 {
	font-size: xx-large;
	color: #006600;
	font-family: "Times New Roman", Times, serif;
}
body {
	margin-left: 0;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
  </style>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">

  <meta name="GENERATOR" content="OpenOffice.org 1.9.129 (Linux)">

  <meta name="AUTHOR" content="Augustin Longueville">

  <meta name="CREATED" content="20051119;12320000">

  <meta name="CHANGEDBY" content="Augustin Longueville">

  <meta name="CHANGED" content="20051214;18190000">

  <style>
<!--
_AT_page { size: 21cm 29.7cm; margin: 2cm }
H2 { margin-bottom: 0.11cm }
H2.western { font-family: "Perpetua", serif; font-size: 14pt; font-style: italic }
H2.cjk { font-family: "Lucida Sans Unicode"; font-size: 14pt; font-style: italic }
H2.ctl { font-family: "Arial", sans-serif; font-size: 14pt; font-style: italic }
H3 { margin-left: 2.54cm; margin-bottom: 0.11cm; text-align: justify }
H3.western { font-family: "Palatino Linotype", serif; font-size: 12pt }
H3.cjk { font-family: "Lucida Sans Unicode"; font-size: 12pt }
H3.ctl { font-family: "Tahoma"; font-size: 12pt }
P { margin-bottom: 0.21cm }
-->
  </style>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">

  <meta name="GENERATOR" content="OpenOffice.org 1.9.129 (Linux)">

  <meta name="AUTHOR" content="Pauline">

  <meta name="CREATED" content="20051119;12320000">

  <meta name="CHANGEDBY" content="Pauline">

  <meta name="CHANGED" content="20051214;18190000">

  <style>
<!--
_AT_page { size: 21cm 29.7cm; margin: 2cm }
P { margin-bottom: 0.21cm }
-->
  </style>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">

  <meta name="GENERATOR" content="OpenOffice.org 1.9.129 (Linux)">

  <meta name="AUTHOR" content="Pauline">

  <meta name="CREATED" content="20051119;12320000">

  <meta name="CHANGEDBY" content="Pauline">

  <meta name="CHANGED" content="20051214;18190000">

  <style>
<!--
_AT_page { size: 21cm 29.7cm; margin: 2cm }
H3 { margin-left: 2.54cm; margin-bottom: 0.11cm; text-align: justify }
H3.western { font-family: "Palatino Linotype", serif; font-size: 12pt }
H3.cjk { font-family: "Lucida Sans Unicode"; font-size: 12pt }
H3.ctl { font-family: "Tahoma"; font-size: 12pt }
P { margin-bottom: 0.21cm }
-->
  </style>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">

  <meta name="GENERATOR" content="OpenOffice.org 1.9.129 (Linux)">

  <meta name="AUTHOR" content="Pauline">

  <meta name="CREATED" content="20051119;12320000">

  <meta name="CHANGEDBY" content="Pauline">

  <meta name="CHANGED" content="20051214;18190000">

  <style>
<!--
_AT_page { size: 21cm 29.7cm; margin: 2cm }
H3 { margin-left: 2.54cm; margin-bottom: 0.11cm; text-align: justify }
H3.western { font-family: "Palatino Linotype", serif; font-size: 12pt }
H3.cjk { font-family: "Lucida Sans Unicode"; font-size: 12pt }
H3.ctl { font-family: "Tahoma"; font-size: 12pt }
P { margin-bottom: 0.21cm }
#Layer1 {
	position:absolute;
	width:200px;
	height:128px;
	z-index:1;
	left: 850px;
	top: 11px;
}
.Style3 {
	color: #006600;
	font-weight: bold;
}
#Layer2 {
	position:absolute;
	width:160px;
	height:91px;
	z-index:2;
	left: 888px;
	top: 26px;
}
-->
  </style>
</head>


<body>
<blockquote><br>
  <table style="text-align: left; width: 954px; height: 1225px;" border="0" cellspacing="0">

    <tbody>

      <tr>

        <td style="vertical-align: top; width: 1000px; background-color: rgb(255, 255, 255);"><p align="right" class="Style1" style="text-align: center; background-color: rgb(255, 255, 255);"><span class="Style3">Enfants </span><span class="Style2"><strong>de Possotomè</strong></span></p>

          <p align="center" class="Style2"><em>Notre Partenaire local </em>, le GAD </p>
          <div id="Layer2">
            <p><img src="icones/projetic.jpg" alt="notre projet" width="157" height="30"><img src="icones/partenaireic.jpg" alt="notre partenaire local" width="157" height="30"><img src="icones/besoinsic.jpg" alt="besoins" width="157" height="30"></p>
          </div>
          <table style="background-color: rgb(255, 255, 255); width: 787px; height: 500px;" border="0">

          <tbody>

            <tr>

              <td valign="top" style="width: 1000px; vertical-align: top; height: 251px; background-color: rgb(255, 255, 102);"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                <p>
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                </p>
                <p> Le GAD, Groupement  d’Actions pour le Développement, est une ONG béninoise  créée en 1988. Son objectif est le développement  intégré de la région de </p>
                <p>Possotomè. </p>
                <p ALIGN="JUSTIFY">Son fondateur et actuel  directeur, François Houessou, Béninois originaire de  Possotomè, a vécu de nombreuses années en France  avant de monter ce projet. </p>
                <p ALIGN="JUSTIFY">Le GAD a mis en place  cinq pôles du projet, et les gère avec succès <strong>depuis 17 ans</strong>. </p>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <p ALIGN="JUSTIFY">L’ONG tient ces  réussites de ses deux atouts majeurs :</p>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY"><strong>le sérieux  	dans l’exécution et la gestion du projet</strong> : </p>
                  </UL>
                <p ALIGN="JUSTIFY">-  François Houessou, diplomé d’une école  d’ingénieur en France, a travaillé dans       le  milieu touristique pendant 10 ans.</p>
                <p ALIGN="JUSTIFY"> - Les responsables des différents pôles du projet sont  tous des professionnels dans leur domaine.</p>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY"><strong>une véritable  	connaissance du terrain</strong> :</p>
                  </UL>
                <p ALIGN="JUSTIFY"> - Les membres du GAD sont tous originaires de la région de  Possotomè.</p>
                <p ALIGN="JUSTIFY"> - Aucune décision n’est prise sans l’accord des chefs  locaux. </p>
                <p ALIGN="JUSTIFY"> <BR>
                </p>
                <H2 ALIGN="JUSTIFY">Pérennité</H2>
                <p ALIGN="JUSTIFY">Le  principe fondamental du projet est de créer des pôles  lucratifs qui financent des pôles non-lucratifs. De cette  manière, le projet tend à être <strong>autonome</strong>,  donc <strong>pérenne</strong>. </p>
                <p ALIGN="JUSTIFY">C’est  pourquoi notre intervention se situe uniquement au niveau de la  construction et l’aménagement du bâtiment : Le  fonctionnement de la structure est ensuite assuré par les  pôles rentables du projet. </p>
                <H2 ALIGN="JUSTIFY">Plusieurs  pôles de développement</H2>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <H3 ALIGN="JUSTIFY">Hôtel « Village  Ahémé »</H3>
                <p ALIGN="JUSTIFY">Ouvert en 1988, classé  trois étoiles au Bénin, l’hôtel emploie 25  salariés. Il dispose de 35 chambres climatisées, 2  salles de conférence, et 1 restaurant. </p>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <p ALIGN="JUSTIFY"><strong>Rôle : </strong>-    crée des emplois</p>
                <p ALIGN="JUSTIFY"> -    permet l’écoulement des produits locaux</p>
                <p ALIGN="JUSTIFY"> -    génère des ressources</p>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <H3 ALIGN="JUSTIFY">Ferme d’élevage et  d’agriculture</H3>
                <p ALIGN="JUSTIFY">Créée en  1994, cette unité emploie 25 salariés à temps  plein et de nombreux ouvriers agricoles journaliers. </p>
                <p ALIGN="JUSTIFY">La ferme possède  6500 poules, 100 porcins, 20 bovins. L’unité d’agriculture  se caractérise par 200 hectares de champs (soja, maïs) et  un centre de formation agricole.</p>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <p ALIGN="JUSTIFY"><strong>Rôle : </strong>-     crée des emplois</p>
                <p ALIGN="JUSTIFY"> -    génère des ressources</p>
                <p ALIGN="JUSTIFY"> -    permet l’autosuffisance alimentaire du village</p>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <H3 ALIGN="JUSTIFY">Centre de nutrition</H3>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY">prise en charge des  	enfants souffrant de malnutrition sévère</p>
                  <LI>
                    <p ALIGN="JUSTIFY">éducation  	nutritionnelle</p>
                  <LI>
                    <p ALIGN="JUSTIFY">projet de cantine  	scolaire</p>
                  </UL>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <H3 ALIGN="JUSTIFY">Actions pédagogiques</H3>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY"><strong>l’école</strong></p>
                  </UL>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY">accès à  	l’école pour tous</p>
                  </UL>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY"><strong>les ateliers  	péri-scolaires</strong></p>
                  </UL>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY">rencontres avec de  	jeunes Français</p>
                  <LI>
                    <p ALIGN="JUSTIFY">ateliers de dessin,  	musique, théâtre animés par des Français  	l’été</p>
                  </UL>
                <p ALIGN="JUSTIFY"><BR>
                </p>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY"><strong>projet de  	bibliothèque de lecture publique</strong></p>
                  </UL>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY">incitation à  	la lecture pour les jeunes</p>
                  <LI>
                    <p ALIGN="JUSTIFY">documentation pour  	tous</p>
                  </UL>
                <H3 ALIGN="JUSTIFY">Actions culturelles</H3>
                <UL>
                  <LI>
                    <p ALIGN="JUSTIFY">recueil et  	traduction de contes béninois</p>
                  <LI>
                    <p ALIGN="JUSTIFY">participation à  	la fête traditionnelle d’Awilé</p>
                  </UL>
                <p>  </p>
                <br>

              <div style="text-align: center;"></div></td>
            </tr>
          </tbody>
        </table>        </td>

        <td valign="top" width="137"><img style="width: 153px; height: 158px;" alt="Possotomè" src="logo.jpg"><br>

        <img style="width: 155px; height: 129px;" alt="actualités" src="actu.jpg"><br>

        <img style="width: 157px; height: 145px;" alt="qui sommes-nous?" src="quisommesnous.jpg"><br>

        <img style="width: 157px; height: 132px;" alt="en savoir plus" src="mais.jpg"><br>

        <img style="width: 155px; height: 92px;" alt="nos partenaires" src="barque.jpg"><br>

        <br>

        <img style="width: 155px; height: 116px;" alt="galerie photo et vidéo" src="imagesetvideos.jpg"><br>

        <img style="width: 155px; height: 116px;" alt="nous contacter" src="contact.JPG"><br>        </td>
      </tr>
    </tbody>
  </table>

  <br>
</blockquote>
</body>
</html>

un grand merci à celui qui me sortira de ce petrin !

Modifié par Monique
Sarc

Sarc

Posté
Posté

Bonjour,

Merci d'utiliser CODEBOX à la place de CODE pour les gros gros codes.. Ce sera plus facile pour nous de lire !

Pour ton code, je crois qu'il y a énormément de choses à refaire, comme quoi il ne faut jamais faire confiance à un créateur de sites, il t'écrit n'importe quoi, c'est pas étonnant que tu te retrouves avec un affichage aléatoire !

Un exemple flagrant : tes META récrites 4 fois au moins...

Utilisation de paragraphes pour rien, style mélangé avec attributs html, bref le gros bazar, impossible de faire quelque chose de propre comme ça !

Un conseil : apprends à coder à la main, tu gagneras du temps..

Remi

Remi

Posté
Posté

Et je crois que son problème principal vient de la présence de DIV à l'intérieur de tableaux.

Faut éviter les DIV à l'intérieur de tableaux...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...