Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème d'affichage sous les "vieux IE"

Le corps se place en dessous du menu.

Sujet résolu
    16 octobre 2006 à 18:26:08

    Bonjour, :p

    sous IE le dernier avec les onglets mon site s'affiche "bien" et sous Mozilla c'est parfait. :D
    Or certains de mes amis me disent que le corps passe en dessous et/ou quand je réduis ma page ça me fait la même chose ! :colere2:

    Voici mes codes, je vous remercie d'avance !

    <!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>Jeux</title><!-- Le titre de la page ici -->
                    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
                    <link rel="stylesheet" media="screen" type="text/css" title="essai" href= "CSS/index.css" /> <!-- Ici on a le renvoie au CSS-->
                    </head>
                    <!--Séparation-->
                    <body>
                            <div id="en_tete"><!--tout en haut --> <!-- ici on va mettre notre bannière (si un jour on l'a à vrai dire)-->
                                    <p class="banniere"><img src="IMAGES/banniere.bmp" alt="Banière du site"/></p>
                            </div>
                    <!--Séparation-->
                    <div id="menu">
                            <div class="element_menu">
                                    <h4><img src="IMAGES/etoile.gif" alt="."/> Autres</h4> 
                                            <ul>
                                                            <li><a href="www.essai.com">Acceuil et News</a></li>
                                                            <li><a href="www.essai.com">Liens extérieurs et Remerciements</a></li>
                                                            <li><a href="www.essai.com">Jeux</a></li>
                                                            <li><a href="www.essai.com">L'Equipe</a></li>
                                            </ul>
                            </div>
                            <!--séparation-->
                            <div class="element_menu">
                                    <h4><img src="IMAGES/etoile.gif" alt="."/> Les cours</h4>       
                                            <ul>
                                                            <li><a href="www.essai.com">Français</a></li>
                                                            <li><a href="www.essai.com">Histoire</a></li>
                                                            <li><a href="www.essai.com">Géographie</a></li>
                                                            <li><a href="www.essai.com">Education Civique</a></li>
                                                            <li><a href="www.essai.com">Mathématiques</a></li>
                                            </ul>
                            </div>
                    </div>
                    <!--séparation-->
                    <div id="corps"> <!-- ici on est dans le centre de la page, le corps --> <!-- ici on aura tout notre texte les news etc... -->
                    <h1>Jeux</h1>
                    <p>En construction : un petit jeu d'énigme <img src="IMAGES/MDR.PNG" alt=":D"/> </p>
                    </div>
                    <!--Séparation-->
                    <div id="pied_de_page"> <!-- on se situ tout en bas, dans la derniere partie -->
                            <p><span class="enbas"> Cette page a été codée par <a href="www.essai.com">Gabinou</a></span></p>
                            <p><span class="droite">Vous êtes au bout de la page, maintenant il va falloir remonter en faut. Allez je vous aide.</span></p><!-- faut que je fasse une ancre -->
                           
                    </div>
            </body>
            </html>


    body
    {
            font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif;
            font-size:0.8em;
            margin: 10px;
            background: repeat-x;
            background-color: #E6E6FA;
    }
    #menu
    {

            float: left;
            width: 13%;
            margin-top: 20px;
            margin-left:0.5%;
            margin-right:0.5%;
            max-width: 168px;
    }
    #menu h4
    {
            line-height: 20px;
            margin: 0;
            padding-top: 6px;
            padding-left:10px;
            padding-bottom:4px;
            vertical-align: bottom;
            color:#4B0082;
            background-color: #F4F9FD;
            border:1px solid rgb(150,153,154);
    }
    #menu ul
    {
            list-style-type: none;
            list-style-position: inside;
            padding: 0;
            margin-left: 5px;
    }
    a:link
    {
            color: blue;
            text-decoration: underline
    }
    a:visited
    {
            color: blue;
            text-decoration: underline;
    }
    a:hover
    {
        color: #D2691E;
        text-decoration: underline;
    }
    #menu .element_menu
    {
            background-color:#F4F9FD;
            padding: 0;
            margin: 0px;
            margin-bottom:10px;
            border: 1px solid #848686;
    }
    #corps
    {

            width:83%;
            max-width: 83%; 
            background-color: #F4F9FD;
            border: 1px solid rgb(234,244,251);
            padding: 5px;
            padding-bottom:25px;
            overflow:hidden;
            float: right;
            margin-top: 20px;
            margin-right: 15px;
            margin-bottom: 10px;
            border: 1px solid #848686;
    }
    #pied_de_page
    {

            clear: both;
            background-color: #F4F9FD;
            border: 2px solid #848686;
            padding: 5px;
            margin-right: 15px;
            margin-bottom: 20px;
            width: 83%;
            max-width: 83%;
            float: right;
    }
    h1
    {
            text-align: center;
            margin-top:5px;
            margin-bottom:35px;
            font-family:Arial, 'Times New Roman', Times, serif;
            color: #4B0082;
    }
    h2
    {
            text-align: center;
            margin-top:5px;
            margin-bottom:35px;
            font-family:Arial, 'Times New Roman', Times, serif;
            color: #4B0082;
    }
    #menu a:link
    {
            color: #000000;
            text-decoration: none;
    }
    #menu a:visited
    {
            color: #000000;
            text-decoration: none;
    }
    #menu a:hover
    {
        color: #506f82;
        text-decoration: none;
            font-weight:bold;
    }
    .gauche
    {
            text-align: left;
    }
    .droite
    {
            text-align: left;
    }
    .enbas
    {
            text-align: center;
    }
    .construction
    {
            text-align: center;
    }
    .banniere
    {
            text-align: center;
    }
    .img
    {
            text-align: center;
    }
    .underline1
    {
            text-decoration: underline;
    }
    .underline
    {
            text-decoration: underline;
            color: green;
    }
    .rouge
    {
            color: red;
    }
    • Partager sur Facebook
    • Partager sur Twitter
      16 octobre 2006 à 20:05:33

      Et les "vieux IE", ce sont quelles versions ?

      • Partager sur Facebook
      • Partager sur Twitter
        16 octobre 2006 à 20:17:50

        Citation : Zolix

        (...) et/ou quand je réduis ma page ça me fait la même chose ! :colere2:


        Ce bout de la phrase me rend perplexe. Si c'est un problème au niveau des dimensions, l'erreur ne vient pas de versions d'IE anciennes que possèderaient tes amis ; mais qu'ils utilisent plus vraisemblablement des résolutions d'écran différentes ou qu'ils réduisent la taille de leur fenêtre.

        Quoi qu'il en soit, vérifie les dimensions de tes blocs et vérifient que le tout rentre dans la largeur fixée du conteneur.
        Je trouve notamment douteux l'utilisation de largeurs en pourcentage pour chaque élément, à tort et à travers. Sans m'attarder, un design extensible ne signifie pas disproportionné ; une largeur variable pour ton menu me semble une mauvaise idée et inapproprié, en plus des soucis que cela peut te créer au niveau des dimensions.

        Tchaw,
        atly
        • Partager sur Facebook
        • Partager sur Twitter

        Problème d'affichage sous les "vieux IE"

        × 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