Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] Un mini bug

Mon div déborde

    27 novembre 2005 à 11:29:37

    Bonjour tout le monde,
    j'ai un léger problème et j'ai la toute bonne impression que c'est un simple bug que beaucoup d'entre vous pouront régler rapidement.
    J'ai divisé mon site en trois parties principales : zonegauche zonecentrale et zonedroite.
    Dans la zone centrale, j'ai inséré deux tableaux qui contiennent les news du site. Après les avoir terminés et avoir pris la précaution de vérifier qu'ils étaient bien compatibles IE et FF, j'ai tout simplement commencé à remplir les news. Voici le code utilisé jusque là :

    Citation : Le XHTML

    <div id="zone-centrale">
    <table class="central">
    <tr>
    <th class="central-HG" scope="col">&nbsp;&nbsp;&nbsp;</th>
    <th class="central-HC" scope="col">
    <img src="/Images/Autres/puce_1.png" alt="puce1" />&nbsp;Les news du site
    </th>
    <th class="central-HD" scope="col">&nbsp;&nbsp;&nbsp;</th>
    </tr>

    <tr>
    <th class="central-BG" scope="col"></th>

    <th class="central-BC" scope="col">
    <h1>Bienvenue (enfin) sur Contact.fr</h1>
    <h2><p>"<em>Enfin !</em>" A la fin de ces mois de travaux pour apprendre tout ces affreux langages informatiques, c'est bien
    l'une des premières choses que j'ai envie de gueuler ! Et pourtant rien n'est fini, et loin de là à la simple image de cette ouverture
    <em>partielle</em> du site ! <br /> Mais pourquoi tant de difficulté à sortir quelque chose qui semblait au début progresser de façon
    étonnante ? Et bien je crois que cette simple interrogation mérite quelques explications.</p>
    <p>Tout a simplement commencé par un petit délire comme deux personnes le savent très bien : <strong>Frite et Patate !</strong> Une belle série d'histoires
    que j'avais décidé de mettre en ligne sans la moindre petite notion de HTML, CSS, PHP, etc... <br />En bref, une vraie mission impossible. Et pourtant,
    à force de perséverance, je finis par pondre un truc ultra moche qui (et je ne me rends compte que trop tard) n'étais accessible qu'à mon type de configuration.<br />
    Je me suis alors mis à l'étude bouquinale (<em>Néologisme provenant du mot original "bouquin". Adjectif désignant l'acte d'apprendre par
    des livres</em>) du langage HTML. Je finis par faire un truc plus ou moins convenable. Mais <strong>PAF !</strong> toujours pas de compatibilité
    avec les autres explorateurs et configurations.</p>
    <p>Plusieurs semaines sans plus la moindre inspiration : je nage dans l'eau trouble... comment déjouer les méfaits de l'incompatibilité ?
    Par un simple coup de chance, je tombe sur un truc bizarre du nom barbare de <em>CSS</em>. Et tout devient clair ! Dans la foulée je tombe sur
    le php et SQL que j'apprend grâce à deux sites très bien faits et je progresse de nouveau avec facilité dans le monde de la programmation internatale
    (<em>Néologisme... bon ok jme tais</em>) et je finis par donner un truc qui rend pas mal et qui me satisfait.<br />
    Après plusieurs nouvelles semaines de travail intensif partagé entre l'étude de codes et la création du design avec paint et photoshop, voilà enfin (quand jvous dit qu'il revient souvent)
    une version intéressante du site. Je révolutionne au pasage le principe de contact.fr qui avant n'était centré que sur Sp et Sf !</p>
    <p>Et ben ! C'est fou comme on finit vite par raconter sa vie dans les news quand même. Et bien en tout cas ça m'a fait bien plaisir de
    rédiger la toute première news du site et une autre sera bientôt à venir pour exposer un peu les projets de contact.fr et ses principes !</p>
    <p align="right" style="text-decoration:underline"><strong>BkM, le (enfin) webmaster.</strong></p></h2>

    </th>
    <th class="central-BD" scope="col">&nbsp;&nbsp;&nbsp;</th>
    </tr>

    </table>
    </div>



    Citation : Le CSS

    #zone-centrale {
    margin-top:300px;
    margin-left:240px;
    margin-right:196px;
    text-align:center;
    border:1px solid #824104;
    }

    table.central {
    background:none;
    margin-bottom:3px;
    border:none;
    border-bottom:1px solid #824104;
    border-collapse:collapse;
    text-align:left;
    background:none;
    color:#FF8B00;
    border:1px solid #824104;
    }

    th.central-BD {
    width:20px;
    background-image:url(/Images/Autres/table2_d.gif);
    background-repeat:repeat-y;
    border:1px solid #824104;
    }

    th.central-BG {
    width:20px;
    background-color:#FFC54A;
    background-image:url(/Images/Autres/table2_g.gif);
    background-repeat:repeat-y;
    background-position:top-left;
    border:1px solid #824104;
    }

    th.central-BC {
    width:100%;
    background-color:#FFC54A;
    border:1px solid #824104;
    }

    th.central-HD {
    width:20px;
    height:29px;
    background-image:url(/Images/Autres/coin_d.png);
    background-repeat:no-repeat;
    border:1px solid #824104;
    }

    th.central-HG {
    width:20px;
    height:29px;
    background-image:url(/Images/Autres/coin_g.png);
    background-repeat:no-repeat;
    background-position:top-left;
    border:1px solid #824104;
    }

    th.central-HC {
    width:100%;
    background-color:#FFC54A;
    background-image:url(/Images/Autres/coin_m.png);
    background-repeat:repeat-x;
    font-family: Simpson, Chasm, verdana, arial, times;
    font-size:1em;
    color:#000000;
    border:1px solid #824104;
    }

    div#zone-centrale h1 {
    padding:0;
    margin:0;
    font:1.3em Kelt, Arial, Tahoma, Verdana, Times New Roman;
    color:#824104;
    font-weight:bold;
    text-decoration:underline;
    padding-top:15px;
    border:1px solid #824104;
    }

    div#zone-centrale h2 {
    font:12px "Trebuchet MS", Arial, Tahoma, Verdana, Times New Roman;
    color:#000000;
    text-indent: 18px;
    text-align: justify;
    border:1px solid #824104;
    }



    Bon c'est un peu long et je sens qu'il y en aura surement beaucoup qui vont râler devant (je suppose puisque je n'ai pas trop eu le temps de contrôler) la non conformité au XHTML mais j'espere que deux ou trois seront arriver jusque là. :)
    Mon problème maintenant. Et bien après avoir rempli la cellule BC avec la news, on a l'impression sous IE que quelque chose déborde de l'écran : on a une petite barre de défilement.
    Pourtant sous FF tout va bien et quand j'enlève le contenu de la cellule, ça ne déborde plus. o_0 En clair je comprends pas trop ce qui se passe... Avez-vous une idée ?
    Pour plus de compréhension : page test du site.
    • Partager sur Facebook
    • Partager sur Twitter
      27 novembre 2005 à 11:38:26

      Moi j'ai le mem affichage sur les 2 nav.
      Sinon tu as une petite erreur de semantique qui pourrait en etre la cause : tu as mis un <p> dans un <h2>
      • Partager sur Facebook
      • Partager sur Twitter
        27 novembre 2005 à 11:39:46

        Ah oui j'avais pas remarqué.
        Tu as quoi comme résolution ? C'est peut être aussi ça le problème
        • Partager sur Facebook
        • Partager sur Twitter
          27 novembre 2005 à 11:45:19

          Ah bah nan j'ai pareil o_0
          C'est pas normal en tout cas

          PREMIER EDIT :Nouvelle précision : il semblerait qu'il n'y ait le probleme que quand la cellule depasse la hauteur de l'ecran.
          Quand elle depasse pas cette limite, tout s'affiche bien.
          Ce qui expliquerait également le fait que jp949 voit mon site sans le moindre problème.
          Mais ça m'aide pas pour autant... :(

          SECOND EDIT : Ben encore une découverte ! Quand on va sur le site la première fois, sous IE et FF tout s'affiche bien. Mais dès qu'on actualise ça déconne sous IE avec donc, ce probleme de barre de defilement... Plus je cherche moins je comprends. o_0
          • Partager sur Facebook
          • Partager sur Twitter

          [CSS] Un mini bug

          × 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