28172 sujets

CSS et mise en forme, CSS3

Design qui part en vrie sous firefox

Bonsoir,

Je suis en train de faire le fichier css pour mon site.

Ce dernier s'affiche correctement sous internet explorer, par contre sous mozilla firefox, la partie centrale est complètement décalée et je ne comprends pas pourquoi...

Lien: http://www.voilou.fr/liste-des-jeux.php
CSS: http://www.voilou.fr/css/style.css

Je pense que cela doit venir du conteneur de la partie centrale, donc soit:


#corps /* zone centrale contenant le texte */
{
	margin-left: 5px;
	text-align:justify;
	color: black; /* Les textes centraux sont en blanc */
	float:left;
}

.block2 /* contour des cadres centraux contenant le texte */
{
width:477px;
border-left: 1px solid #5CB3BE;
border-right: 1px solid #5CB3BE;
border-bottom: 1px solid #5CB3BE;
margin-bottom: 8px;
padding:8px; /* espacement tous cotes */
background-color:#F4F4F4;
padding-top:14px;
overflow:auto;
}


Mais je n'arrive pas à voir ou est le problème...

Merci pour votre aide!
Bonne soirée (ou journée) Smiley lol
Modifié par joboy (18 May 2009 - 02:15)
Bonjour,

Essaye d'enlever la ligne vide (ou avec un tab) qui se trouve avant le doctype. Si sur IE tu obtiens le même décalage que sur FF, c'est bon, tu auras résolu le problème ^^;
Salut joboy,

Le corps de ton site ressemble à ça : 
<div id="menu-de-gauche"> float:left </div>
<div id="menu-de-droite"> float:right </div>
<!-- puis tous les éléments de ta colonne centrale -->
Avec cette structure, tu vas devoir appliquer des styles sur chacun des éléments de ta colonne centrale (float, par exemple), pour compenser l'absence de contexte de formatage bloc sur la colonne.

Ton intégration serait beaucoup plus simple si tu créais une div pour contenir les éléments de cette colonne centrale et que tu faisais simplement :
<div id="menu-de-gauche"> float:left </div>
<div id="colonne-centre"> float:left </div>
<div id="menu-de-droite"> float:left </div>

Modifié par marcv (18 May 2009 - 09:23)
Bonjour,

J'ai bien supprimé la première ligne vierge mais le résultat reste le même. Sous Internet explorer tout s'affiche correctement...et sous Firefox il y a toujours le décalage dans la partir centrale.

Sinon, il y a déjà un div qui contient les éléments de la partie centrale: c'est le div "corps"!

Pour un meilleur aperçu de la structure de ma page, en voici une version simplifiée, qui contient toute la partie de code concernée.


<div id="conteneurCentre">
    <!-- Les menus -->
	<!-- Menus de gauche -->
    <div id="menu-de-gauche">        
          <div class="element_menu">
                   <div class="imageTitreMenusLeft">
                      <div class="textecentre"><h2>TOP 10 DES JEUX EN LIGNE</h2></div>
                   </div>
              <div class="block-menu-gauche">
                <ol>
                   <li><a href="test/page1.html">Kadokado</a></li>
                   <li><a href="test/page2.html">Find-jeux</a></li>
                   <li><a href="test/page3.html">Prizee</a></li>
                </ol>
              </div>
          </div>        
    </div>       
    <!--fin menu gauche -->

   <!-- menu droite -->
   <div id="menu-de-droite">        
         <div class="element_menu">
                   <div class="imageTitreMenus">
                      <div class="textecentre"><h2>JEUX CONCOURS</h2></div>
                   </div>
              <div class="block-menu-droite">
               <ul>
                 <li><a href="/liste-1-jeux-concours-Argent.html">Chèques/Bons d’achat</a></li>
                 <li><a href="/liste-1-jeux-concours-Consoles.html">Consoles et jeux</a></li>
                 <li><a href="/liste-1-jeux-concours-Auto.html">Auto/Moto</a></li>              
               </ul>
            </div>

         </div>    
   </div>   
   <!-- fin menu droite -->      
     
   <!-- Le corps -->
   <div id="corps">
      <div class="imageTitreCentre"><h1><div class="textecentre">Jeux Prizee</h1></div></div>
        <div class="block2">
          <div class="imagejeux"><a href="http://www.prizee.com" target="_blank"><img src="/images/screenjeux/Prizee240.jpg" id="Prizee" alt="Prizee" width="200" height="170" /></a></div>
		  <script type="text/javascript">
                      new TemplatePreview('Prizee', 
					  {
					  title:  'Jeux Prizee',
					  src:'images/screenjeux/Prizee320.jpg',
                      width:  320,
                      height: 240 
					  });
                     </script>		  
		  
     <div class="textejeux"><p>Description des jeux...</p>
       <div class="alignement-gauche"><a href="mon lien.html">En savoir plus</a></div>
       <div class="alignement-droite"><a href="site.com" target="_blank">Visiter site</a></div>
     </div>
       </div>
	 
      <div class="pagination">
        <span class="inactive"><</span><span class="active">1</span><a href="lien.php?p=2">2</a><a href="/lien.php?p=2">></a>
      </div>
                       
   </div> <!-- fin du div corps -->
 </div> <!-- fin du div conteneurcentre -->


Le menu de gauche est contenu dans:


#menu-de-gauche
{   
   float: left;
   width: 185px; 
}


Le menu de droite est contenu dans:


#menu-de-droite
{
   float: right;
   width: 185px;
}


La colonne du centre est contenue dans:


#corps /* zone centrale contenant le texte */
{
	margin-left: 5px;
	text-align:justify;
	color: black; /* Les textes centraux sont en blanc */
	float:left;
}


Les 3 éléments cités ci-dessus sont contenu dans:


#conteneurCentre
{
margin-top:4px; /* ESPACEMENT ENTRE LA SECTION BANNIERE PUB ET LES MENUS+CONTENU */
overflow: auto;
width:875px;
}



Merci encore pour votre aide
Salut,

A mon avis ça vient de la mauvaise imbrication de tes balises :

<div class="imageTitreCentre"><h1><div class="textecentre">Jeux Prizee</h1></div></div>


Du coup Firefox ferme ton div #corps beaucoup trop tôt et n'englobe pas les autres.
Merci Agylus, tu es mon sauveur!

L'erreur venait bien de là. J'ai incorporer la balise h1 dans le div et ca marche maintenant!

Merci encore et bonne journée Smiley smile
Sujet clos
Aller à