28173 sujets

CSS et mise en forme, CSS3

Problème sous Firefox

Bonjour,
j'ai un petit soucis de texte qui va à la ligne "tardivement" sous Firefox, alors qu'avec IE, tout va bien...
Voici la page

Et voici le code des CSS :


body {
            background-image: url(images/fond_parquet6.jpg);
            color: white;
            font-style: verdana, sans-serif;
            font-size: 90%;
            }
        #conteneur {
          position: absolute;
          width: 900px;
          left: 50%;
          margin-left: -450px;
          }

        #header {
          height: 200px;
          background-image: url(images/banniere.gif);
          }

        #gauche {
          position: absolute;
          left:3px;
          width: 145px;
          height: 430px;
          background-image: url(images/menu4.gif);
          }

        #centre_haut{
           background-image:url(images/centre_haut.gif);
           margin-left: 150px;
           width:751px;
           height:25px;
           right:10;
           }

        #centre_bas{
           background:url(images/centre_bas.gif);
           margin-left:150px;
           width:751px;
           height:24px;
           }

        #centre_milieu{
           background: url(images/centre_fond.gif) left top repeat-y;
           width:751px;
           min-height:300px;
           _height:300px;
           margin-left:150px;
           right:10px;
           padding:25px;
           padding-right:100px;
           }

        .menugauche {
          list-style-type: none;
          margin: 0;
          padding:25px;
          }

        .menugauche li {
          margin-bottom: 8px;    <!-- espacement entre les rubriques -->
          }

        .menugauche a {
          margin: 0 2px;
          color: #000000;
          text-decoration: underline;
          }

        .menugauche a:hover {
          text-decoration: none;
          background-image:url(images/ballon_puce.gif);
          background-repeat:no-repeat;
          background-position:1% 50%;
          padding-left:15px;
          color:white;
          }

        #pied {
          height: 30px;
          background-color: none;
          margin-top:5px;
          }


le code du body :

<body>

<div id=conteneur>
   <div id="header"></div>

  <div id="gauche">

        <ul class="menugauche">
         <li><a href="">Comité</a></li>
         <li><a href="">Equipes</a></li>
         <li><a href="">Championnats</a></li>
         <li><a href="">Infos basket</a></li>
         <li><a href="">Détente</a></li>
         <li><a href="">Liens</a></li>
       </ul>

  </div>

  <div id="centre_haut"></div>

  <div id="centre_milieu">

  partie centrale qui &quot;pousse&quot; les colonnes vers le bas.<br />
      partie avec du contenu occupant le reste de la largeur<br />

      partie avec du contenu occupant le reste de la largeurrrrrrrrrrrrrrrrrrrrrrrrrrrr uuuuuuuuuuuuuuuuuuuu vvvvvvvvvvvvvvvvvvvvvvv tttttttttttttttttt<br />
      partie avec du contenu occupant le reste de la largeur<br />
      partie avec du contenu occupant le reste de la largeur<br />

  </div>

     <div id="centre_bas"></div>


    <div id="pied"></div> <!-- pied de page invisible c'est pour l'esthétique  -->


</div>
</body>


De où celà peut bien venir ?

Merci pour votre aide.
#centre_milieu{
           background: url(images/centre_fond.gif) left top repeat-y;
           [b]width:751px;[/b]
           min-height:300px;
           _height:300px;
           margin-left:150px;
           right:10px;
           padding:25px;
           padding-right:100px;


ça dépend, ça dépasse ! Smiley cligne
751px, c'est plus grand que ton décor dessous, non ?

Cet article sur les largeurs de blocs peut paut-être t'aider.

Bon courage
Salut,

Oui mais tu as un padding: 25px qui t'ajoute autant à la largeur. Donc du coup ca dépasse. Il faut que tu réduise la largeur de #centremilieu d'au moins 25px pour compenser le padding.

Edit : Je tiens à préciser qu'avec une largeur aussi importante, ton site ne sera pas visible en 800x600 sans barre de défilement horizontale. Quand on sait qu'à l'heure actuelle 20% des internautes sont encore en 800x600, c'est un peu dommage que ton contenu soit si large.
En plus ton menu est bouffé par la gauche du navigateur en 800x600, ce qui rend le site absolument pas navigable à cette résolution.
Modifié par Mikachu (06 Jun 2006 - 15:58)
upload/3951-3blm.gif
Voici l'explication de cette largeur de bloc.
Je te renvois à l'article cité précedemment pour comprendre et adapter les largeurs de blocs pour MSIE et les autres.
Sujet clos
Aller à