Partage
  • Partager sur Facebook
  • Partager sur Twitter

Décalage des bloc (pas comme mOrbide)

    1 novembre 2006 à 21:14:51

    Bonsoir, sous internet explorer mon bloc "corps" se décale vers le bas mon site regardez avec IE et aparament cela vient de l'image News car lorsque je la supprime et bien le texte se met bien tout en haut sans laisser le blanc, alors que sous mozilla firefox sa marche très bien ;) .

    Voila mon code html:

    Citation : moi

    <div id="corps">
    <img src="images/corps/corpsnews.png">
    <h3 class="h3">Downloads</h3>
    <p>Deux nouvelles vidéos sont disponible en DL (DownLoad) dans la section download: <a href="download.html">New World Disorder 4</a> et <a href="download.html">Freeride 2004</a>. Vous pouvez aussi visionner la preview de <a href="bikevideo.html">New World Disorder 7</a> qui est méchante.
    <h3 class="h3">Conseil</h3>
    <p>Il est fortement conseillé d'avoir une résolution d'écran de 1600 par 1200 pour avoir le meilleur affichage possible. Aussi, le navigateur Internet Explorer bug, il y'a un problème d'affichage, je vous conseil de télécharger <a href="http://download.mozilla.org/?lang=fr&amp;product=firefox-2.0&amp;os=win">Mozilla Firefox</a>.</p>
    <p>= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =</p>
    <h3 class="h3">Les Vacances</h3>
    <p>Et oui, le moment tant attendue est arrivé, les vacances.
    Ceci veut dire bien sur, qu'il va y avoir du ride dans l'air!. Thomas et Vincent sont partis aux 2 Alpes pour une semaine, et oui il y a des chanceux :D, et pour ma part je reste au skate park de Villeneuve.</p>
    <p>= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =</p>
    <h3 class="h3">Le Forum</h3>
    <p>Je pense ouvrir une section Forum pour discuté de plan de dernières minutes xD, et de projets. Ce sera disponible dans quelques temps comme même, le temps que je finisse mon site pour qu'il soit opérationnel!</p>
    <p>= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =</p>
    <h3 class="h3">Bienvenue</h3>
    <p>Bonjour à tous, voici le tout nouveau site de Riders Crew!
    Je vais vous présenter les membres de la team, des photos, des liens intéressants...
    Ce site est encore en cours de développement, et donc il n'y aura rien sur certaines pages.</p>
    </div>



    Et le code css (je ne pense pas que sa vient de ça :

    Citation : moi

    body
    {
    width: 900px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    color: gray;
    font-family: verdana;
    font-size: small;
    background-image: url("images/background.jpg");
    }

    #en_tete
    {
    width: 900px;
    height: 200px;
    background-image: url("images/banniere.jpg");
    }

    #menutop
    {
    margin-bottom: 2px;
    }

    .rien
    {
    list-style-type: none;
    }

    a
    {
    font-weight: bold;
    color: rgb(28,93,141);
    text-decoration: none;
    }
    a:hover
    {
    color: gray;

    }

    #menu
    {
    float: left;
    width: 215px;
    border: 1px solid black;
    background-image: url("images/menu/menubg.gif");
    }

    .element_menu
    {
    color: gray;
    background-image: url("images/menu/menubg.gif");
    }

    #corps
    {
    margin-left: 230px;
    margin-bottom: 20px;
    background-image: url("images/corps/corps5.png");
    background-repeat: repeat-y;
    border: 1px solid black;
    }

    #pied_de_page
    {
    padding: 5px;
    text-align: center;
    color: gray;
    background-image: url("images/corps/corps5.png");
    border: 1px solid black;
    margin-left: 230px;
    }

    p
    {
    text-indent: 15px;
    }

    .imageflottante
    {
    float: left;
    }

    .h3
    {
    text-align: center;
    }

    .commentaires
    {
    text-indent: 0px;
    }

    • Partager sur Facebook
    • Partager sur Twitter
      1 novembre 2006 à 21:36:43

      Si, en fait, c'est exactement le même problème ;) ça illustre d'ailleurs parfaitement le "edit" que je lui ai mis en bas concernant sa solution... :)

      Si on regarde dans ton code, tu déclares un body à 900px. dans ton corps, pas de width, mais un margin-left de 230 + 2px de bordures. 900-2-230px = il reste au max 668px pour le corps. Hors ton image fait 670 de large...

      Tu peux essayer, tu agrandis ton body de 5 px, soit 905 de width, (2px de pas assez plus 3 px de bug) et ça devrait passer sur IE.

      Mais comme morbide, je te conseille de passer ton corps en float, et soit tu passes ton Body à 902 soit tu tolères 2px de moins entre le menu et le corps:
      #corps
      {

      width:670px;
      float:right;
      margin-bottom: 20px;
      background-image: url("images/corps/corps5.png");
      background-repeat: repeat-y;
      border: 1px solid black;
      }

      #pied_de_page
      {

      clear:both;
      padding: 5px;
      text-align: center;
      color: gray;
      background-image: url("images/corps/corps5.png");
      border: 1px solid black;
      margin-left: 230px;
      }


      • Partager sur Facebook
      • Partager sur Twitter
        1 novembre 2006 à 21:45:08

        Que veut dire : clear:both;
        Merci je vais testé, j'avais du mal lire le post de mOrbide désolé.

        EDIT: Merci ça marche nickel! ;)
        • Partager sur Facebook
        • Partager sur Twitter
          1 novembre 2006 à 21:52:10

          non non aucun problème, c'était le même problème mais qui se présentait un peu différement :)

          Le clear oblige ton pied de page à se positionner en-dessous de flottants plutôt qu'à côté. Ainsi, que ce soit le corps ou le menu le moins long, le footer viendra automatiquement après le plus long.
          • Partager sur Facebook
          • Partager sur Twitter

          Décalage des bloc (pas comme mOrbide)

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown