duel ie et firefox

ephemerie · 21 Juin 2006

bonjours

tout mon code sous ie fonctionne à la perfection mais sous firefox c'est la catastrophe

je vous transmet mon code css


	/********************************************************************************
********
	                             défini le corps des pages
	********************************************************************************
*****/

	body {/*caractérise le corps entier de mon document*/
	/*background:url(fond.jpg);/*donne le chemin de l'image*/
	background-repeat : no-repeat ;/*le fond ne se répéte pas*/
	background-position :center;/*position du fond*/
	padding-top : 50px;/*décale le menu par rapport au haut de page*/
	background-attachment:fixed;/* limage reste figée */
}


.bodyReunion {/* ici on spécifie le fond d'écran pour la page que l'on veut*/
background:url();/*donne le chemin de l'image*/
}



/********************************************************************************
**
défini la taille de ma page en général
********************************************************************************
***/

#principal{
/*border:#000000 1px solid; encadre la page de travail*/
width:800px;/*donne la largeur de ma page*/
height:600px;
}

.entete{/*entete de la page reunion*/
position:absolute;/*depend pas des autres elements ce mete à la suite des autres et peut être décalé à l'aide de right left bottom top..*/
font-family: "Lucida Calligraphy", "Lucida Sans", "Lucida Handwriting", "Lucida Console", "Lucida Fax";/*famille de la police*/	
padding-left:300px;/*marge à gauche*/
font-size:50px;/*taille de la police*/
color:#3366CC;/*#AFEEEE;/*couleur du texte titre*/
margin-left:70px;
top:25px;
}

.pieddepage{
position:absolute;
top:300px;
}

.textedepresentationcompetences{
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;	
padding-left:px;
padding-top:120px;
font-size:14px;
color:#3366CC;
border-bottom:3px solid #3366CC;/*couleur et épaisseur de la ligne de dessous*/
width:130px;
}

.textedepresentationpresence{
position:relative;
width:125px;/*taille de la barre rouge dessous*/
font-family:Verdana, Arial, Helvetica, sans-serif;	
padding-left:px;
padding-top:500px;;
font-size:14px;
color:#3366CC;
border-bottom:3px solid #3366CC;/*couleur et épaisseur de la ligne de dessous*/
}
/********************************************************************************
***
                                 texte pour les pages annexes  les îles
								 pour les grands titres
********************************************************************************
******/
.textedepresentationile{/*s'occupe du titre présentation del'île*/
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;	
padding-left:px;/*pousse la barre à droite avec le texte*/
padding-top:135px;
font-size:14px;
color:#3366CC;/*lightskyblue;/* couleur de l'écriture du titre*/
border-bottom:3px solid #3366CC;/*couleur et épaisseur de la ligne de dessous*/
width:150px;/*taille de la barre dessous*/
margin-left:px;/* le décale par rapport à la gauche*/
}	

.textepage{/* le texte sur toute la page*/
position:relative;
margin-top:180px;/*met le texte par rapport au haut de page*/
color:black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:justify;
}

.Structure{/*s'occupe du titre structure reunion*/
position:relative;
color:#3366CC;/* couleur du titre structure réunion*/
font-size:15px;/*taille du titre*/
padding-top:30px;/*distance avec le texte précedent*/
margin-left:px;
width:245px;/*taille de la barre bleu dessous*/
padding-left:px;/*pousse la barre à droite avec le texte*/
border-bottom:#3366CC 3px solid;
}

/********************************************************************************
****
                                  caractérise le menu
********************************************************************************
*****/
#menu{
	position:absolute;
	width:100%;/*taille*/
	float:left;
	margin-left:0px;
	margin-top:80px;
	background-color: #990000;
   }

.menuBoutton{
float:left;/* donne la direction du menu par la gauche*/
}

.ecrire{
font-variant: small-caps ;/* cette classe gére l'écriture dans les calques"*/
font-size:13px;
}

