Partage
  • Partager sur Facebook
  • Partager sur Twitter

div qui se déplace quand on écrit du texte

Sujet résolu
    12 mars 2018 à 18:20:07

    Bonsoir, j'ai un problème avec mes box :

    dés le moment ou j'écris du texte à l'intérieur de l'une des box ils se décalent vers le bas, quelqu'un serait pourquoi ?  :

    j'aimerais savoir aussi si il est possible de créer d'autres colonnes collé  avec   la box à gauche svp, si oui comment ?

    Merci d'avance.

    HTML :

    <html>
       <head>
           <title> formulaire d'inscrption</title>
           <link href="test.css" rel="stylesheet" media="all" type="text/css" />
           <meta charset="utf-8">
       </head>
    
    
       <body>
    
    
    
    <div class="bloc">
       <div class="column-left">
        TEXTE 
    
       </div>
    
       <div class="column-right">
     
       
     </div>
    
    </div>
    
     
     
     
       </body>
    </html>

    CSS:

    .bloc{
      margin: 0 120px 0 120px;
    }
    
    .column-left{
    
        display: inline-block;
        border:2px solid red;
        width: 45%;
        height: 20%;
    }
    
    .column-right{
        display: inline-block;
        border:2px solid red;
        width: 45%;
        height: 20% ;
         }
    
    
     
    
     
    
    
    
    




    -
    Edité par FarCry 12 mars 2018 à 18:23:51

    • Partager sur Facebook
    • Partager sur Twitter
      12 mars 2018 à 18:24:30

      Salut ! 

      J'ai juste copier coller ton code sur CodePen et aucun soucis ^^ 

      https://codepen.io/MaxBresil/pen/eMpzMJ

      • Partager sur Facebook
      • Partager sur Twitter
        12 mars 2018 à 18:38:43

        Aucun souci si on met du texte dans la deuxième div. Mais si on n'en met pas, le souci est présent.

        C'est à cause du vertical-align qui a par défaut la valeur baseline.

        Appliques un vertical-align: top; et le problème est réglé.

        Sinon tu peux aussi, au lieu de les mettre en display: inline-block, appliquer un display: flex sur le .bloc.

        C'est une autre solution.

        • Partager sur Facebook
        • Partager sur Twitter
        Dev Web Full Stack ( si si c'est possible )
          12 mars 2018 à 19:16:04

          BoOYa a écrit:

          Aucun souci si on met du texte dans la deuxième div. Mais si on n'en met pas, le souci est présent.

          C'est à cause du vertical-align qui a par défaut la valeur baseline.

          Appliques un vertical-align: top; et le problème est réglé.

          Sinon tu peux aussi, au lieu de les mettre en display: inline-block, appliquer un display: flex sur le .bloc.

          C'est une autre solution.


          Je n'avais pas vu ^^ J'ai aussi appris quelque chose ! Merci :)

          (J'utilise tout le temps le display: flex en même temps ^^)

          -
          Edité par MaxBresil 12 mars 2018 à 19:18:14

          • Partager sur Facebook
          • Partager sur Twitter
            13 mars 2018 à 20:20:53

            Merci pour votre aide !

            Mais pourquoi quand j'essaie de mettre une deuxième box en dessous  je n'y arrive pas : 

            Elle se positionne directement dans la box de gauche alors que moi je voudrais qu'il se positionne en dessous avec les mêmes dimensions...

            HTML :

            <html>
               <head>
                   <title> formulaire inscription php </title>
                   <link href="test.css" rel="stylesheet" media="all" type="text/css" />
                   <meta charset="utf-8">
               </head>
            
            
               <body>
            
            
            
            <div class="bloc">
              <div class="column-left">
               <div class="content"> MON TITRE
               </div>
            <div class="column-left2">
              MON TITRE 2
            
            </div>  
            
            
              </div>
              <div class="column-right">
              </div>
            </div>
            
            
            
             
             
               </body>
            </html>

            CSS:

            .bloc{
              margin: 0 120px 0 120px;
            }
             
            .column-left{
             
                display: inline-block;
                border: 2px solid red;
                width: 45%;
                height: 100px;
                    vertical-align: top;
            }
             
            .column-right{
                display: inline-block;
                border: 2px solid red;
                width: 45%;
                height: 100px;
                    vertical-align: top;
            }
            
            
            .content{
                background-color: red;
                font-family: impact;
                font-size: 20px;
                color: white;
                text-align: center;
            }
            
            
            .column-left2{
             
                display: inline-block;
                border: 2px solid red;
                width: 45%;
                height: 100px;
                vertical-align: top;
            }
            
            




            -
            Edité par FarCry 13 mars 2018 à 20:24:21

            • Partager sur Facebook
            • Partager sur Twitter
              Staff 13 mars 2018 à 21:24:08

              Bonjour,

              tu as mis la div de classe "column-left2" dans celle de classe "column-left", donc c'est normal.

              Pense à mieux indenter ton HTML, tu y verras plus clair :)

              • Partager sur Facebook
              • Partager sur Twitter
              Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

              div qui se déplace quand on écrit du texte

              × 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