Bonjour à toutes et à tous,
Voilà mon problème, j'ai testé ma page sur la plupart des navigateur et environnement (Mac et PC), par contre c'est la véritable catastrophe sous IE9, ma page explose littéralement, la mise en page est complètement déstructurée. Je ne comprends pas.
Merci d'avance.
PS ; je suis désolé il y a encore des tableaux dans mon code html, c'est prévu qu'ils disparaissent.
Voilà mon problème, j'ai testé ma page sur la plupart des navigateur et environnement (Mac et PC), par contre c'est la véritable catastrophe sous IE9, ma page explose littéralement, la mise en page est complètement déstructurée. Je ne comprends pas.
Merci d'avance.
PS ; je suis désolé il y a encore des tableaux dans mon code html, c'est prévu qu'ils disparaissent.
#Main_Container {
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#Header {
width: 900px;
}
#Colonne_gauche {
text-align: center;
float: left;
width: 180px;
}
#Colonne_droite {
text-align: center;
width: 160px;
float: left;
}
#Colonne_centrale {
padding: 2px;
float: left;
width: 556px;
text-align: center;
}
#Footer {
clear: both;
width: 900px;
text-align: center;
}
#Logo {
width: 240px;
float: left;
height: 90px;
}
#Menu {
float: right;
width: 655px;
height: 90px;
padding-left: 5px;
}
#Container_Central {
float: left;
width: 900px;
overflow: hidden;
}
.Marge_Image {
margin-top: 4px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
<!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 name="keywords" lang="fr"
content="musique personnes âgées, musique personnes âgées,musique maison de
retraite, musique pour personnes âgées, musique pour maison de retraite,
borne,borne interactive pour personnes âgées, borne mélo, borne
musicale,personne âgée,Mélo,MELO, animation,espace musical autonome,chansons
pour personne agee, musique, personnes ges,bonne
humeur,souvenirs,soulagement,retraite, maison de retraite, tablissement de
retraite,musique,vaste
répertoire,vieillissement,cérébral,chanson,chanter,griatrie,gérontologie,au
tonomie,alzheimer,stimulation,ergonomie,jeux,résident,animateur,personnel
soignant,cadre soignant,activité, échange, rencontre, partage,santé,jeux
musicaux, jeux de mémoire, onze plus, onze +, 11 plus, entreprise onze plus,
entreprise onze +, entreprise 11 plus, onze plus musique, juke, box, juke
box, marc, boudot, marc boudot,chansons d'époque, vieilles chansons, Rossi
Tino,Verchuren Andr,Dassary Andr,Michal Frank,Brassens Georges,Ketty
Rina,Mariano Luis,Alibert,Sardou Michel,Fernandel,Piaf Edith,Compagnons de
la chanson,Pouly Roger,Raynaud Fernand,Plana Georgette,Brel Jacques,Margy
Lina,Baker Josphine,Sylva Berthe,Trenet Charles,Gouin Fred,Frhel,Delyle
Lucienne,Gutary Georges,Montand Yves,Boyer Lucienne,Damia,Gauty Lys,Ventura
Ray,Salvador Henri,Sablon Jean,Vivaldi Antonio,Marjane Lo,Renaud Line,lecteur MP3 personne agee, lecteur MP3 personnes agees">
<meta name="description" content="Animation en maison de retraite, un nouvel outil est né : la borne musicale Mélo ! La borne Mélo, ce sont 2000 musiques des années 20 à 90 que les personnes âgées peuvent programmer en toute autonomie. Mais aussi des jeux et animations musicales que les animateurs proposent aux résidents de leur maison de retraite : loto musicale, loto classique, quizz ‘’deviner la chanson’’, cadre photo d’animation, casino des sons, le carillon… et tous les 6 mois c’est une nouvelle animation qui est installée dans la borne.
La musique est l'activité préférée des personnes âgées déclare l’INSEE. Elle apporte bonne humeur, stimule les souvenirs, réduit l'anxiété, contribue au soulagement de la douleur, elle participe à la qualité de vie d’un établissement de retraite. Alors les chaines Hi Fi mal adaptées et les CD qui se perdent doivent faire place à cette gérontechnologie dédiée aux maisons de retraite et à leur résident : la borne musicale Mélo.">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Borne Mélo, musique et animation pour maison de retraite</title>
<link href="melov2.css" rel="stylesheet" type="text/css">
<script language="javascript">
/* passage en fullscreen */
moveTo(0,0);
resizeTo(screen.availWidth,screen.availHeight);
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5520186-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</head>
<body>
<div id="Main_Container">
<div id="Header">
<div id="Logo"><img src="images/logo_MELO.gif" alt="Logo Mélo" width="240" height="90" border="0" usemap="#MapMap">
<map name="MapMap">
<area shape="circle" coords="58,23,11" href="melo_paroles.html">
</map></div><!-- End LOgo -->
<div id="Menu"><div style="margin-top:8px"></div><ul class="mainmenu">
<li><a href="#" class="current">Accueil</a></li>
<li><a href="etude_contexte.html" target="_self">Étude et contexte</a></li>
<li><a href="borne_melo.html" target="_self">La Borne Mélo</a></li>
<li><a href="onze_plus.html" target="_self">L'entreprise Onze Plus</a></li>
<li><a href="contact.html" target="_self">Contact</a></li>
</ul>
<ul class="mainmenu">
<li><a href="plaquette.html" target="_self">Plaquette en PDF</a></li>
<li><a href="presse.html" target="_self">Presse-Médias</a></li>
<li><a href="borne_temoignages.html" target="_self">Témoignages</a></li>
<li><a href="borne_melo_emotions.html" target="_self">Séquence émotion</a></li>
<li><a href="demonstration_BM.html" target="_self">Jeux</a></li>
</ul>
<div style="float:left; width:560px; text-align:center; margin-top:10px;"><span class="titre_vert_entete">MUSIQUE & JEUX D'ANIMATION pour votre maison de retraite</span> </div></div><!-- End Menu -->
</div>
<div id="Container_Central">
<div id="Colonne_gauche"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="190" height="380" id="FlashID3" title="Borne Mélo Classique - Borne Mélo Clé de Sol">
<param name="movie" value="flip_flop_botne.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="9.0.45.0">
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flip_flop_botne.swf" width="190" height="380">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="9.0.45.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br>
<span class="texte_marron_gras">
<h3><a href="trophees_melo.html"class="texte_marron_gras_link">4 Trophées de l'innovation</a></h3>
</span><a href="trophees_melo.html" title="Articles sur les trophées"><img src="images/trophees.jpg" alt="Trophées innovation" width="180" height="180" border="0"><br>
</a><img src="images/button_arrow_right.gif" alt="" width="4" height="7"><a href="trophees_melo.html" class="texte_marron_gras_link" title="Lire les articles sur les trophées">Lire articles</a><br><br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="110" height="40" id="FlashID4" title="Raymonde sur France Inter">
<param name="movie" value="RaymondeOnAIr.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you dont want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="RaymondeOnAIr.swf" width="110" height="40">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br>
<span class="texte_bleu_normal" style="text-align:center;">Ecoutez Raymonde, <br>
elle vous parle <br>
de la borne Mélo..</span></h3>
</span>
<a href="http://www.oseo.fr/" target="_blank" ><img src="images/Oseo-Anvar-LOGO.gif" alt="Oseo Anvar" width="149" height="40" border="0" class="Marge_Image"></a>
<a href="http://www.bourgogneinnovation.org/" target="_blank"><img src="images/2012-bourgogne_innovation.jpg" width="116" height="140" border="0" class="Marge_Image"></a>
<a href="http://www.lacommunaute.fr/" target="_blank"><img src="images/2012-la-communaute.jpg" width="160" height="87" border="0" class="Marge_Image"></a>
</div><!-- End Gauche -->
<div id="Colonne_centrale"><img src="images/musiqualitedevie.jpg" width="450" height="115" alt="Musiquealité de vie" class="Marge_Image">
<table width="500" border="0">
<tr>
<td width="166" align="center"><img src="images/2012-progr-simple.jpg" alt="" width="130" height="200"></td>
<td width="166" align="center"><img src="images/2012-loto.jpg" alt="" width="130" height="200"></td>
<td width="166" align="center"><img src="images/2012-musique-visee-therapeitique.jpg" alt="" width="130" height="200"></td>
</tr>
<tr>
<td width="166" align="center"> </td>
<td width="166" align="center"> </td>
<td width="166" align="center"> </td>
</tr>
</table>
<br />
<table width="500" border="0">
<tr>
<td width="130" valign="top"><img src="images/2012-papy.jpg" alt="" width="130" height="130" Class="Marge_Image">
<img src="images/2012-programmation.jpg" alt="" width="130" height="130" class="Marge_Image">
<img src="images/2012-fauteil.jpg" alt="" width="130" height="130" class="Marge_Image">
</td>
<td width="370" align="left" valign="top"><span class="titre_marron_entete">Changeons d'époque</span><br>
<br>
<span class="texte_marron_normal justify"><p><strong>Est-il concevable d’arriver en établissement de retraite et de ne pas pouvoir écouter et accéder correctement au répertoire des musiques que l’on aime ?</strong></p></span>
<span class="texte_marron_normal justify"><p><strong>Jusqu’à aujourd’hui</strong> les maisons de retraite n’avaient pas la possibilité d’offrir à leurs résidents un bon accès à la musique car <strong>le matériel hifi n’est pas adapté</strong> : impossible d’appuyer sur les trop petits boutons de la chaîne stéréo, impossible d’ouvrir une boite plastique de CD (faites le test), impossible de conserver un répertoire complet de disques en collectivité (casse, perte, vol)… C’est d’autant plus dommageable que <strong>‘’la musique est l’activité préférée des personnes âgées’’ </strong>(source INSEE).</p></span>
<span class="texte_marron_normal justify"><p><strong>Et aujourd’hui ?</strong> C’est suite à ce constat ‘’anachronique’’ que la borne musicale Mélo est née (lauréat de 4 prix de l'innovation). Quel succès lors de l’installation du premier prototype (900 à 1600 musiques écoutées par mois) ! Quelles anecdotes à raconter (drôles ou émouvantes) à chaque installation d’une nouvelle borne (dans toute la France et en Suisse) ! Quelles rencontres avec de nombreux directeurs, soignants et animateurs en gérontologie qui ‘’attendaient’’ un tel outil.</p></span>
<span class="texte_marron_normal justify"><p>Au-delà de ses miliers de musiques, au-delà de son prix raisonnable, cette borne interactive propose des activités musicales et s’impose comme un bras droit de l’animation : loto musical, quizz chansons, diaporama, carillon, jeux de mémoire, alphabet des sons ..., (avec tous les 6 mois une nouveauté dans le programme). Enfin, grâce à des fonctions spécifiques (bouton une touche, playliste mémoire, chanson repère temps, etc…) <strong>cet outil est aussi une solution non médicamenteuse pour le confort de vie des personnes désorientées (Alzheimer et autres…).</strong> Vous ouvez visionner la conférence de Marc Boudot (créateur du concept). 10 min. qui résument bien cette innovation (<a href="versailles2011.html" class="link_in_text">cliquez ici</a>)</p></span></td>
</tr>
</table>
</div><!-- End Colonne_centrale -->
<div id="Colonne_droite"><a href="actualites_melo.html" title="Actualités"><img src="images/image-actus-haut.gif" alt="Actualités" width="140" height="20" border="0" class="Marge_Image"></a><br /><span class="texte_marron_normal"><img src="images/rmc.jpg" alt="" width="80" height="53" hspace="2" align="left"><strong>La Borne Mélo prix spécial RMC</strong><br></span><br />
<a href="actualites_melo.html#RMC"class="texte_marron_gras_link">Lire la suite...</a>
<a href="actualites_melo.html" title="Actualités"><img src="images/image-actus-bas.gif" alt="Actualités" width="140" height="20" border="0" class="Marge_Image"><br>
</a><span style="width:140;"><a href="demonstration_BM.html" title="Démonstrations..."><img src="images/bouton-demo-coins-arrondis.gif" alt="Démonstrations" width="140" height="40" border="0" class="Marge_Image"></a> <a href="alzheimer_article.html" title="Alzheimer et la bonr"><img src="images/bouton-alzheimer.gif" alt="" width="140" height="40" border="0" class="Marge_Image"></a> <a href="mailto:contact@11plus.fr?subject=Indiquez nom, residence, telephone" title="Recevoir une documentaion et devis"><img src="images/recevoir_dcoumentation_devis.jpg" alt="" width="140" height="40" border="0" class="Marge_Image"></a></span><a href="versailles2011.html"><img src="images/orateur.jpg" alt="" width="160" height="136" vspace="5" border="0" class="Marge_Image"></a><br>
<a href="Melo_Le_Film.html" title="Premier buzz gérontologique"><img src="images/melo_le_film_bouton.gif" alt="Melo le film..." width="160" height="89" border="0" class="Marge_Image"></a>
</div><!-- End Colonne_droite -->
</div>
<div id="Footer"><span style="float:left; width:800px;"><a href="presse.html"class="link_in_text">La presse en parle</a> <img src="images/france3.jpg" width="29" height="50" alt="France 3"> <img src="images/france_inter.jpg" width="50" height="50" alt="France Inter"> <img src="images/france_info.jpg" width="50" height="50" alt="France Info"> <img src="images/M6.jpg" width="50" height="38" alt="M6"> <img src="images/la_vie.jpg" width="50" height="41" alt="La Vie"> <img src="images/notre_temps.jpg" width="50" height="25" alt="Notre Temps"> <img src="images/radio_monte_carlo.jpg" alt="Radio Monte Carlo" width="80" height="42"> <img src="images/Parisien_aujoudhui.jpg" width="98" height="50" alt="Le parisien Aujoud'hui en France"> <img src="images/france_soir.jpg" width="150" height="38" alt="France Soir"><br>
<img src="images/midi_libre.jpg" width="150" height="26" alt="Midi Libre"> <img src="images/nice_matin.jpg" width="150" height="44" alt="Nice Matin"> <img src="images/la_depeche.jpg" width="150" height="41" alt="La Dépêche"> <img src="images/age_village.jpg" width="150" height="33" alt="Age Village"></span></div><!-- End Footer -->
</div>
</body>
</html>