Problème d'alignement avec firefox

Question

jinqiu

27 Jan 2007 à 12:57

Bonjour, J'ai un problème de style css avec firefox. Dans ie, les texts sont toujours au milieu de page; mais dans firefox, les texts sont toujurs à gauche.
Comment je peux faire? Merci de votre aide.
J'ai:

<div id="Layer1">
<div style="width:200px">Firefox vs IE</div>
</div>

le style css est:

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:100%;
	height:115px;
	text-align:center;
	z-index:1;
}
-->
</style>

<edit de Julien Royer>Inutile de mettre ton code en gras.</edit>
Modifié par Julien Royer (27 Jan 2007 - 13:17)

Julien Royer

27 Jan 2007 à 13:02

Bonjour et bienvenue sur Alsacréations. Smiley smile

Merci d'éditer ton message précédent pour respecter la règle 13 du forum.

fvsch

27 Jan 2007 à 13:14

Bonjour,

La propriété text-align s'applique aux éléments de type en-ligne. À l'intérieur de div#Layer1, tu n'as pas d'élément de type en-ligne, mais un élément de type bloc (une div), d'une largeur de 200px. Cet élément ne sera donc pas centré.

Pour centrer un élément de type bloc :
Centrer les éléments ou un site web en CSS
(en l'occurrence la technique à utiliser sera celle des marges automatiques).
Modifié par Florent V. (27 Jan 2007 - 13:14)

jinqiu

27 Jan 2007 à 13:14

Julien Royer a écrit :
Bonjour et bienvenue sur Alsacréations.

Merci d'éditer ton message précédent pour respecter la règle 13 du forum.

Désolé! et merci Smiley cligne

Julien Royer

27 Jan 2007 à 13:18

jinqiu a écrit :
Désolé! et merci

Est-ce que ton sujet est résolu ?

jinqiu

27 Jan 2007 à 13:45

Merci Florent V.; tu as raison; mais pas pour mon cas. Je sais pas pourquoi. en fait, dans mon code, j'ai mise aussi margin left et right:auto, mais ça toujour marche pas. veuillez voir, je vais coller tous les codes.
en gros, c'est un div#layer, dedans, c'est d'un div #width 945px; et puis dans ce div id=header, j'ai mise mon logo, et une bannier qui est formé encore en div et ul.
voilà les codes:


<div id="Layer1">
<div id="topper">&nbsp;</div>
<div id="header">
<div id="logo"><img src="1/imgs/logo.gif" alt="allez118, Moteur de recherche spécialisé" width="200" height="113" /></div>
<div id="mainmenu"><div class="menu2"><ul>
      <li class=td onMouseOver="viewLayer('1');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=1" style="color:#FFFFFF">Portail</A></li>
      <li class=td 
                      onmouseover="viewLayer('2');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';" style="color:#FFFFFF"><A 
                        href="/bbsid=11" style="color:#FFFFFF">Loisir</A></li>
      <li class=td 
                      onmouseover="viewLayer('3');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=20" style="color:#FFFFFF; font-size:11px">Actu&amp;Blog</A></li>
      <li class=td 
                      onmouseover="viewLayer('4');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=26" style="color:#FFFFFF">Pratique</A></li>
      <li class=td 
                      onmouseover="viewLayer('5');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=35" style="color:#FFFFFF">Outils</A></li>
      <li class=td 
                      onmouseover="viewLayer('6');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=47" style="color:#FFFFFF; font-size:11px">Informatique</A></li>
      <li class=td 
                      onmouseover="viewLayer('7');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=55" style="color:#FFFFFF">Shopping</A></li>
      <li class=td 
                      onmouseover="viewLayer('8');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=64" style="color:#FFFFFF; font-size:11px;">Information</A></li>
      <li class=td 
                      onmouseover="viewLayer('9');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=70" style="color:#FFFFFF">Vie</A></li>
      <li class=td 
                      onmouseover="viewLayer('10');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=77" style="color:#FFFFFF">Voyage</A></li>
      <li class=td  
                      onmouseover="viewLayer('11');this.style.backgroundColor='#1E1E1E';return true;" 
                      onmouseout="this.style.backgroundColor='#F02F0F';"><A 
                        href="/bbsid=84" style="color:#FFFFFF">Divers</A></li>
       </ul>  </div>
	   
	     <DIV id=sub_1 style="DISPLAY: none; PADDING-TOP: 1px" class="test">
            <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
          </DIV>
        <DIV id=sub_2 
            style="DISPLAY: none; PADDING-LEFT: 0px; PADDING-TOP: 1px" class="test">
           <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_3 
            style="DISPLAY: none; PADDING-LEFT: 110px; PADDING-TOP: 1px" class="test">
           <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_4 
            style="DISPLAY: none; PADDING-LEFT: 165px; PADDING-TOP: 1px" class="test">
           <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_5 
            style="DISPLAY: none; PADDING-LEFT: 120px; PADDING-TOP: 1px" class="test">
          <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_6 
            style="DISPLAY: none; PADDING-LEFT: 175px; PADDING-TOP: 1px" class="test">
            <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_7 
            style="DISPLAY: none; PADDING-LEFT: 90px; PADDING-TOP: 1px"class="test">
           <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_8 
            style="DISPLAY: none; PADDING-LEFT: 75px; PADDING-TOP: 1px"class="test">
           <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_9 
            style="PADDING-left: 168px; DISPLAY: none; PADDING-TOP: 1px" class="test">
           <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_10 
            style="PADDING-left: 200px; DISPLAY: none; PADDING-TOP: 1px"class="test">
          <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
        <DIV id=sub_11 
            style="PADDING-left: 268px; DISPLAY: none; PADDING-TOP: 1px"class="test">
           <ul>  <li><A 
                  href="#">Général</A></li>
                  <li><A 
                  href="#">Annuaire-Recherche</A></li>
                  <li><A 
                  href="#">Tous-Annuaires</A></li>
            </ul>
  </DIV>
	  
         
  </div>


<div id="submenu">
  <div align="right"><a href="http://www.allez118.fr"><img src="1/imgs/acceuil.gif" alt="moteur de rechere spécialisé accueil" width="46" height="6" border="0" /></a> <img src="1/imgs/multi_moteur_recherche.gif" alt="accueil simplifié de multimoteur de recherche " width="90" height="6">&nbsp; &nbsp; <img src="1/imgs/liens_blog.gif" alt="liens partenaires d'allez118" width="33" height="5" /> &nbsp; &nbsp;<img src="1/imgs/contacter.gif" alt="contactez le webmaster" width="58" height="5" />&nbsp; &nbsp; <img src="1/imgs/faq.gif" alt="foire aux questions" width="24" height="5" />&nbsp; &nbsp;<img src="1/imgs/demarrage.gif" alt="faites allez118.fr votre page de démarrage" width="98" height="5" />&nbsp; <img src="1/imgs/favoris.gif" alt="ajoutez allez118.fr dans votre favoris" width="43" height="5" /></div>
</div>
<div id="blanc1"></div>
</div></div>

le style css


<style type="text/css">
body {
	background: #ffffff;
	text-align: center;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 0px;
	margin: 0px;	
}
#topper{
background-image:url(1/imgs/bgtop.gif);
width:100%;
}

