Partage

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

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
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

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.

pingouin != manchot
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

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

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 :)

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