Positionnement qui fonctionne sur une page et pas sur l'autre

Question

michel71

30 Jun 2015 à 15:31

Bonjour,

J'ai créé un style ccs comme ci-dessous


/* CSS Document */
@font-face
{
	
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*===========================================================================*/
@charset=utf-8;

body
{
	margin:auto;
	top:3px;
	background:#DCD8D6;
	width: 960px;
}
h1
{
font-size:1.8em;
}
h2
{
font-size:1.3em;
}
h3
{
font-size:1.1em;
}
h4
{
font-size:0.9em;
}

#header, #menu, #droite, #gauche, #centre, #footer
{
	background:#F9FCBE;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
}
/* ----- Entête  ----------*/
#header
{
	top:2px;
	height:180px;
	width: 960px;
		
}

#header .image_haut
{
	position:relative;
	top:15px; 
	left:30px;
}
/*
#header .titre
{
	font-family:Dayrom,"Trebuchet MS", Arial, Helvetica, sans-serif;
	position:absolute;
	font-size:3em;
	top:50px;
	left:60px;
	color:#FF9933;
 
 
}
#header .sous_titre
{
	font-family:Dayrom,"Trebuchet MS", Arial, Helvetica, sans-serif;
	position:absolute;
	font-size:2em;
	top:100px;
	left:400px;
	color:#FF9933;
 
 
}
*/
/* ----- corps de la page  -----*/
#droite 
{
	position:absolute;
	top:224px;
	height:750px;
	width: 180px;
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;

}
#centre
{
	position:absolute;
	top:224px;
	margin-left:185px;
	height:740px;
	width: 580px;
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;

}
#centre, p
{
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1.1em;
	text-align:justify;
	padding: 5px;

}
#gauche {
	position:absolute;
	top:224px;
	margin-left:780px;	
	height:750px;
	width: 180px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;

}
#gauche, p
{
	font-family:BallparkWeiner,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.8em;
}
/* ~~ Styles de pied de page ~~ */

#footer 
{
	position:absolute;
	margin-left:3px;	
	top:980px;
	height:120px;
	width: 960px;
}

#footer .box_1 div
{
	display: inline-block;
	margin-left:7px;
}

#footer .box_2 div
{
	display: inline-block;
	margin-left:50px;
}
#footer .box_3 div
{
	display: inline-block;
	margin-left:50px;
}

et sur cette page le positionnement des "box_1", "box_2" ... ne se fait (elles sont alignées en verticale)
alors que sur mes autres pages elles sont bien positionnées



