Partage
  • Partager sur Facebook
  • Partager sur Twitter

Postionnement div IE & FF

Sujet résolu
AnSoFy
    15 mai 2006 à 10:11:12

    Bonjour, je vous expose mon probleme, j'ai beau le tourner dans tous les sens je vois pas ce qui cloche.
    En fait sous IE, mon pied de page est à la bonne place : en bas
    Sous FF, il remonte sur le menu vertical et sur le corps du site.

    Voilà le Lien

    Je vous donne aussi mon code CSS


    /* Page CSS */

    body
    {
       width: 860px;
       margin:auto;
       margin-top: 30px;   
       margin:10px;
       
       background-image:url("img/fond_jaune.png");
       background-repeat:repeat;
       
       color:#000000;
       font-family: "MS Serif", Arial, "Arial Narrow", "Times New Roman";
       font-size: small;
       text-align:justify;
    }





                                                    /* Effets sur les différentes parties du site */

    #top
    {
       width: 760px;
       height: 60px;
       margin-bottom: 30px;
       background-image:url("img/ban_arenejaune.png");
       background-repeat: no-repeat;
       border-bottom: 1px solid #FF0000;
       border-top: 1px solid #FF0000;
    }




    #menuH
    {
            width: 760px;
            height: 20px;
            border-bottom: 1px solid #FF0000;
        border-top: 1px solid #FF0000;

    }

                   
    #global  /* Pour voir ou se situe le menu vertical et le corps du site */
    {
                    width:760px;
                    margin-top:30px;
                    margin-bottom:30px;
           
    }

    #menuV
    {
                    float:left;
                    width: 120px;
                    height: 240px;
           

            margin-top:10px;
            margin-bottom:10px;
           
            border-right: 1px solid #FF0000;
           
    }

    #corps
    {
            width: 580px;
        height: 240px;
        margin-left: 140px;
            margin-top:10px;
            margin-bottom:10px;

    }


    #credits
    {
                            clear:both;
                       width: 760px;
                       height: 20px;
                       padding:0px;
                       border-bottom: 1px solid #FF0000;
                       border-top: 1px solid #FF0000;
                       text-align:right;

    }


                                            /* Effet sur les liens */

    a
    {
            text-decoration:none;
            color:#000000;
    }
           
           
    a:hover /* Liens au passage de la souris */
    {
                    text-decoration: underline;
                    font-bolder:bolder;
    }



                                            /* Effet sur la liste */

    ul {
            margin: 0px;/*suppression des marges par défaut*/
            padding: 0px;
    }

    li {
            list-style-type: none;/*suppression des puces*/
                    padding-left:10px;
            width: 100%;/*pour occuper toute la largueur du bloc*/
            margin-top: 10px;/*pour écarter les uns des autres*/

    }

                                    /* Effets sur les titres */
                                   
    h1
    {
    }

    h2
    {
    }
                                   
    h3
    {
            text-align:center;
            font-size: medium;
            border-bottom: 1px solid #FF0000;
            border-top: 1px solid #FF0000;

    }

    h4
    {
    }


    Et le code Xhtml


    <head>
     
    <title>Projet</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <!-- Ci-dessous le design "par défaut" du site -->
       <link rel="stylesheet" media="screen" type="text/css" title="Mécanique" href="mdp.css" />
    </head>

    <body bgcolor="#FFFFFF" text="#000000">



    <div id="top">
      <!-- Banniere du site -->

    </div>

    <!-- ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤ -->
    <div id="menuH">
      <!-- Menu Horizontal -->
      <div align="center">-- <a href="liens.htm">Liens</a> -- <a href="maj.htm">Mise
        à Jour</a> -- Plan du site -- <a href="inforest.htm">Inforest</a> -- </div>
    </div>
    <!-- ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤ -->
    <div id="global">
                                            <div id="menuV">
                                            <!-- Menu Vertical -->
                                           
        <p>&nbsp;</p>
    <h3>Le Collège</h3>
            <ul>
                   
          <li><a href="col_hist.htm">Son Histoire</a></li>
                   
          <li><a href="col_admin.htm">Administration</a></li>
                   
          <li><a href="col_reg.htm">Réglement Intérieur</a></li>
                   
          <li><a href="col_salinfo.htm">Salle Informatique</a></li>
                   
          <li><a href="col_salmus.htm">Salle de musique</a></li>
            </ul>
    <h3>Le C.D.I.</h3>
            <ul>
                   
          <li><a href="cdi_fonct.htm">Fonctionnement</a></li>
                   
          <li><a href="cdi_bcdi.htm">B.C.D.I.</a></li>
                   
          <li><a href="cdi_charte.htm">Utilisation d'Internet</a></li>
                   
          <li><a href="cdi_livres.htm">Livres à lire</a></li>
            </ul>
    <h3>Les Projets</h3>
    <h3>Activités</h3>
            <ul>
                   
          <li><a href="act_journal.htm">Le Journal</a></li>
                   
          <li><a href="act_expo.htm">Exposés</a></li>
                   
          <li><a href="act_clubs.htm">Les Clubs</a></li>
              <li><a href="actu_reale.htm">Réalisé par les élèves</a></li>
            </ul>
    <h3>Manifestations</h3>
    <h3>S.E.G.P.A.</h3>
            <ul>
                   
          <li><a href="sepga_pres.htm">Présentation</a></li>
            </ul>
    <h3>C.R.O.P.S</h3>
            <ul>
                    <li>Présentation</li>
            </ul>



                            </div>
    <!-- ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤ -->
                                           
      <div id="corps">
        <!-- Corps du site -->
        <h1>Bienvenue sur le site du Coll&egrave;ge Mont Duplan &agrave; N&icirc;mes.</h1>
        <p>De nombreuses pages de ce site sont encore en construction, son &eacute;volution
          est permanente.</p>
        <p>Bient&ocirc;t, d&eacute;couvrez sur ce site :</p>
        <p>Les informations Administratives. <br />
          L'ensemble des activités du Collège <br />
          Des articles rédigés par les élèves</p>
       
      <p>Si vous d&eacute;sirez re&ccedil;evoir les nouvelles informations administratives,
        p&eacute;dagogiques du Coll&egrave;ge Mont Duplan, directement par e-mail,
        n'h&eacute;sitez pas &agrave; remplir <a href="http://membres.lycos.fr/montduplan/mail/form.html" target="_blank">ce
        formulaire</a>.</p>
       
      <p>L'ancien site est toujours en ligne, vous pouvez vous y rendre en cliquant
        <a href="http://perso.wanadoo.fr/montduplan/site/premiere.htm">ici</a>.</p>
        <p>La navigation de ce site est optimisé avec les navigateurs Firefox Mozilla
          et Netscape.</p>

      <p><b>Déclenchement du plan particulier de mise en sureté au sein de l'établissement :</b>
      inondations, incendies de matières dangereuses à proximité du collège etc... <br />
      Soyez informé en temps réel de toute évolution en cliquant
        <a href="http://membres.lycos.fr/montduplan/news/news.php" target="_blank">ici</a></p>

              
      <a href=http://www.quick-web.com/ target=_new><img src="http://compteur.quick-web.com/?login=montduplan" border=0 align="middle"></a>
        </div>

    </div>
    <!-- ¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤$ -->
    <div id="credits">
      <!-- Un peu de pub pour moi quand même -->
      Ce site est réalisé par <a href="mailto:">ASP</a>
    </div>

    </body>
    </html>


    Merci de votre aide :)
    • Partager sur Facebook
    • Partager sur Twitter
    strucky
      15 mai 2006 à 12:39:45

      Salut,

      Utiles un min-height pour ton corps d'une hauteur égale à la taille de ton menu.

      #corps
      {
         width: 580px;
         height: 600px;
         margin-left: 140px;
         margin-top:10px;
         margin-bottom:10px;
      }

      #global>#menu{
        height: auto;
        min-height: 600px;
      • Partager sur Facebook
      • Partager sur Twitter
      AnSoFy
        15 mai 2006 à 13:43:00

        Je ne connaissais pas cette fonction, c'est vrai qu'elle est bien utile ! merci :D
        • Partager sur Facebook
        • Partager sur Twitter
        streeter
          15 mai 2006 à 14:30:20

          Citation : Pas de titre

          #global>#menu



          sa veut dire quoi??
          • Partager sur Facebook
          • Partager sur Twitter
          strucky
          AnSoFy
            15 mai 2006 à 16:49:16

            Oh le bug bug plus :)
            • Partager sur Facebook
            • Partager sur Twitter
            streeter
              15 mai 2006 à 17:03:10

              Merci

              lol encore une fois IE n'est pas à jour pour ça ^^
              • Partager sur Facebook
              • Partager sur Twitter

              Postionnement div IE & FF

              × 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