.boutton{/*id des boutons*/
display:block;/*bloc qui entoure le texte*/
width:105px;/* taille standard pour toute les cellules*/
margin:0px;/* donne l'écart avec la cellule suivante*/
/*text-decoration:underline overline;/* le soulignement se fait en haut et en bas */
line-height:20px;/*grandeur des cellules*/
text-align:center;/*on veut que le texte soit centré*/
cursor: pointer;/*le bouton est représenté par un doigt*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
position:relative;
float:left;/* donne la direction du menu par la gauche*/
border-style:outset;/*style de la bordure*/
border:2px;/*taille des bordures*/
margin-right:0.1em;/*écart entre les boutons*/
border-right: 1px solid #fff;
}



<!--------------------------------------------------------------------------------------- liens boutons-->



a.styleA {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#3366CC;
}

a.styleA:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:aliceblue;
}

a.styleA:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:aliceblue;
}

a.styleA:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#3366CC;
}

a.styleA:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:aliceblue;
}

.bouttonAccueil{/* change la couleur de la police lors du survol par la souris */
background:#990000;/*#006699;/*donne la couleur du fond de la cellule*/
border-color:#990000;
border-right:white;
}

.bouttonAccueilHover{
background-color:#CC0000;
border-color:#CC0000;
border-right:white;
}



/********************************************************************************
********
                          cadre
********************************************************************************
*************/

.cadre {
	position:absolute;/*se positonne en fonction des éléments de même famille*/
	width: 150px;/* la largeur*/
	float:left;/* positionne les éléments pas rapports aux autres donc ici à gauche*/
	background-color: #FFCCFF;/*couleur de fond*/
	margin-top:-20px;/*distance par rapport au haut de page*/
	margin-left:10px;/* distance par rapport à la gauche de la page*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;/*taille de la police*/
	cursor:auto;
	height:150px;
}

.cadre1{
background-color: #CCFFFF;/*couleur de fond*/
margin-top:-300px;/*distance par rapport au haut de page*/
margin-left:px;/* distance par rapport à la gauche de la page*/
}

