Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ca fonctionne avec IE mais pas avec Firefox

Hooli
    22 décembre 2005 à 15:00:57

    Bonjour à tous,
    Je suis en train de créer un sytème de news pour mon site mais j'ai un problème d'affiche sur Firefox alors que sur IE il n'y a pas de problème.
    Voilà le screen sous IE :
    Image utilisateur

    Le screen sous FF :
    Image utilisateur

    Mon code html :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
      <title>Team-Heavy - Index</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" media="screen" type="text/css" title="CSS de Team-Heavy" href="css/css_team-heavy.css" />
    </head>
    <body>
    <div id="header">
    </div>

    <div id="menu">
            <div class="element_menu_titre">
                    <h3>Team-Heavy</h3>
            </div>
           
            <div class="element_menu_contenu">
                    <ul>
                            <li><a href="index.php">News</a></li>
                <li><a href="">Prochaines sorties</a></li>
                <li><a href="">S'inscrire</a>
                        <li><a href="">Se connecter</a>
                        <li><a href="../contact.php">Contact</a>
                        <li><a href="../admin/index.php">Administration</a>
                        </li>   
            </ul>
            </div>
                   
            <div class="element_menu_titre">
                    <h3>Sorties</h3>
            </div>

            <div class="element_menu_contenu">
                    <ul>
                            <li><a href="../index.php">News</a></li>
                <li><a href="../sites.php">Les sites</a></li>
                <li><a href="../projets.php">Projets en cours</a>
                        <li><a href="../livre.php">Livre d'or</a>
                        <li><a href="../contact.php">Contact</a>
                        <li><a href="../admin/index.php">Administration</a>
                        </li>   
            </ul>
            </div>
    </div>

    <div id="corps">
            <h3>Bienvenue sur Team-Heavy !</h3>
            <p><b><i>Où suis-je ?</i></b> Vous êtes actuelement sur le site de la Team-Heavy, c'est une petite communauté d'amis.<br/>
            <b><i>Ok, et qu'est ce que je peux faire ici ?</i></b> Beaucoup de choses :-) Commence par t'inscrire, tu auras alors accès à plus d'options. Sinon tu peux visiter le <a href="http://www.team-heavy.be/forumss">forum</a> de la Team-Heavy.
            </p>

            <h3>Voici les dernières news :</h3>
            <?php
            include("mysql.php");
            ?>
           
            <?php
            $retour = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5') or exit(mysql_error()); //On séléctionne tout de la table news, en ordre décroissant et on limite à 5 le nombre de news par page
            while ($donnees = mysql_fetch_array($retour)) //Ici on cré une boucle
            {
            ?>
    <center>
    <div id="news">
            <div class="news_titre">
            <p> <?php echo $donnees['titre']; ?> écrit par <a href="http://www.team-heavy.be/profil.php?pseudo=<? echo $donnees['auteur']; ?>"><? echo $donnees['auteur']; ?></a> <em> le <? echo date('d/m/Y à H:i', $donnees['timestamp']); ?></em> </p>
            </div>
           
            <div class="news_contenu">
                    <div class="news_contenu_categorie">
                    <p> <img src="img/<?php echo $donnees['categorie']; ?>    .jpg" alt="Image de la catégorie" /> </p>
                    </div>
                   
                    <div class="news_contenu_contenu">
                    <p> <?php echo $donnees['contenu']; ?> </p>
                    </div>
            </div>
    </div>
    </center>

    <?php
    } //On ferme la boucle
    ?>

           
           
    <div id="footer">
            <p>Copyright 2005-2006 <a href="http://www.Team-Heavy.be">www.Team-Heavy.be</a> - Tous droits réservés</p>
    </div>






    </body>
    </html>


    Et mon CSS :
    body
    {
            background-color: Black;
            color: White;
            width: 100%;
            height: 100pc;
    }

    a
    {
    color:#CCCCCC;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    font-style:italic
    }

    a:hover
    {
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:line-through;
    }

    p
    {
    font-size: 12px;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    }

    #news
    {
            width: 70%;
            border: 1px solid;
    }

    .news_titre
    {
            background-color: Maroon;
            border-bottom: 1px solid;
    }

    .news_titre p
    {
            margin: 0px;
            padding: 0px;
            text-align: left;
            padding-left: 3%;
    }

    .news_titre em
    {
            text-align: right;
    }

    .news_contenu_categorie
    {
            float: right;
    }

    .news_contenu_contenu
    {
            float: left;
            text-align: left;
    }

    #header
    {
            width: 100%;
            height: 100px;
            background: black;
            text-align: center;
            border-bottom: 1px solid;
            background-image: url(../img/banniere.jpg);
            background-repeat: no-repeat;
            background-position: center;
    }

    #menu
    {
            border: thin White;
            float: left;
            border-style: solid;
            width: 13%;
            border-left: none;
            border-bottom: none;
            border-top: none;
    }

    .element_menu_titre
    {
            border: thin;
            text-align: center;
            margin-bottom: 0px;
            padding-bottom: 0px;
            padding-top: 0px;
            border-bottom: 1px solid;
            background-color: Maroon;
            border-top: 1px solid;
    }

    .element_menu_titre h3 {
    margin: 0px;
    padding: 0px;
    }

    .element_menu_contenu
    {
            border: thin;
    }

    #corps
    {
            text-align: left;
    }

    #corps h3
    {
            text-align: center;
    }

    #corps b
    {
            background-color: Maroon;
    }

    #footer
    {
            text-align: center;
            width: 100%;
            border-top: 1px solid;
            border-bottom: 1px solid;
            padding: 3px;
            clear:both;
    }

    #footer p
    {
            margin: 0px;
    padding: 0px;
    }


    Voilà, désolé pour la longueur du message.

    Jespère que vous pourrez m'aider,

    Merci d'avance :)
    • Partager sur Facebook
    • Partager sur Twitter
    jp949
      22 décembre 2005 à 15:13:32

      tu as un div class="news_contenu" et pas de .news_contenu dans le css
      • Partager sur Facebook
      • Partager sur Twitter
      Hooli
        22 décembre 2005 à 15:15:37

        Ha oui effectivement. Je l'ai rajouté mais qu'est ce que je dois mettre dedans ?
        • Partager sur Facebook
        • Partager sur Twitter
        jp949
          22 décembre 2005 à 15:19:02

          essaie de l'enlever deja pour voir le resultat
          • Partager sur Facebook
          • Partager sur Twitter
          Hooli
            22 décembre 2005 à 15:22:01

            L'enlever ??
            Ben il n'y en avait pas --> fonctionne pas
            Après je l'ai mis (mais vide parce que je ne sais pas quoi mettre- --> fonctionne pas non plus
            Qu'est ce que je dois faire alors ?
            • Partager sur Facebook
            • Partager sur Twitter
            jp949
            Hooli
              22 décembre 2005 à 15:57:36

              Voilà, mais le problème est toujours le même.
              • Partager sur Facebook
              • Partager sur Twitter
              scaler
                22 décembre 2005 à 16:15:34

                Salut

                Pardonne moi, mais pourquoi as tu autant de balises inutiles ?
                Pourquoi pas tout simplement :

                 <div class="news_contenu">
                      <p><img src="img/<?php echo $donnees['categorie']; ?>.jpg" alt="Image de la catégorie" /><?php echo $donnees['contenu']; ?></p>
                 </div>



                .news_contenu p img
                {
                  float: right;
                  padding: 5px;
                }


                Le texte est de toute manière par défaut en text-align: left... Pour le reste, pas besoin de divite aigüe ;) .

                @+
                • Partager sur Facebook
                • Partager sur Twitter
                Hooli
                  22 décembre 2005 à 17:19:58

                  j'ai fais ca pour pouvoir mettre une couleur de fond seulement à la ligne du titre de la news... Il y a un autre moyen ?
                  Comment régler mon problème alors ?
                  • Partager sur Facebook
                  • Partager sur Twitter
                  scaler
                    22 décembre 2005 à 17:34:27

                    euh... tu rajoutes quatres divs supplémentaires juste pour mettre une couleur de fond au titre :(

                    Fais simplement :

                    <div id="news">
                            <p class="news_titre"><?php echo $donnees['titre']; ?> écrit par <a href="http://www.team-heavy.be/profil.php?pseudo=<?php echo $donnees['auteur']; ?>"><?php echo $donnees['auteur']; ?></a> <em> le <?hp echo date('d/m/Y à H:i', $donnees['timestamp']); ?></em> </p>
                           
                            <p><img src="img/<?php echo $donnees['categorie']; ?>.jpg" alt="Image de la catégorie" /><?php echo $donnees['contenu']; ?></p>
                            <p class="clear"></p>
                    </div>



                    .news_titre
                    {
                      background-color: #XXXXXX; /* couleur de fond */
                      /* autres propriétés */
                    }

                    #news p img
                    {
                      float: right;
                      padding: 5px; /* laisser un peu d'écart entre l'image et le reste*/
                    }

                    #news .clear
                    {
                      clear: right;
                    }
                     


                    J'ai rajouté le paragraphe avec la class clear car je crains les effets secondaires du flottant ;) .

                    bonne continuation.
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Ca fonctionne avec IE mais pas avec Firefox

                    × 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