<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="google-site-verification" content="pJ2uw5YqZe638MDAnnwCfTNj9QNZxQtdLDRBumqDXbU" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
        <title> Présentation du timbre représentant : Cérès</title>
		<meta name="description" content="Timbre N° 003, de couleur noir sur jaune, émis en 1849 et représentant Cérès">
		<META NAME="robots" CONTENT="all">
		<META NAME="REVISIT-AFTER" CONTENT="3 days">
             <!--[if lte IE 7]>
       			 <link rel="stylesheet" href="css/style_ie.css" />
       		 <![endif]-->
             <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
             
             <!--[if lt IE 7]>
        <script type="text/javascript">
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
            sfHover = function() {
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                        this.className += " sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
        <style type="text/css">
            #monmenu li {width: 144px;}
        </style>
     <![endif]-->
             
    	<link rel="stylesheet" href="../css/style_page.css" media="all" type="text/css"/>
    	<link rel="stylesheet" href="../css/style_menu_3.css" media="all" type="text/css"/>
        <link rel="stylesheet" href="../css/style_ie.css" media="all" type="text/css"/>     
        
        
</head>
<body>
<!-- ====================================== header ===================-->
 	 <header id="header">
		<div class="image_haut" ><img src="../images_site/fond_entete_2.jpg" alt="Timbres français">
        </div>

	 </header><!-- fin de id header -->
<!-- =========================================================-->
<div id="mbmcpebul_wrapper" style="max-width: 960px;">
  <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
  <li class="first_button"><div class="buttonbg gradient_button gradient40" style="width: 96px;"><div class="arrow"><a class="button_1">G&eacute;n&eacute;ral</a></div></div>
    <ul class="gradient_menu gradient87">
    <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/index.php">Accueil</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/contact.php">Contact</a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/dispo_manco/echange.php">Echanges</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 115px;"><div class="arrow_1"><a class="button_2">Collections</a></div></div>
    <ul class="gradient_menu gradient145">
    <li class="gradient_menuitem gradient29 first_item"><a class="with_arrow" title="">France</a>
      <ul class="gradient_menu gradient377">
      <li class="gradient_menuitem gradient29 first_item"><a class="with_arrow" title="">Classique et courant</a>
        <ul class="gradient_menu gradient58">
        <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/collection/france/classique/annee_1849.php">Par année</a></li>
        <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/collection/france/classique/classique_1_a_7.php">Par numéro</a></li>
        </ul></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/aerien/aerien_1_a_15.php">Aérien</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/bloc_souvenir/bloc_souv_1_a_5.php">Blocs</a></li>
      <li class="gradient_menuitem gradient29"><a class="with_arrow" title="">Autoadh&eacute;sif</a>
        <ul class="gradient_menu gradient58">
        <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/collection/france/adhesif/annee_1990_1996.php">Par année</a></li>
        <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/collection/france/adhesif/adhesif_1_a_33.php">Par numéro</a></li>
        </ul></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/colis/colis_page_1.php">Colis (timbres pour)</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/LVF/page_1.php">LVF (Légion des volontaires français)</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/greve/greve_page_1.php">Gréve (vignettes)</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/guerre/page_1.php">Guerre 14-18</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/service/service_1_a_52.php">Service (timbres de)</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/souvenir/souv_1_a_10.php">Souvenirs</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/taxe/ta_1_a_50.php">Taxe</a></li>
      <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/france/ballons/ballon-1.php">Ballons montés</a></li>
      <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/collection/france/franchise/franchise_1.php">Franchise militaire</a></li>
      </ul></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/andorre/andorre_presentation.php">Andore français</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/monaco/monaco_presentation.php">Monaco</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/st_pierre/sp_presentation.php">St Pierre et Miquelon</a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/collection/wallis/wallis_presentation.php">Wallis et Futuna</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 120px;"><div class="arrow_2"><a class="button_3">Ex Colonies</a></div></div>
    <ul class="gradient_menu gradient232">
    <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/collection/issas/issas_1.php">Afars et Issas </a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/algerie/algerie_presentation.php">Algérie </a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/benin/benin_presentation.php">Bénin </a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/cote_ivoire/cote_ivoire_presentation.php">Cote d'Ivoire </a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/djbouti/djbouti_1.php">Djibouti </a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/maroc/maroc_1.php">Maroc </a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/collection/obock/obock_1.php">Obock </a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/collection/senegal/senegal_1.php">Sénégal </a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40"><div class="arrow_3"><a class="button_4">Philat&eacute;lie</a></div></div>
    <ul class="gradient_menu gradient174">
    <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/philatelie/graveurs/grav.php">Graveurs</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/philatelie/lexique.php">Lexique</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/philatelie/estimation.php">Estimer votre collection</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/philatelie/qualite.php">Nomes qualités</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/philatelie/materiel.php">Conseils</a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/philatelie/tarif_postal.php">Les tarifs postaux</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 107px;"><div class="arrow_4"><a>Annonces</a></div></div>
    <ul class="gradient_menu gradient87">
    <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/annonce/affiche_annonce.php">Voir les annonces</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/annonce/saisie_annonce.php">Créer une annonce</a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/annonce/connexion_annonce.php">Modifier / supprimer une annconce</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 81px;"><div class="arrow_4"><a>Outils</a></div></div>
    <ul class="gradient_menu gradient58">
    <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/recherche/mot_recherche.php">Moteur de recherche</a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/recherche/classement_cote.php">Classement des timbres par cote</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button gradient40" style="width: 149px;"><div class="arrow_5"><a class="button_7">T&eacute;l&eacute;chargement</a></div></div>
    <ul class="gradient_menu gradient116">
    <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/telechargement/evaluation.php">LOGItimbres évaluation</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/telechargement/achat_logitimbre.php">Achat LOGItimbres</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/telechargement/telecharg-complet-MAJ.php">Mises à jour LOGItimbres</a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/telechargement/feuilles.php">Feuilles pour classeur</a></li>
    </ul></li>
  <li class="last_button"><div class="buttonbg gradient_button gradient40" style="width: 129px;"><div class="arrow_5"><a class="button_8">Votre compte</a></div></div>
    <ul class="gradient_menu gradient145">
    <li class="gradient_menuitem gradient29 first_item"><a href="http://127.0.0.1/france-timbre/personnel/connexion.php">Connexion</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/personnel/identification.php">Création</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/personnel/modif_info_perso.php">Modification</a></li>
    <li class="gradient_menuitem gradient29"><a href="http://127.0.0.1/france-timbre/personnel/suppression_compte.php">Suppression</a></li>
    <li class="gradient_menuitem gradient29 last_item"><a href="http://127.0.0.1/france-timbre/gestion_collec/affiche_fiche_new.php">Gérer votre collection</a></li>
    </ul></li>
  </ul>
</div> <!-- fin du menu -->       

      	<div id="droite" align="center">
          <p>&nbsp;</p>	
		  <p><script type="text/javascript"><!--
google_ad_client = "ca-pub-0489429450801644";
/* skyscraper large monaco */
google_ad_slot = "6319745203";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>         
         </div><!-- fin de id droite -->
        
    	<div id="centre">
        
          <p align="center"><a href="test_clic_phila_passion.php"><img src="../images_site/philatelie-passion-banniere.jpg" width="575" height="88" /></a></p>
          
 <div style="overflow:auto; height:600px; font-size:0.8em;	background:#F9FCBE;
	box-shadow: 0px 2px 5px #12A034;
	border-radius: 10px;	
">            	
         
<table width="540"  align="center" >
<p>  </p>
  <tr>
    <td colspan="3" align="center"bgcolor="#E6FBF9"><h3>Yvert et Tellier  N° 3</h3></td>
  </tr>
  <tr>
    <td colspan="3" align="center"bgcolor="#E6FBF9">
<h2>Cérès</h2></td>
  </tr>
  <tr>
    <td bgcolor="#E6FBF9" align="center">Graveur</td>
 <!--   <td rowspan="10" bgcolor="#000000" align="center"> -->
<td rowspan="10" bgcolor="#000000" align="center" width="200"><img src=http://127.0.0.1/france-timbre/images/image_1_a_216/0003.jpg height=238.4 width=200 alt=Cérès/>            </td>
</td>
    <td bgcolor="#E6FBF9" align="center">Dessin / mise en page</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="color:#F00">Jacques Jean Barre</td>
    <td bgcolor="#FFFFFF" style="color:#f00;">Jacques Jean Barre</td>
  </tr>
  <tr>
    <td bgcolor="#E6FBF9" align="center">QT émis</td>
    <td bgcolor="#E6FBF9" align="center">Couleur</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="color:#f00;">41.700.000</td>
    <td bgcolor="#FFFFFF" style="color:#f00;">noir sur jaune</td>
  </tr>
  <tr>
    <td bgcolor="#E6FBF9" align="center">Année d'émission</td>
    <td bgcolor="#E6FBF9" align="center">Dentelure</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="color:#f00;">1849</td>
    <td bgcolor="#FFFFFF" style="color:#f00;">non Dentelé</td>
  </tr>
  <tr>
    <td bgcolor="#E6FBF9" align="center">Type</td>
    <td bgcolor="#E6FBF9" align="center">Valeur faciale</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="color:#f00;">.</td>
    <td bgcolor="#FFFFFF" style="color:#f00;">20 c</td>
  </tr>
  <tr>
    <td bgcolor="#E6FBF9" align="center">Impression</td>
    <td bgcolor="#E6FBF9" align="center">Date de retrait</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" style="color:#f00;">Typographie</td>
    <td bgcolor="#FFFFFF" style="color:#f00;">octobre 1850.</td>
  </tr>
  <tr>
    <td bgcolor="#E6FBF9" align="center">Valeur  neuf</td>
    <td bgcolor="#E6FBF9" align="center">Valeur charnière</td>
    <td bgcolor="#E6FBF9" align="center">valeur oblitéré</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" align="center" style="color:#f00;">195,00 € €</td>
    <td bgcolor="#FFFFFF" align="center" style="color:#f00;">0 €</td>
    <td bgcolor="#FFFFFF" align="center" style="color:#f00;">18,00 € €</td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#FFFFFF" style="color:#00f;">NOTE : La valeur est le produit des diff&eacute;rentes cotes sur   lesquelles est appliqu&eacute; un coefficient r&eacute;ducteur de 70% (ce qui   repr&eacute;sente la valeur r&eacute;elle du timbre en cas de vente) </td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#FFFFFF"></td>
  </tr>
  <tr>
    <td colspan="3" bgcolor="#FFFFFF">
 </td>
  </tr>
    <tr>
    <td colspan="3" align="center" bgcolor="#FFFFFF"><a href="http://127.0.0.1/france-timbre/collection/france/classique/annee_1849.php">Fermer</a></td>
  </tr>
</table>

         	</div>
         </div><!-- fin de id centre -->
         
     	<div id="gauche">
          <p>&nbsp;</p>	
		  <p><script type="text/javascript"><!--
google_ad_client = "ca-pub-0489429450801644";
/* skyscraper large monaco */
google_ad_slot = "6319745203";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>         
        </div><!-- fin de id gauche -->

     	<footer id="footer">
        
        	<div class="box_1">
        	   <div  align="center"><a href="http://127.0.0.1/france-timbre/annonce/affiche_annonce.php">Annonces </a><br>
   			   <a href="http://127.0.0.1/france-timbre/collection/france/classique/classique_1_a_7.php">Collection France classique</a><br>
    		   <a href="http://127.0.0.1/france-timbre/philatelie/graveurs/grav.php">Les graveurs </a><br>
   			   <a href="http://127.0.0.1/france-timbre/recherche/classement_cote.php">Classement par cote</a></div>
       		</div><!-- fin de id box_1 -->
           
           
            <div class="box_2">
               <div align="center"><a href="http://127.0.0.1/france-timbre/contact.php">Contact </a><br>
               <a href="http://127.0.0.1/france-timbre/collection/andorre/andorre_presentation.php">Collection Andorre</a><br>
               <a href="http://127.0.0.1/france-timbre/philatelie/lexique.php">Lexique </a><br>
               <a href="http://127.0.0.1/france-timbre/telechargement/achat_logitimbre.php">Achat LOGItimbres</a></div>
			</div><!-- fin de id box_2 -->

    		<div class="box_3">
    			<div align="center"><a href="http://127.0.0.1/france-timbre/dispo_manco/echange.php">Echanges </a><br>
    			<a href="http://127.0.0.1/france-timbre/collection/monaco/monaco_presentation.php">Collection Monaco</a><br>
   				<a href="http://127.0.0.1/france-timbre/philatelie/qualite.php">Qualité </a><br>
    			<a href="http://127.0.0.1/france-timbre/telechargement/evaluation.php">Démo LOGItimbres</a></div>
			</div><!-- fin de id box_3 -->
   
        
        </footer><!-- fin de id footer -->

</body>
</html>

Si quelqu'un a une idée du problème je suis preneur

Merci[/i][/i]

niuxe

Modérateur

30 Jun 2015 à 19:29

Salut,

tu mets cela (ci-dessous) à la fin de ta css et tu nous dis ce que ça produit :


#footer{display:table;}
#footer > *{display:table-cell;vertical-align:middle;}

Sujet clos

CSS et mise en forme, CSS3

Positionnement qui fonctionne sur une page et pas sur l'autre