.cadre1Hover{
background-color: #99FFFF;/*couleur de fond*/
margin-top:-300px;/*distance par rapport au haut de page*/
margin-left:px;/* distance par rapport à la gauche de la page*/


/********************************************************************************
***********************************************
                                                     calque pour mon menu
********************************************************************************
***********************************/
.calque{
display:none;/* pour l'affichage*/
position:absolute;
z-index:1;/* superpose les calques*/
height:151px;/*taille*/
width:107px;/*largeur*/
top:169px;/*position par rapport à en haut*/
left:120px;/*position par rapport à la gauche*/
background-color:#990033;/*#0066CC;/*couleur du fond du sous menu*/
color:white;
}

.calque1{
background-color:#990033;/*#0066CC;*/
}

.calque2{
background-color:#990033;/*#6699ff;*/
left:229px;
height:70px;
}

/********************************************************************************
*****************
                                             Frise bas de page
********************************************************************************
***************/


table{
border-style:ridge; 
border-width:1px; 
border-color:black;
width:800px;/*largeur des cellules*/
}


td{ 
border-style:ridge; 
border-width:1px; 
border-color:blue;
width:1000px;
height:100px;
}

si il est necessaire de vous montrer le code html faite le moi savoir

merci

EDIT TheRec, Modérateur: Merci d'utiliser les BB Codes pour présenter ton code correctement. Si tu as besoin d'aide sur l'utilisation des BB Code tu trouveras un lien "Aide BB Code" sous la liste des émoticons lorsque tu rédige un message. Ton message a été édité dans ce sens, j'ai utilisé une balise CODEBOX car ton code est très long.

loban · 21 Juin 2006

Une description précise de ce qui ne marche pas et un lien vers une page serait préférable !

ephemerie · 21 Juin 2006

dsl mais mon site n'est pas hebergé et ce qui ne va pas et bien

en fait que je passe à firefox, tous mes élèments sont décalés

le menu le texte et les cadres

loban · 21 Juin 2006

A priori, tu utilises un modèle de boîte spécifique à IE et non pas le modèle standard.

La différence est le calcul de largeur et de hauteur, en fonction des marges.

Regardes du coté du DOCTYPE (voir par exemple ce message).

ephemerie · 22 Juin 2006

même en changeant le doctype ca ne marche pas mais je vais essayer de trouver un vérificateur de syntaxe pour corriger mes codes si vous avez des liens je les veux bien

merci

ephemerie · 22 Juin 2006

et bien aprés vérification mon code html et css ne contient pas d'erreurs particuliéres comment puis je faire maintenant?

loban · 22 Juin 2006

même en changeant le doctype ca ne marche pas mais je vais essayer de trouver un vérificateur de syntaxe pour corriger mes codes si vous avez des liens je les veux bien
merci

Cela ne doit rien changer dans FF, mais est-ce que cela modifie quelque chose dans IE ?

Sinon, mets-nous le code HTML que tu utilises.

ephemerie · 22 Juin 2006

non ca ne change absolument rien

voici le code de mes pages anexes ainsi que de ma page index


<!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=iso-8859-1" />
<title>Ile de la Réunion</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<body class="bodyReunion"><!-- fond pour la page réunion-->
<!--<script="JavaScript" src="----.js">-->
<div id="principal">


<!-- -----------------------------------------------------------------------------
                                         ici c'est pour les textes de présentations
-------------------------------------------------------------------------------------->
	<div id="entete" class="entete">
				Ile de la Réunion
	</div>

	<div id="textedepresentationile" class="textedepresentationile">
				Présentation de l'île	</div>

	<div id="PiedPage">
</div>
<!---------------------------------------------------------------------------------------------------------
                                                    Menu et ces calques
-------------------------------------------------------------------------------------------------------------->


	<div id="calque1" class="calque calque1 ecrire" onmouseover="java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentation';
		 document.getElementById('calque1').style.display='block';"
		  onmouseout="java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentation'; document.getElementById('calque1').style.display='none';">	
		<p align="center" style="color:aliceblue"><b>Présentation de lentreprise</b> </p>	
		<p align="center" style="color:aliceblue"><b>Mot du directeur</b></p>
		<p align="center" style="color:aliceblue"><b>Chiffres clés</b> </p>
		<p align="center" style="color:aliceblue"><b>Contacts</b></p>
	</div>


	<div id="calque2" class="calque calque2 ecrire" onmouseover=
		 "document.getElementById('calque2').style.display='block';java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetencesHover'"
		  onmouseout="java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetences'; document.getElementById('calque2').style.display='none';">	
		<p align="center" style="color:aliceblue"><b>	Compétences</b></p>
		<p align="center" style="color:aliceblue"><b>Présences territoriales</b></p>
	</div>



<!------------------------------------------------------------------------------------------
												Menu
--------------------------------------------------------------------------------------------->




  <div id="menu"> 
  <div id="idbouttonAcc" class="boutton bouttonAccueil"onmouseover=
	"java script:document.getElementById('idbouttonAcc').className='boutton bouttonAccueilHover';" onmouseout="java script:document.getElementById('idbouttonAcc').className='boutton bouttonAccueil';">
      <a href="index.htm" class="styleA" > Accueil</a> </div>


    <div id="idbouttonPres" class="boutton bouttonPresentation" onmouseover=
	 "java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentationHover'; document.getElementById('calque1').style.display='block';"
	  onmouseout="java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentation'; document.getElementById('calque1').style.display='none';"> 
      <a href=lien class="styleA"> Présentation </a> </div>

    <div id="idbouttonComp" class="boutton bouttonNosCompetences" onmouseover=
	 "java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetencesHover'; document.getElementById('calque2').style.display='block';"
	  onmouseout="java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetences'; document.getElementById('calque2').style.display='none';"> 
      <a href=lien class="styleA"> Nos Compétences </a> </div>

    <div id="idbouttonServ" class="boutton bouttonNosServices" onmouseover=
	"java script:document.getElementById('idbouttonServ').className='boutton bouttonNosServicesHover';" 
	onmouseout="java script:document.getElementById('idbouttonServ').className='boutton bouttonNosServices';"> 
      <a href="index.htm" class="styleA" > Nos Services </a> </div>

    <div id="idbouttonPart" class="boutton bouttonNosPartenaires" onmouseover=
	"java script:document.getElementById('idbouttonPart').className='boutton bouttonNosPartenairesHover';" 
	onmouseout="java script:document.getElementById('idbouttonPart').className='boutton bouttonNosPartenaires';"> 
      <a href="index.htm" class="styleA" > Nos Partenaires </a> </div>

    <div id="idbouttonActu" class="boutton bouttonActualite" onmouseover=
	"java script:document.getElementById('idbouttonActu').className='boutton bouttonActualiteHover';" 
	onmouseout="java script:document.getElementById('idbouttonActu').className='boutton bouttonActualite';"> 
      <a href="index.htm" class="styleA" > Actualité </a> </div>
  </div>


<!---------------------------------------------------------------------------
                                         texte
-------------------------------------------------------------------------->


<div id="textepage" class="presentationile textepage">


	<br>La préfecture est Saint-Denis.
	<br>La superficie totale de ce territoire est de 2 517 km² mais elle ne cesse de s'agrandir grâce au volcan toujours en activité.
	<br>En 2005, la population comptait 776.948 personnes soit une densité de 309 hab./km².
	<br>La monnaie utilisée est l'euro.
	<br>Fuseau horaire GMT +4</br>





    <div class="Structure">Notre structure à la Réunion</div>
		C'est dans cette île que se situe notre siège social.
		<p>Notre personnel à l'île de la Réunion est composé de:</p>
		<blockquote>  <p>-12 opérateurs chargés d'assistance qui répondent aux téléphones pour porter assistance aux personnes en pannes.</p></blockquote>
		<p>Ces personnes possèdent une double compétence (opérationnel et comptable).</p>
		<blockquote>- 4 médecins</p>
		<p>-1 infirmier</p>
		<p>-4 informaticiens</p>
		<p>-3 cadres</p></blockquote>
		<p>La plateforme d'assistance se fait 24h/24 et 7j/7.</p>
		<p>Nous disposons d'une salle pour les réserves médicales (valise prête pour les rapatriements, bouteilles d'oxygènes aériennes).Le plateau opérationnel se compose de 15 postes de travail. Le personnel assurant le service de nuit, dispose d'une chambre de garde avec poste de travail.</p>
		<p>Nous disposons d'une salle technique hébergeant notre système d'information. Cette dernière sécurisée, réfrigérée, et ondulée se compose de plusieurs armoires et serveurs HP (haute disponibilités) et d'une centrale téléphonique informatisée. Avec ce systeme, nous pouvons retracer les appels.</p>
		Tous le systeme est redondant et permet une haute disponibilité des outils de la société.
		La téléphonie fait partie intégrante de cette architecture.
		<p>Cette organisation est basée sur: <blockquote>-une liaison Internet Haut-Débit sécurisée,</p>
		<p>-une liaison Equant spécialisé pour l'interconnexion des sites distants,</p>
		<p>-une architecture informatique sur du Oracle - JEE avec 
		<p>-du développement interne,</p>
		<p>-une téléphonie en VoIP.</blockquote></p>



		<!----------------------------------------------------------------------------------------------------------
                                                                      tableau
