Version complète: sur le forum Webmaster Hub : probleme de calques
Webmaster Hub > Création et exploitation de Sites Internet > Les fondations d'un site > Le Webdesign
cortex
vendredi 13 janvier 2006 à 13:36
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...

CODE
<!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&eacute;</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&egrave;</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&rsquo;Actions pour le D&eacute;veloppement, est une ONG b&eacute;ninoise cr&eacute;&eacute;e en 1988. Son objectif est le d&eacute;veloppement int&eacute;gr&eacute; de la r&eacute;gion de </p>
<p>Possotom&egrave;. </p>
<p ALIGN="JUSTIFY">Son fondateur et actuel directeur, Fran&ccedil;ois Houessou, B&eacute;ninois originaire de Possotom&egrave;, a v&eacute;cu de nombreuses ann&eacute;es en France avant de monter ce projet. </p>
<p ALIGN="JUSTIFY">Le GAD a mis en place cinq p&ocirc;les du projet, et les g&egrave;re avec succ&egrave;s <strong>depuis 17 ans</strong>. </p>
<p ALIGN="JUSTIFY"><BR>
</p>
<p ALIGN="JUSTIFY">L&rsquo;ONG tient ces r&eacute;ussites de ses deux atouts majeurs&nbsp;:</p>
<UL>
<LI>
<p ALIGN="JUSTIFY"><strong>le s&eacute;rieux dans l&rsquo;ex&eacute;cution et la gestion du projet</strong>&nbsp;: </p>
</UL>
<p ALIGN="JUSTIFY">- Fran&ccedil;ois Houessou, diplom&eacute; d&rsquo;une &eacute;cole d&rsquo;ing&eacute;nieur en France, a travaill&eacute; dans le milieu touristique pendant 10 ans.</p>
<p ALIGN="JUSTIFY"> - Les responsables des diff&eacute;rents p&ocirc;les du projet sont tous des professionnels dans leur domaine.</p>
<UL>
<LI>
<p ALIGN="JUSTIFY"><strong>une v&eacute;ritable connaissance du terrain</strong>&nbsp;:</p>
</UL>
<p ALIGN="JUSTIFY"> - Les membres du GAD sont tous originaires de la r&eacute;gion de Possotom&egrave;.</p>
<p ALIGN="JUSTIFY"> - Aucune d&eacute;cision n&rsquo;est prise sans l&rsquo;accord des chefs locaux. </p>
<p ALIGN="JUSTIFY"> <BR>
</p>
<H2 ALIGN="JUSTIFY">P&eacute;rennit&eacute;</H2>
<p ALIGN="JUSTIFY">Le principe fondamental du projet est de cr&eacute;er des p&ocirc;les lucratifs qui financent des p&ocirc;les non-lucratifs. De cette mani&egrave;re, le projet tend &agrave; &ecirc;tre <strong>autonome</strong>, donc <strong>p&eacute;renne</strong>. </p>
<p ALIGN="JUSTIFY">C&rsquo;est pourquoi notre intervention se situe uniquement au niveau de la construction et l&rsquo;am&eacute;nagement du b&acirc;timent&nbsp;: Le fonctionnement de la structure est ensuite assur&eacute; par les p&ocirc;les rentables du projet. </p>
<H2 ALIGN="JUSTIFY">Plusieurs p&ocirc;les de d&eacute;veloppement</H2>
<p ALIGN="JUSTIFY"><BR>
</p>
<H3 ALIGN="JUSTIFY">H&ocirc;tel &laquo;&nbsp;Village Ah&eacute;m&eacute;&nbsp;&raquo;</H3>
<p ALIGN="JUSTIFY">Ouvert en 1988, class&eacute; trois &eacute;toiles au B&eacute;nin, l&rsquo;h&ocirc;tel emploie 25 salari&eacute;s. Il dispose de 35 chambres climatis&eacute;es, 2 salles de conf&eacute;rence, et 1 restaurant. </p>
<p ALIGN="JUSTIFY"><BR>
</p>
<p ALIGN="JUSTIFY"><strong>R&ocirc;le&nbsp;: </strong>- cr&eacute;e des emplois</p>
<p ALIGN="JUSTIFY"> - permet l&rsquo;&eacute;coulement des produits locaux</p>
<p ALIGN="JUSTIFY"> - g&eacute;n&egrave;re des ressources</p>
<p ALIGN="JUSTIFY"><BR>
</p>
<H3 ALIGN="JUSTIFY">Ferme d&rsquo;&eacute;levage et d&rsquo;agriculture</H3>
<p ALIGN="JUSTIFY">Cr&eacute;&eacute;e en 1994, cette unit&eacute; emploie 25 salari&eacute;s &agrave; temps plein et de nombreux ouvriers agricoles journaliers. </p>
<p ALIGN="JUSTIFY">La ferme poss&egrave;de 6500 poules, 100 porcins, 20 bovins. L&rsquo;unit&eacute; d&rsquo;agriculture se caract&eacute;rise par 200 hectares de champs (soja, ma&iuml;s) et un centre de formation agricole.</p>
<p ALIGN="JUSTIFY"><BR>
</p>
<p ALIGN="JUSTIFY"><strong>R&ocirc;le&nbsp;: </strong>- cr&eacute;e des emplois</p>
<p ALIGN="JUSTIFY"> - g&eacute;n&egrave;re des ressources</p>
<p ALIGN="JUSTIFY"> - permet l&rsquo;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&eacute;v&egrave;re</p>
<LI>
<p ALIGN="JUSTIFY">&eacute;ducation nutritionnelle</p>
<LI>
<p ALIGN="JUSTIFY">projet de cantine scolaire</p>
</UL>
<p ALIGN="JUSTIFY"><BR>
</p>
<H3 ALIGN="JUSTIFY">Actions p&eacute;dagogiques</H3>
<UL>
<LI>
<p ALIGN="JUSTIFY"><strong>l&rsquo;&eacute;cole</strong></p>
</UL>
<UL>
<LI>
<p ALIGN="JUSTIFY">acc&egrave;s &agrave; l&rsquo;&eacute;cole pour tous</p>
</UL>
<p ALIGN="JUSTIFY"><BR>
</p>
<UL>
<LI>
<p ALIGN="JUSTIFY"><strong>les ateliers p&eacute;ri-scolaires</strong></p>
</UL>
<UL>
<LI>
<p ALIGN="JUSTIFY">rencontres avec de jeunes Fran&ccedil;ais</p>
<LI>
<p ALIGN="JUSTIFY">ateliers de dessin, musique, th&eacute;&acirc;tre anim&eacute;s par des Fran&ccedil;ais l&rsquo;&eacute;t&eacute;</p>
</UL>
<p ALIGN="JUSTIFY"><BR>
</p>
<UL>
<LI>
<p ALIGN="JUSTIFY"><strong>projet de biblioth&egrave;que de lecture publique</strong></p>
</UL>
<UL>
<LI>
<p ALIGN="JUSTIFY">incitation &agrave; 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&eacute;ninois</p>
<LI>
<p ALIGN="JUSTIFY">participation &agrave; la f&ecirc;te traditionnelle d&rsquo;Awil&eacute;</p>
</UL>
<p>&nbsp; </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&egrave;" src="logo.jpg"><br>

<img style="width: 155px; height: 129px;" alt="actualit&eacute;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&eacute;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 !
sarc
vendredi 13 janvier 2006 à 21:22
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
vendredi 13 janvier 2006 à 23:33
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...
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.