#header {
padding: 0px;
width: 945px;
height: 60px;
text-align:left;
margin-left:auto;
margin-right:auto;
}
#logo{
float: left;
padding: 0px;
width: 200px;
height:113;
}
#mainmenu{
	float: right;
	padding: 0px;
	width: 695px;
	text-align:left;
	height: 55px;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 2px;
	margin-left: 0px;
}
#blanc1{
float: right; 
margin: 2px 0px 2px 0px;
padding: 0px; 
width: 690px; 
height: 30px;
}
#submenu{
float: right; 
margin: 2px 0px 2px 0px;
padding: 0px; 
width: 690px; 
}

.test ul{
	list-style:none;
		margin-left: 0px;
	margin-top: 0px;
	list-style-type:none;
	padding-left:0px;
    
}
.test li{
	float:left;
	width:84px;
	line-height:14px;
	font-size: 9px;
	overflow: visible;
	visibility: visible;
	background-color: #CCC;
	background-position: center;
	vertical-align: middle;
	margin-right: 1px;
	margin-top: 1px;
	}

.menu2{
	width:695px;
	text-align:center;
	padding: 0px;
	clear: none;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height:23px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #D5D7CA;
	border-bottom-color: #D5D7CA;
}
.menu2 ul{
list-style-type:none; 
list-style:none; 
padding-left: 0px; 
padding-top:0px;
margin-top:0px;
margin-left: 0px;
}
.menu2 ul li {
	background-color: #F02F0F;
	text-align:center;
	float: left;
	width: 62px;
	list-style-type: none;
	font-size:12px;
	margin-left: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	margin-right: 1px;
}

#Layer1 {
	position:absolute;
	width:100%
	height:80px;
	z-index:1;
	top:0px;
	left:0px;
	text-align:center;
}
</style>

Modifié par jinqiu (27 Jan 2007 - 13:49)

fvsch

27 Jan 2007 à 14:22

On pourrait voir la page en ligne (ou une page de test reproduisant le problème) ? Parce que là c'est plutôt illisible cette histoire. Smiley sweatdrop

Quelques questions en attendant :
- le code HTML de la page est-il valide ?
- même chose pour le code CSS ?
- la page utilise-t-elle un DOCTYPE syntaxiquement correct ?
etc.

Sujet clos

CSS et mise en forme, CSS3

Problème d'alignement avec firefox