Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de mise en page avec le CSS

Impec sous Firefox, horrible sous IE ...

Sujet résolu
lolodu67
    27 juillet 2006 à 17:16:48

    Bonjour @ tous !

    Voila, j'ai un petit problème, j'ai tout essayer, et je n'arrive pas a résoudre ce problème de mise en page !
    En fait, cela passe très bien sous firefox, mais c'est la galère sous IE ! Et si je change quelque chose pour faire en sorte que IE soit bien , c'est sur firefox que ça en prend un coup !!!
    Help me svp !!!

    Voici les CSS de mon site (second design )
    /*Le site */
    body
    {
        width: 1024px;
       margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
       margin-bottom: 0px;    /* Idem pour le bas du navigateur */
       background-image: url("images/design02/fond.gif");
       background-repeat: repeat-y;
       background-position: center;
       margin: auto;
    }

    #bg
    {
            width: 995px;
            margin-left: 25px;
    }

    /* Changement des paramettres pour tout les titres */

    h1
    {
       font-size: 24px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center;
    }
    h2
    {
       font-size: 24px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: left;
    }
    h3
    {
       font-size: 20px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center;
    }
    h4
    {
       font-size: 20px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: left;
    }
    h5
    {
       font-size: 17px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center;
    }
    h6
    {
       font-size: 17px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: left;
    }


    #menu_c1
    {
       width: 952px;
       height: 16px;
       font-size: 13px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       background-image: url("images/design02/menu_c1.gif");
       background-repeat: no-repeat;
       margin-bottom: 0px;
       padding-right: 5px;
    }

    #banniere
    {
       width: 952px;
       height: 51px;
       background-image: url("images/design02/ban.gif");
       background-repeat: no-repeat;
       margin-bottom: 0px;
    }

    #menu_c2
    {
       width: 952px;
       height: 25px;
       font-size: 15px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       background-image: url("images/design02/menu_c2.gif");
       background-repeat: no-repeat;
       margin-bottom: 0px;
       padding-bottom: 2px;
    }

    #menu_c2 a:link
    {
    color: #E9E6DF;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }
    #menu_c2 a:visited
    {
    color: #E9E6DF;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }
    #menu_c2 a:active
    {
    color: #E9E6DF;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    font-style: italic;
    }
    #menu_c2 a:hover
    {
    color: #E9E6DF;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }

    /*menu de gauche */
    #menu_g
    {
            float: left;
            width: 176px;
    }
    /*Menu de droite*/
    #menu_d
    {
            float: right;
            width: 176px;
            margin-right: 30px;
    }

    .element_menu
    {
       list-style-image: url("images/design02/ico.gif");
       padding: 0px;
       margin-left: 0px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       font-size: 13px;
       background-image: url("images/design02/mil.jpg");
       background-repeat: repeat-y;

    }
    .element_menu ul /*Les lien du menu*/
    {
       margin-top: 5px;
       margin-bottom: 5px;
    }
    .element_menu li /*Les lien du menu*/
    {
       margin-left: -16px;
       padding: 0px;
       
    }
    .titre_menu /*Les titre  de tout les menu */
    {   
       font-size: 15px;
       color: #E9E6DF;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center;
       background-image: url("images/design02/menu_haut.jpg");
       background-repeat: no-repeat;
       height: 29px;
       padding-top: 8px;
    }

    .fin_menu /*Là c'est en fait pour mettre une image dans le bas du  menu*/
    {
    height: 18px;
    background-image: url("images/design02/menu_bas.jpg");
    background-repeat: no-repeat;
    }

    /*Les tableau du menu du dessus et du desous du header ----- Le menu C1 n'est plus utilisé */
    .table_menu
    {
    /*Non utilisé */
    }
    .table_menu td /* Les cellules normales */
    {
    /*Non utilisé */
    }
    .table_menu2
    {
    width: 35%;
    border: 0px;
    margin: auto;
    border-collapse: collapse; /* Colle les bordures entre elles */
    }
    .table_menu2 td /* Les cellules normales */
    {
       border: 0px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center; /* Tous les textes des cellules seront centrés*/
       padding-top: 2px;
       font-size: 16px;
    }

    #contenue
    {
       width: 587px; /*taille du contenu */
       margin-left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
       margin-top: 4px;
       margin-bottom: 5px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
       padding: 1px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
       font-size: 15px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       color: #6D6D6D;

    }

    #contenu_haut /*le div qui est sur le contenu en haut */
    {
    width: 587px;
    height: 30px;
    background-image: url("images/design02/barre.gif");
    background-repeat: no-repeat;
       font-size: 14px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center;
       padding-top: 6px;
       color: #E9E6DF;
    }

    #contenu_bas /* le div qui est sur le contenu en bas */
    {
    /*Vide car pas besoin ! ! */
    }

    #news_importantes
    {
       width: 300px;
       margin-left: 162px;
       margin-bottom: 5px;
       padding: 1px;
       font-size: 15px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       color: #6D6D6D;
       background-color: #F4F4F4;
       background-repeat: repeat-x;
       border: 1px solid #D7D7D7;
    }

    #baspage
    {
       clear: both;
       width: 954px;
       height: 93px;
       color: #6D6D6D;
       font-size: 11px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center;
    }

    #tableau /*Les tableaux de tout le site*/
    {
    width: 99%;
    border: 1px dashed black;
    margin: auto;
    border-collapse: collapse; /* Colle les bordures entre elles */
    }
    #tableau td,th
    {
    border: 1px dashed black;
    }
    #tableau th
    {
    background-color: #D4D4D4;
    }

    #tableau_partenaires /*Les tableaux de tout le site*/
    {
    width: 99%;
    border: 1px solid black;
    margin: auto;
    border-collapse: collapse; /* Colle les bordures entre elles */
    padding: 5px;
    }
    #tableau_partenaires td,th
    {
    border: 1px solid black;
    padding: 5px;
    }
    #tableau_partenaires th
    {
    background-color: #D4D4D4;
    padding: 5px;
    }

    #logo /*Les tableaux de tout le site*/
    {
    width: 60%;
    border: 1px dashed black;
    margin: auto;
    border-collapse: collapse; /* Colle les bordures entre elles */
    padding: 2px;
    }

    .presui /* C'est le tableau de tout les articles ! Il est différent car pas de bordures */
    {
    width: 100%;
    border: 0px;
    margin: auto;
    border-collapse: collapse; /* Colle les bordures entre elles */
    text-align: center;
    }
    /* Pour tout les lien du site */
    a:link
    {
    color: #6D6D6D;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }
    a:visited
    {
    color: #6D6D6D;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }
    a:active
    {
    color: #6D6D6D;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    font-style: italic;
    }
    a:hover
    {
    color: #3A3A3A;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }

    img /*Ne pas mettre de bordure sur toutes les pages du site*/
    {
    border: none;
    margin: 1px;
    }
    /*Les aires de texte */
    text-area
    {
    background-color: #DDDADA;
    }

    #table_article
    {
    width: 95%;
    padding: 5px;
    border-collapse: collapse; /* Colle les bordures entre elles */
    }

    #table_article th
    {
    border-width: 1px;
    border-style: solid;
    background-color: #D0D0D0;
    font-weight: bold;
    }
    #table_article td
    {
    border-width: 1px;
    border-style: dashed;
    }

    fieldset
    {
    width: auto;
    }



    /*Cutenews*/
    .news /*Ce sont les news Headlines */
    {
       padding-left: 1px;
       padding-right: 1px;
       font-size: 11px;
    }

    .news a:link
    {
    color: #6D6D6D;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }
    .news a:visited
    {
    color: #6D6D6D;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }
    .news a:active
    {
    color: #6D6D6D;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    font-style: italic;
    }
    .news a:hover
    {
    color: #3A3A3A;
    font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    text-decoration: none;
    font-size: 15px;
    }

    .titrenews /*Titre des news de cutenews*/
    {
       font-size: 17px;
       font-family: "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
       text-align: center;
       width: 100%;
       text-align: justify;
       color: #6D6D6D;
    }

    .full-story /* quand le texte de la news apparait*/
    {
    width: 100%; /* Prend toute la place */
    text-align: justify; /*Le texte colle au bord */
    padding-left: 1px;  /*Espacement pour les bords*/
    padding-right: 1px;
    font: 14px  "Comic Sans MS", Verdana, "Times New Roman", Times, serif;
    color: #6D6D6D;
    }

    .table_bas_news /*Mise en forme pour le nombre de commentaire et le "posté par" du bas des news => C'est juste pour la couleur et rien d'autre !!!! */
    {
    color: #000000;
    }

    .head_news
    {
    border-bottom:1px dashed black;
    width:100%
    }

    hr /*Barre horizontales */
    {
    /*
    border-width: 1px;
    border-style: outset;
    border-color: blue;
    */
    display: none;
    }


    /*Gooooooooogle */

    .google
    {
    background-color: #CBCBCB;
    }




    Bon, c'est un peu long je vous l'accorde, mais je voulais tout vous donner, comme ça vous pouvez mieu voir ce qui cloche ...
    Je précise l'adresse de mon site : http://www.info-actu.info/
    et si vous voulez voir ce design , allez ici => http://www.info-actu.info/design.php et choisez celui qui se nomme "nuage bleu"

    Merci d'avance pour votre aide !
    • Partager sur Facebook
    • Partager sur Twitter
    lolodu67
      28 juillet 2006 à 8:34:42

      Personne n'a de solution ?
      • Partager sur Facebook
      • Partager sur Twitter
      lolodu67
        29 juillet 2006 à 8:24:12

        Merci pour votre aide, ct génial !

        En attendant, j'ai réussit avec l'aide d'un pot, je met donc le sujet en résolu @ ++
        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          29 juillet 2006 à 10:14:32

          faut pas s'étonner avec IE...
          • Partager sur Facebook
          • Partager sur Twitter

          Problème de mise en page avec le CSS

          × 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