Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème "dessus dessous"

Sujet résolu
Pl00b
    13 mai 2006 à 16:48:02

    J'ai un petit problème :)
    Je dispose d'un design sobre qui ne contient que 2 images, un logo et un spacer ^^.

    Ce design est entièrement codé avec du CSS et 2 images :p
    Il est donc facilement modifiable ^^

    Le problème, c'est ca, quand je tape trop de texte :

    Image utilisateur

    Voici mon code xHTML :




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>


      <title>
      C'est un test de nom - Slogan</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>


    <body>

    <div class="header">
            <img src="images/logo.jpg" alt="" />
    </div>

    <div class="menubar"><br />
    <a class="menu_bar"><strong></strong></a>
    </div>

    <div class="mainbody">
           
    <div class="leftmenu">
                   
    <div class="menuheader">
                            <strong>Navigation</strong>

                    </div>

                   
    <div class="menu">
                            <a href='index.php' class='menu'>&raquo;&nbsp;Accueil</a><a href='inscription.php' class='menu'>&raquo;&nbsp;Inscription</a><a href='login.php' class='menu'>&raquo;&nbsp;Espace membre</a><a href='faq.php' class='menu'>&raquo;&nbsp;FAQ</a><a href='reglement.php' class='menu'>&raquo;&nbsp;Réglement</a><a href='contact.php' class='menu'>&raquo;&nbsp;Contact</a>                </div>

                    </div>

           
    <div class="content">
                    <img src="images/spacer.gif" alt="" height="1" width="1" /><br />

                   
    <div class="menuheader" style="margin-top: 3px;">
                            <strong>- C'est un test de nom -</strong></div>

                   
    <div class="typing"><h1>Inscription :</h1>

    Inscrivez-vous dès maintenant sur C'est un test de nom et commencer à empocher de l'argent.<br />

    <h1>Informations de connexion :</h1>

    <form method="post" action="inscription_2.php">
    Login : <br /><input type="text" name="login"><br />
    Mot de passe : <br /><input type="password" name="password"><br />
    Adresse eMail : <br /><input type="text" name="email">

    <h1>Informations personnels :</h1>

    Nom : <br /><input type="text" name="nom"><br />

    Prénom : <br /><input type="text" name="prenom"><br />
    Adresse : <br /><input type="text" name="adresse"><br />
    Code postal : <br /><input type="text" name="code_ps"><br />
    Ville : <br /><input type="text" name="ville"><br />
    Pays : <br /><input type="text" name="pays"><br />

    <h1>Autres :</h1>

    Parrain : <br /><input type="text" name="parrain" value="test"><br />
    <input type="checkbox" name="reg"> J'accepte le réglement


    <h1>Code de sécurité :</h1>
    <img src="robot.php"><br /><br />
    Code de sécurité : <br /><input type="text" name="code_secure">
    <input type="hidden" value="NDY4NzUzMTI" name="code_verif">


    <br /><br />

    <input type="submit" value="Inscription">
    </form>
                    </div>
            </div>
    </div>

    <div class="footer">
           
    <div class="right">
                    <strong></strong>
            </div>

            - <strong>Powered by <a href="http://www.morangle.com">Morangle</a> -</strong>
    </div>

    </body>
    </html>


    Voici mon code CSS :




      <style type="text/css" media="all">
    body
    {
            margin-top: 0px;
            background-color: #E0EAEB;
            text-align: center;
    }
    body, div, a
    {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: #606363;
            font-size: 10px;
    }
    a.menu_bar
    {
            color: #FFCC00;
            text-decoration: none;
    }
    a.menu_bar:visited
    {
            color: #FFCC00;
            text-decoration: none;
    }
    a:visited
    {
            color: #606363;
    }
    div.header
    {
            background-color: #A0C2C4;
            margin-left: auto;
            margin-right: auto;
           
            width: 850px;
            height: 80px;
           
            border: 1px solid #7c9597;
            border-top: 0px;
    }
    div.menubar
    {
            background-color: #81adb0;
            height: 13px;
           
            width: 850px;
            border: 1px solid #7c9597;
            border-top: 0px;
           
            margin-left: auto;
            margin-right: auto;
           
            text-align: left;
            vertical-align: middle;
    }
    div.mainbody
    {
            background-color: #d3e1e1;
            width: 850px;
            border: 1px solid #7c9597;
            border-top: 0px;
            margin-left: auto;
            margin-right: auto;
    }
    div.footer
    {
            color: #606363;
            background-color: #A0C2C4;
            height: 13px;
           
            width: 850px;
            border: 1px solid #7c9597;
            border-top: 0px;
           
            margin-left: auto;
            margin-right: auto;
           
            text-align: left;
            vertical-align: middle;
            clear: both;
    }
    div.right
    {
            float: right;
    }
    div.leftmenu
    {
            float: left;
            margin-left: 6px;
            width: 210px;
           
            background-color: #b2cfd3;
            border: 1px solid #7c9597;
            border-top: 0px;
           
            text-align: left
    }
    div.content
    {
            margin-left: 222px;
            margin-right: 3px;
            background-color: #b2cfd3;

            vertical-align: top;

            border: 1px solid #7c9597;
            border-top: 0px;
            border-bottom: 0px;

            height: 500px;
    }
    div.menuheader
    {
            text-align: center;
            background-color: #f8ba1b;
            margin-left: 4px;
            margin-bottom: 3px;
            margin-right: 4px;
            margin-top: 4px;
            border: 1px solid #666535;
    }
    a.menu
    {
            display: block;
            margin-left: 4px;
            margin-right: 4px;
            text-decoration: none;
            border: 1px solid #b2cfd3;
    }
    a.menu:hover
    {
            display: block;
            background-color: #A0C2C4;
            font-weight: bold;
            border: 1px solid #7c9597;
    }
    div.typing
    {
            margin-left: 4px;
            margin-right: 4px;
            text-align: left;
    }
    div.template
    {
            float: left;
            width: 201px;
            height: 200px;
            background-color: #d3e1e1;
            border: 1px solid #7c9597;
            text-align:center;
    }
    div.center
    {
            text-align:center;
    }
    img.template
    {
            border: 1px solid #000;
    }  </style>


    Merci de votre aide :p
    • Partager sur Facebook
    • Partager sur Twitter
    WhyNot
      13 mai 2006 à 16:51:34

      C'est parce que tu définis la taille de ton contenu (height: 500px) sous internet explorer, ça fonctionne mais pas sous firefox...

      Tu dois utiliser une astuce


      div.content
      {
       height: 500px;
      }
      body>html div.content
      {
       height: auto;
       min-height: 500px;
      }


      La propriété min-height est connue sous Fierfox mais pas sous Internet Explorer.

      L'opérateur > n'est pas connu par Internet Explorer, il ne lit donc pas le contenu du {} qui le suit...
      • Partager sur Facebook
      • Partager sur Twitter
      Pl00b
        13 mai 2006 à 16:56:07

        Ce qui me donne :) :


        body
        {
                margin-top: 0px;
                background-color: #E0EAEB;
                text-align: center;
        }
        body, div, a
        {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                color: #606363;
                font-size: 10px;
        }
        a.menu_bar
        {
                color: #FFCC00;
                text-decoration: none;
        }
        a.menu_bar:visited
        {
                color: #FFCC00;
                text-decoration: none;
        }
        a:visited
        {
                color: #606363;
        }
        div.header
        {
                background-color: #A0C2C4;
                margin-left: auto;
                margin-right: auto;
               
                width: 850px;
                height: 80px;
               
                border: 1px solid #7c9597;
                border-top: 0px;
        }
        div.menubar
        {
                background-color: #81adb0;
                height: 13px;
               
                width: 850px;
                border: 1px solid #7c9597;
                border-top: 0px;
               
                margin-left: auto;
                margin-right: auto;
               
                text-align: left;
                vertical-align: middle;
        }
        div.mainbody
        {
                background-color: #d3e1e1;
                width: 850px;
                border: 1px solid #7c9597;
                border-top: 0px;
                margin-left: auto;
                margin-right: auto;
        }
        div.footer
        {
                color: #606363;
                background-color: #A0C2C4;
                height: 13px;
               
                width: 850px;
                border: 1px solid #7c9597;
                border-top: 0px;
               
                margin-left: auto;
                margin-right: auto;
               
                text-align: left;
                vertical-align: middle;
                clear: both;
        }
        div.right
        {
                float: right;
        }
        div.leftmenu
        {
                float: left;
                margin-left: 6px;
                width: 210px;
               
                background-color: #b2cfd3;
                border: 1px solid #7c9597;
                border-top: 0px;
               
                text-align: left
        }
        div.content
        {
                margin-left: 222px;
                margin-right: 3px;
                background-color: #b2cfd3;

                vertical-align: top;

                border: 1px solid #7c9597;
                border-top: 0px;
                border-bottom: 0px;

                height: 500px;
        }
        body>html div.content
        {
         height: auto;
         min-height: 500px;
        }
        div.menuheader
        {
                text-align: center;
                background-color: #f8ba1b;
                margin-left: 4px;
                margin-bottom: 3px;
                margin-right: 4px;
                margin-top: 4px;
                border: 1px solid #666535;
        }
        a.menu
        {
                display: block;
                margin-left: 4px;
                margin-right: 4px;
                text-decoration: none;
                border: 1px solid #b2cfd3;
        }
        a.menu:hover
        {
                display: block;
                background-color: #A0C2C4;
                font-weight: bold;
                border: 1px solid #7c9597;
        }
        div.typing
        {
                margin-left: 4px;
                margin-right: 4px;
                text-align: left;
        }
        div.template
        {
                float: left;
                width: 201px;
                height: 200px;
                background-color: #d3e1e1;
                border: 1px solid #7c9597;
                text-align:center;
        }
        div.center
        {
                text-align:center;
        }
        img.template
        {
                border: 1px solid #000;
        }


        Résultat, c'est pareille :(
        • Partager sur Facebook
        • Partager sur Twitter
        WhyNot
          13 mai 2006 à 16:58:48

          Essaie une fois en retirant ton vertical-align... (Tu ne sais pas le mettre en ligne?)
          • Partager sur Facebook
          • Partager sur Twitter
          Pl00b
            13 mai 2006 à 17:02:15

            Non ca marche pas :(

            P.S : moi je connais rien en CSS ^^
            • Partager sur Facebook
            • Partager sur Twitter
            strucky
              13 mai 2006 à 17:06:10

              Salut,

              Citation : WhyNot

              Tu dois utiliser une astuce


              div.content
              {
               height: 500px;
              }
              body>html div.content
              {
               height: auto;
               min-height: 500px;
              }


              Tu t'es gouré dans ton code, body ne peut sélectionner html puisque c'est son parent.

              Commeç a, c'est mieux^^

              div.content
              {
               height: 500px;
              }
              body>div.content
              {
               height: auto;
               min-height: 500px;
              }
              • Partager sur Facebook
              • Partager sur Twitter
              WhyNot
                13 mai 2006 à 17:07:06

                Je m'ai trompé :-°

                C'est html>body et non body>html

                *S'en va, honteux*

                Edit: je m'en suis rendu compte sans ton post :lol:
                • Partager sur Facebook
                • Partager sur Twitter
                Pl00b
                  13 mai 2006 à 17:08:29

                  Yahoo :D
                  Merci infiniment, ca marche :p

                  Thx ;-)
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Problème "dessus dessous"

                  × 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