Partage
  • Partager sur Facebook
  • Partager sur Twitter

hauteur centrée

margin : auto, mais en hauteur

Sujet résolu
    13 février 2006 à 18:51:26

    Bijour,
    Pas compliqué : je voudrais faire un design avec une hauteur centrée (et compatible toutes résolutions) mais le margin : auto; ne s'appliquent pas aux heights

    Le problème doit être tout con, merci d'avance :)
    • Partager sur Facebook
    • Partager sur Twitter
      13 février 2006 à 20:23:02

      Salut !

      Malheureusement, il n'existe pour l'instant pas de solution, dû moins à ma connaissance.

      Sinon, ce que tu peux faire, c'est utiliser le positionnement absolute.

      Exemple :

      <html>
        <head>
        <title></title>
        </head>
        <body>
       
        <div style="width: 500px; height: 400px; border: 1px solid #00f; margin-top: -200px; top: 50%; margin-left: -250px; left: 50%; position: absolute"></div>

        </body>
      </html>
      • Partager sur Facebook
      • Partager sur Twitter
        13 février 2006 à 21:04:28

        C'est effectivement ce qui conviendrait le mieux mais y a quand même un gros défaut : ce sera pas compatible toutes résolution (enfiun, je crois pas).

        A moins que l'on trouve un rapport mathématique compliqué mais là j'ai pas la tête à le faire. Ce soir du moins

        J'essaierai demain et merci de ton aide :)
        • Partager sur Facebook
        • Partager sur Twitter
          13 février 2006 à 22:34:52

          Si, c'est compatible toute résolution.

          ;)
          • Partager sur Facebook
          • Partager sur Twitter
            13 février 2006 à 22:51:36

            Heu...
            Pourquoi ne pas utiliser le

            vertical-align:center;


            ???
            • Partager sur Facebook
            • Partager sur Twitter
              13 février 2006 à 23:15:27

              Parce que ça ne fonctionne pas, tout simplement.
              • Partager sur Facebook
              • Partager sur Twitter
                13 février 2006 à 23:27:13

                Ca marche très bien avec moi ... menfin o_O
                • Partager sur Facebook
                • Partager sur Twitter
                  14 février 2006 à 6:46:11

                  Je l'avais déjà essayé mais sans succès :-/

                  Après, ptét que je l'ai mal utilisé mais j'ai seulement précisé height : 100%; vertical-align : center;

                  Merci de votre aide, et je vais voir de ce pas si c'est compatible toutes résolutions :p
                  • Partager sur Facebook
                  • Partager sur Twitter
                    14 février 2006 à 7:42:03

                    le vertical-align ne fonctionne qu'avec la prpopriete display:table-cell; et encore tres mal sur IE sur FF ca doit amrcher body { height:100%;
                    margin:0; display:table-cell; vertical-align:middle;}
                    • Partager sur Facebook
                    • Partager sur Twitter
                      14 février 2006 à 8:12:12

                      Et c'est pas fait pour, surtout.
                      • Partager sur Facebook
                      • Partager sur Twitter
                        14 février 2006 à 9:42:15

                        moi j'ai une solution que j'utilise dans la chatbox de mon site poour dire "Pas de messages" :

                        <table border="0" width="100%" height="100%">
                          <tr>
                            <td align="center" valign="center">
                              Pas de messages dans la chatbox !
                              <!-- On peut bien sûr mettre le texte que l'on veut avec le mise en forme des img, etc... tout quoi ! -->
                            </td>
                          </tr>
                        </table>


                        ++ :)
                        • Partager sur Facebook
                        • Partager sur Twitter
                          14 février 2006 à 9:45:49

                          Citation : php5

                          moi j'ai une solution que j'utilise dans la chatbox de mon site poour dire "Pas de messages" :

                          <table border="0" width="100%" height="100%">
                            <tr>
                              <td align="center" valign="center">
                                Pas de messages dans la chatbox !
                                <!-- On peut bien sûr mettre le texte que l'on veut avec le mise en forme des img, etc... tout quoi ! -->
                              </td>
                            </tr>
                          </table>


                          ++ :)



                          C'est un design en tables, je pense qu'il recherche de l'aide pour du css ;)


                          Sinon je vois pas pourquoi tu veux centrer ton design en hauteur, celà signifie qu'il y aura une frame ou alors peu de texte, tu peux essayer le position:absolute
                          • Partager sur Facebook
                          • Partager sur Twitter
                            14 février 2006 à 15:44:19

                            Merci @Lyric, c'est nickel :)

                            Et désolé, j'avais pas penser à aller chercher dans alsacréation :-/
                            • Partager sur Facebook
                            • Partager sur Twitter

                            hauteur centrée

                            × 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