----------------------------------------------------------------------------------------------------------->	


		<table>
			  <tr>
			    <td><center><img src="image réunion/13.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td>
				<td><center><img src="image réunion/carte_reunion1.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td>
				<td><center><img src="image réunion/cirque_cilaos.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td>
				<td><center><img src="image réunion/fish1.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td> 
				<td><center><img src="image réunion/fournaise.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td>
				<td><center><img src="image réunion/REU002-P01.jpg" width="90" height="90" align="absmiddle" background-position="center"/></center></td>
			  </tr>
			</table>


</div>  
</div>
</body>
</head>
</html>

et ici de ma page index



	<!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"><!--la langue du document est précisée ici-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><!-- l'encodage est spécifié ici avec l'attribut charset-->
<title>Page de présentation</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<body>
<!--<script="JavaScript" src="----.js">-->
<div id="principal">
<!-------------------------------------------------------------------------------------------------------------
                              ici c'est pour les textes de présentations
------------------------------------------------------------------------------------------------------->
	<div id="entete" class="entete">
				<p><img src="fond.jpg" style="height:120px; position:absolute; width:230px; left:-80px; top:px"</p>
	</div>

	<div id="textedepresentationcompetences" class="textedepresentationcompetences"/>
				<p>Nos Compétences</p>
	</div>

	<div id="textedepresentationpresence" class="textedepresentationpresence">
				<p>Nos présences</p>
	</div>
