Je m'explique : je suis étudiant en licence LEA et dans le cadre d'un cours à la con appelé "projet tuteuré", nous devons créer un site internet à une association.
J'ai donc appris vite fait le HTML et le CSS, acquis Dreamweaver, et mon site tient la route quand je le regarde sur mon ordi (y compris en regardant le fichier copié et stocké dans une clé USB), tant avec IE que Firefox et google chrome. En revanche, j'ai transporté le dossier avec une clé USB pour le regarder à la fac et le montrer aux responsables de l'association, et, dans les deux cas et avec trois moteurs de recherche différents (Firefox et IE à la fac, Google Chrome chez eux), une image que j'ai mis sur le coté droit du site (ALIGN=right) vient se superposer sur mon paragraphe du coté gauche, alors que j'ai moi, les deux éléments sont à leur place (j'ai réglé les margin et padding de telle sorte que ça fonctionne sur le mien).
Est-ce que quelqu'un sait quel est le problème et comment je pourrais y remédier ?
Merci d'avance !
PS : voici la capture d'écran de la page d'accueil de mon site telle que je la vois sur mon ordinateur, sur les autres, l'image de droite se décale et se superpose au texte de gauche.
http://img9.imageshack.us/img9/7127/captureecran.png
Voici le code-source de cette page (oui, je sais, il y a des répétitions foireuses pour les classes dans la partie CSS mais ce n'est pas le problème lol) avec en rouge l'emplacement des parties qui concernent l'image tant en CSS qu'en HTML :
J'ai donc appris vite fait le HTML et le CSS, acquis Dreamweaver, et mon site tient la route quand je le regarde sur mon ordi (y compris en regardant le fichier copié et stocké dans une clé USB), tant avec IE que Firefox et google chrome. En revanche, j'ai transporté le dossier avec une clé USB pour le regarder à la fac et le montrer aux responsables de l'association, et, dans les deux cas et avec trois moteurs de recherche différents (Firefox et IE à la fac, Google Chrome chez eux), une image que j'ai mis sur le coté droit du site (ALIGN=right) vient se superposer sur mon paragraphe du coté gauche, alors que j'ai moi, les deux éléments sont à leur place (j'ai réglé les margin et padding de telle sorte que ça fonctionne sur le mien).
Est-ce que quelqu'un sait quel est le problème et comment je pourrais y remédier ?
Merci d'avance !
PS : voici la capture d'écran de la page d'accueil de mon site telle que je la vois sur mon ordinateur, sur les autres, l'image de droite se décale et se superpose au texte de gauche.
http://img9.imageshack.us/img9/7127/captureecran.png
Voici le code-source de cette page (oui, je sais, il y a des répétitions foireuses pour les classes dans la partie CSS mais ce n'est pas le problème lol) avec en rouge l'emplacement des parties qui concernent l'image tant en CSS qu'en HTML :
a écrit :
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ANOULEMO - Association des aphasiques des Alpes-Maritimes</title>
<style type="text/css">
.description {
font-family: "Comic Sans MS", cursive;
}
.description {
color: #000;
padding: 10px;
height: 550px;
width: 520px;
border: groove red 2px;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
}
body {
background-color: #FFF;
margin-left: 200px;
margin-right: 150px;
margin-top: 20px;
}
.onglet {
font-family: "Comic Sans MS", cursive;
color: #F00;
}
.onglet {
font-family: Impact;
font-size: 16px;
color: #FFF;
}
.onglet {
font-size: 12px;
}
.onglet {
font-weight: bold;
}
a:link {
color: #F00;
text-decoration: none;
}
a:visited {
color: #F00;
text-decoration: none;
}
.pix {
margin-top:20px;
margin-left:20px;
margin-right:20px;
}
a:hover {
text-decoration: none;
color: #F60;
}
a:active {
text-decoration: none;
}
.onglet .onglet {
font-family: "Comic Sans MS", cursive;
}
.onglet {
font-family: "Comic Sans MS", cursive;
}
</style>
</head>
<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<form id="form1" name="form1" method="post" action="">
<input ALIGN="CENTER" type="image" name="banniere" id="banniere" src="Images/banniere.jpg" />
</form>
<table width="1001" border="10" cellspacing="10" cellpadding="5">
<tr class="onglet">
<td width="69" nowrap bgcolor="#000000" class="onglet"><a href="apropos.html">A propos</a></td>
<td width="91" nowrap bgcolor="#000000" class="onglet"><a href="nosactions.html">Nos actions</a></td>
<td width="122" nowrap bgcolor="#000000" class="onglet"><a href="adherer.html">Pourquoi adhérer ?</a></td>
<td width="107" nowrap bgcolor="#000000" class="onglet"><a href="revendications.html">Revendications</a></td>
<td width="91" nowrap bgcolor="#000000" class="onglet"><a href="contact.html">Contact</a></td>
<td width="123" nowrap bgcolor="#000000" class="onglet"><a href="telechargements.html">Téléchargements</a></td>
<td width="80" nowrap bgcolor="#000000" class="onglet"><a href="http://www.facebook.com/pages/Anoulemo-Association-des-Aphasiques-des-Alpes-Maritimes-06/160099970776388">Facebook</a></td>
<td width="112" nowrap bgcolor="#000000" class="onglet"><a href="ilsenparlent.html">Ils en parlent</a></td>
</tr>
</table><br />
<a href="telechargements.html"><img class="pix" ALIGN="right" src="Images/kezaco.jpg" width="400" height="400" /></a>[#]
<p ALIGN="LEFT" class="description">Bienvenue sur le site de l'association ANOULEMO ! <BR>
<BR>
Basée dans les Alpes-Maritimes (06), elle a pour but de venir en aide aux aphasiques et à leurs familles, notamment en constituant des groupes d'entraide, ainsi que de faire mieux connaître l'aphasie (un trouble, consécutif à une lésion cérébrale, qui affecte le langage écrit et parlé) au public.<BR>
<BR>
La présidente de l'association est madame Claire Pierre, aphasique à la suite d'un AVC ; elle peut s'appuyer dans son action sur des soutiens énergiques, notamment celui de la dynamique Marie-France Fedelich.<BR>
<BR>
L'association édite un bulletin : "L'écho des mots", mis en page bénévolement par Thierry Delacourt. L'impression et la distribution sont gracieusement pris en charge par Philippe Cotta, de la mutuelle Harmonie Méditerranée.<BR>
<BR>
Elle tient également une permanence par mois dans deux endroits différents : le centre hélio-marin de Vallauris et au centre médical ORSAC de Mont-Fleuri à Grasse.<BR>
<BR>
En outre, elle organise des évènements (par exemple, des pièces de théâtre jouées par des aphasiques au centre des associations), participe à des congrès, interpelle les pouvoirs publics sur la cause des aphasiques, procure à ces derniers différents services, tels que la très pratique "carte d'aphasique".<BR>
<BR>
</p>
</body>
</html>
Ça va être difficile de proposer un correctif simple…