<!---------------------------------------------------------------------------------------------------------
                                                    Menu et ces calques
-------------------------------------------------------------------------------------------------------------->
	<div id="calque1" class="calque calque1 ecrire" style="top:102px;" onmouseover="java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentation';
		 document.getElementById('calque1').style.display='block';"
		  onmouseout="java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentation'; document.getElementById('calque1').style.display='none';">	
		<p align="center" style="color:aliceblue"><b>Présentation de lentreprise</b> </p>	
		<p align="center" style="color:aliceblue"><b>Mot du directeur</b></p>
		<p align="center" style="color:aliceblue"><b>Chiffres clés</b> </p>
		<p align="center" style="color:aliceblue"><b>Contacts</b></p>
	</div>


	<div id="calque2" class="calque calque2 ecrire" style="top:102px; "onmouseover=
		 "document.getElementById('calque2').style.display='block';java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetencesHover'"
		  onmouseout="java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetences'; document.getElementById('calque2').style.display='none';">	
		<p align="center" style="color:aliceblue"><b>	Compétences</b></p>
		<p align="center" style="color:aliceblue"><b>Présences territoriales</b></p>
	</div>

<!-- -----------------Menu -------------------------------------------------------------------------------------------- -->

  <div id="menu" style="top:-0px";> 
  <div id="idbouttonAcc" class="boutton bouttonAccueil"onmouseover=
	"java script:document.getElementById('idbouttonAcc').className='boutton bouttonAccueilHover';" onmouseout="java script:document.getElementById('idbouttonAcc').className='boutton bouttonAccueil';">
      <a href="index.htm" class="styleA" > Accueil</a> </div>


    <div id="idbouttonPres" class="boutton bouttonPresentation" onmouseover=
	 "java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentationHover'; document.getElementById('calque1').style.display='block';"
	  onmouseout="java script:document.getElementById('idbouttonPres').className='boutton bouttonPresentation'; document.getElementById('calque1').style.display='none';"> 
      <a href=lien class="styleA"> Présentation </a> </div>

    <div id="idbouttonComp" class="boutton bouttonNosCompetences" onmouseover=
	 "java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetencesHover'; document.getElementById('calque2').style.display='block';"
	  onmouseout="java script:document.getElementById('idbouttonComp').className='boutton bouttonNosCompetences'; document.getElementById('calque2').style.display='none';"> 
      <a href=lien class="styleA"> Nos Compétences </a> </div>

    <div id="idbouttonServ" class="boutton bouttonNosServices" onmouseover=
	"java script:document.getElementById('idbouttonServ').className='boutton bouttonNosServicesHover';" 
	onmouseout="java script:document.getElementById('idbouttonServ').className='boutton bouttonNosServices';"> 
      <a href="index.htm" class="styleA" > Nos Services </a> </div>

    <div id="idbouttonPart" class="boutton bouttonNosPartenaires" onmouseover=
	"java script:document.getElementById('idbouttonPart').className='boutton bouttonNosPartenairesHover';" 
	onmouseout="java script:document.getElementById('idbouttonPart').className='boutton bouttonNosPartenaires';"> 
      <a href="index.htm" class="styleA" > Nos Partenaires </a> </div>

    <div id="idbouttonActu" class="boutton bouttonActualite" onmouseover=
	"java script:document.getElementById('idbouttonActu').className='boutton bouttonActualiteHover';" 
	onmouseout="java script:document.getElementById('idbouttonActu').className='boutton bouttonActualite';"> 
      <a href="index.htm" class="styleA" > Actualité </a> </div>
  </div>

 <!-------------------------------------------------------------------------------------------------------------
                             Création des cadres en bas de page
  --------------------------------------------------------------------------------------------------------->
  <div> 
    <!-- permet de définir le cadre pour mettre les cadres les un sous les autres-->
    <!-- donne la position de ma fenêtre avec bords arrondis-->
    <!-- ici on défini les textes qui sont dans les cadres-->
    <div style="display:none;" id="texte1"> 
      <p align="center">pôle informatique</p>
    </div>
    <div style="display:none;" id="texte11"> 
      <p align="center">pôleinfo</p>
    </div>
    <div style="display:none;" id="texte2"> 
      <p align="center">pôledegestion</p>

    </div>
    <div style="display:none;" id="texte22">
      <!-- display none indique aucun affichage-->
      <p align="center">pôlegestionnews</p>
    </div>
    <div style="display:none;" id="texte3"> 
      <p align="center">pôletel</p>
    </div>
    <div style="display:none;" id="texte33"> 
      <p align="center">telnews</p>
    </div>
    <div style="display:none;" id="texte4"> 
      <p align="center">pôlemedical</p>
    </div>
    <div style="display:none;" id="texte44"> 
      <p align="center">medicalnews</p>
    </div>
    <div style="display:none;" id="texte5"> 
      <p align="center">Réunion</p>
    </div>
    <div style="display:none;" id="texte55"> 
      <p align="center">Réunionnews</p>
    </div>
    <div style="display:none;" id="texte6"> 
      <p align="center">Guyane</p>
    </div>
    <div style="display:none;" id="texte66"> 
      <p align="center">Guyanenews</p>
    </div>
    <div style="display:none;" id="texte7"> 
      <p align="center">Martinique</p>
    </div>
    <div style="display:none;" id="texte77"> 
      <p align="center">Martiniquenews</p>
    </div>
    <div style="display:none;" id="texte8"> 
      <p align="center">Guadeloupe</p>
    </div>
    <div style="display:none;" id="texte88"> 
      <p align="center">Guadeloupenews</p>
    </div>
    <script><!--on appel un script qui va modifier les variables dans les cadres-->


  	function surCadre(element,classe,elementContenu,idtexte)
	{
		document.getElementById(element).className=classe;
		document.getElementById(elementContenu).innerHTML=document.getElementById(idtext
).innerHTML;<!--on appel l'id des div et ca les modifie-->
	}

  </script>
    <div id="cadre1" class="cadre cadre1"  onmouseover="surCadre('cadre1','cadre cadre1Hover','contenu1','texte11');" onmouseout="surCadre('cadre1','cadre cadre1','contenu1','texte1');"> 
      <!--avec classe, on peut définir les un aprés les autres les classes qu'on met dans le cssla suite de classe name doit être la même que celle de classe-->
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <!--ici on va définir dans la feuille de style css les caractéristiques du hautdroit et hautgauche-->
      <div class="contenu" id="contenu1">
        <!--ici on va définir dans la feuille de style css le contenu de la classe contenu il faut un id unique sinon conflits-->
        <p align="center">pôle informatique</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
    <div id="cadre2" class="cadre cadre2" onmouseover="surCadre('cadre2','cadre cadre2Hover','contenu2','texte22');" onmouseout="surCadre('cadre2','cadre cadre2','contenu2','texte2');"> 
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <div class="contenu" id="contenu2"> 
        <p align="center">pôle de gestion</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
    <div id="cadre3" class="cadre cadre3"  onmouseover="surCadre('cadre3','cadre cadre3Hover','contenu3','texte33');" onmouseout="surCadre('cadre3','cadre cadre3','contenu3','texte3');"> 
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <div class="contenu" id="contenu3"> 
        <p align="center">Pôle telephonique</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
    <div id="cadre4" class="cadre cadre4"  onmouseover="surCadre('cadre4','cadre cadre4Hover','contenu4','texte44');" onmouseout="surCadre('cadre4','cadre cadre4','contenu4','texte4');"> 
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <div class="contenu" id="contenu4"> 
        <p align="center">Pôle médical</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
    <div id="cadre5" class="cadre cadre5"  onmouseover="surCadre('cadre5','cadre cadre5Hover','contenu5','texte55');" onmouseout="surCadre('cadre5','cadre cadre5','contenu5','texte5');"> 
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <div class="contenu" id="contenu5"> 
        <p align="center">réunion</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
    <div id="cadre6" class="cadre cadre6"  onmouseover="surCadre('cadre6','cadre cadre6Hover','contenu6','texte66');" onmouseout="surCadre('cadre6','cadre cadre6','contenu6','texte6');"> 
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <div class="contenu" id="contenu5"> 
        <p align="center">Guyane</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
    <div id="cadre7" class="cadre cadre7" onmouseover="surCadre('cadre7','cadre cadre7Hover','contenu7','texte77');" onmouseout="surCadre('cadre7','cadre cadre7','contenu7','texte7');"> 
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <div class="contenu" id="contenu7"> 
        <p align="center">Martinique</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
    <div id="cadre8" class="cadre cadre8"  onmouseover="surCadre('cadre8','cadre cadre8Hover','contenu8','texte88');" onmouseout="surCadre('cadre8','cadre cadre8','contenu8','texte8');"> 
      <div class="hautdroit"></div>
      <div class="hautgauche"></div>
      <div class="contenu" id="contenu8"> 
        <p align="center">Guadeloupe</p>
      </div>
      <div class="basdroit"></div>
      <div class="basgauche"></div>
    </div>
  </div>
  <div class="cadre cadre9" style="position:relative;border:#000000 1px solid;"> 
    <div class="hautdroit"></div>
    <div class="hautgauche"></div>
    <div class="contenu contenuGrandp"> 
      <p>Texte de contenuh</p>
    </div>
    <div class="basdroit"></div>
    <div class="basgauche"></div>
  </div>
</div>
</body>
</head>
</html>

loban · 22 Juin 2006

Désolé, c'est mission impossible pour trouver quelque chose de cette manière.

Je ne vois pas de différences significatives entre IE et FF.

Quelques pistes : remplace tes 'java script' par des 'javascript'

La classe sur le body ne sert pas à grand chose. Dans le css, tu peux utiliser le body directement.

ephemerie · 22 Juin 2006

bien je pense que je n'ai guére d'autres choix mise à part essayer d'avancer à tatons mais merci quand même

MarvinLeRouge · 22 Juin 2006

Salut,

- utilise un mode de rendu strict

- refais tes css sous firefox

- puis fais les corrections sous IE avec une feuille de style corrective

Ce sera BEAUCOUP plus facile

ephemerie · 23 Juin 2006

qu'est ce qu'un mode rendu strict?

et sinon je pense queje vais suivre ton conseil

aller au boulot

ephemerie · 23 Juin 2006

bpn finalement j'ai bien regardé mes pages et sur mes pages annexes seul le menu et le titre un se déplacent par contre sur la page index la c'est le pire mais pas vraiment mes élèments sont beaucoup plus décalés seul le menu reste en place

et en fait j'ai fait 9 cadres dans ma premiére page et ils sont décalés vers le haut

mon entete va aussi vers le haut

donc ne peut on pas seulement corriger cela?

ephemerie · 23 Juin 2006

ok c'est tout bon pour les cadres à force d'essayer et de réfléchir je vais finir a arriver à mes fins

ephemerie · 23 Juin 2006

bon j'ai réussi a tout régler sauf pour ma page index les sous titres et le titre n'apparaissent pas et la je suis un peu démunie sous firefox ils n'apparaissent pas par contre sous IE c'est absolument impécable

Connexion

duel ie et firefox

Sujets conseillés

ephemerie

loban

ephemerie

loban

ephemerie

ephemerie

loban

ephemerie

loban

ephemerie

MarvinLeRouge

ephemerie

ephemerie

ephemerie

ephemerie

Veuillez vous connecter pour commenter

Parcourir

Activité