Discussion :

[fredericmarcel]

Je voudrais afficher une zone de text au centre de la page.
A gauche de ce text (15px), il y a un div (ou p) qui indique le numéro de l'élément qui va être saisi et enregistré dans un array $elements;
Le numero est centré verticalement sur la textarea qui bien sûr reste centrée sur la page.
Je cherche depuis deux heures dans les tutorials et les forum et je n'y arrive pas.
Pouvez-vous m'aider ? Je suis sûr que la réponse est simple et j'aurai franchi un grand pas car c'est un problème que je vais retrouver souvent.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 <div style="text-align:center;">
         <div class="numero" style="display:block;">1</div>;
        <div class="saisie" style="display:inline-block;">
             <textarea id="zonetexte" active> </textarea>
        </div>
   </div>

Voici l'image de ce que je veux faire :


La zone grise est le div qui contient le numéro (à gauche) et le textarea (centré horizontalement dans la zone grise).
La div de la zone grise est centrée sur la page.

[Invité]

Bonjour,

... dans les tutorials et les forum ...

Tu voulais sans doute dire : "... dans les tutoriaux et les fori..."
à moins que ce ne soit : "... dans les tutoriels et les forums..."

• FAQ CSS - Positionnement

Une solution :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="boite">
  <div class="saisie">
    <span class="numero">12</span>
    <textarea id="zonetexte">zone de texte...</textarea>
  </div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
* { margin:0; padding:0; }
html, body {
  position:relative; 
  width:100%; height:100%; min-height:100%;
}
.boite {
  position:relative; 
  width:100%; height:100%;
  background:grey;
}
 
.saisie { 
  position:absolute; 
  width:500px; left:50%; margin-left:-250px;
  height:300px; top:50%; margin-top:-150px;
}
.saisie textarea { 
  display:block; 
  width:100%; height:100%;
  border:3px solid blue; border-radius:10px;
  padding:20px; box-sizing:border-box;
}
.saisie .numero {
  position:absolute; display:inline-block; 
  width:60px; height:60px; top:50%; margin-top:-30px;
  left:-80px;/*décalé à gauche*/
  text-align:center; font-size:300%; 
  line-height:60px; vertical-align:middle;
}

[fredericmarcel]

Merci. J'y suis presque.
Est-il possible de centrer la zone de texte sur la page ou au milieu de la boite d'une façon rigoureuse ?

code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* { margin:0; padding:0; }
html, body {
  position:relative; 
  width:100%; height:100%; min-height:100%;
}
.boite {
  position:relative; 
  width:100%; height:100%;
}
 
.saisie { 
  position:absolute; 
  width:400px; left:50%; margin-left:-207px;
  height:200px; top:50%; margin-top:-200px;
}
.saisie textarea { 
  display:block; 
  width:100%; height:100%;
  border:3px solid blue; border-radius:10px;
  padding:20px; box-sizing:border-box;
}
.saisie .numero {
  position:absolute; display:inline-block; 
  width:60px; height:60px; top:50%; margin-top:-30px;
  left:-80px;/*décalé à gauche*/
  text-align:center; font-size:300%; 
  line-height:60px; vertical-align:middle;
}

code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="boite">
  <div class="saisie">
    <span class="numero">1</span>
    <textarea id="zonetexte">zone de texte...</textarea>
  </div>
</div>

[fredericmarcel]

Comment enlever le rectangle dans les coins du border-radius.
Je n'arrive pas à insérer l'image dans le post.

[Invité]

???


Là, il me faut une copie d'écran...
Je ne vois pas de quoi tu parles.

N.B. Sur quel navigateur es-tu ?

[fredericmarcel]

Chrome

[Invité]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.saisie { 
  position:absolute; 
  width:400px; left:50%; margin-left:-207px;
  height:200px; top:50%; margin-top:-200px;
  border:3px solid blue; border-radius:10px;
  padding:20px; box-sizing:border-box;
}
.saisie textarea { 
  display:block; 
  width:100%; height:100%;
  border:0;
}

• http://codepen.io/jreaux62/pen/dYxeyx

[NoSmoking]

Bonjour,
je pense qu'il parle du cadre apparaissant lors du focus.

Dans ce cas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
textarea {
  outline:none;
  resize:none;
}

le resize:none c'est juste pour pas détruire la

au milieu de la boite d'une façon rigoureuse

[fredericmarcel]

Merci :l'outline a disparu.
Il ne me reste plus qu'à centrer le textarea au milieu du div et placer le numéro à gauche sans que le textarea ne quitte sa position centrale.
Et surtout à comprendre comment faire à chaque fois que le cas se reproduira.

[Invité]

Au fait, pour centrer :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  width:400px; left:50%; margin-left:-200px; /* -(width/2) */
  height:200px; top:50%; margin-top:-100px; /* -(height/2) */

[fredericmarcel]

Ca marge avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
width:400px; left:50%; margin-left:-200px;
  height:200px; top:50%; margin-top:-200px;

Mais comme ma difficulté était le centrage horizontal fixe, le problème est résolu.
Merci. Et bonne soirée.

[NoSmoking]

Les marges négatives pouvant occasionner des soucis d'affichage, j'aurais plutôt opté pour un CSS plus intuitif en ne sortant du flux que le numéro.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.saisie {
    position: relative;
    width: 400px;
    height: 200px;
    line-height: 200px;
    margin: 0 auto;
}
.saisie .numero {
    position: absolute;
    display: inline-block;
    margin: 0 auto;
    width:2em;
    left: -2em;
    font-size: 300%;
    text-align:right;
}
.saisie textarea {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid blue;
    border-radius: 10px;
    box-sizing: border-box;
    outline:none;
    resize:none;
}

Sinon...

fixe, le problème est résolu.

n'oublie donc pas le petit bouton magique

[fredericmarcel]

Ca marche. Mais trois petits problèmes
1- Le curseur est au centre verticalement et pas en haut du text area
2-Il y a un ascenseur à droite du textarea
3- Le numéro est trop à gauche (avant, il était trop près du textarea)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.saisie {
    position: relative;
    width: 400px;
    height: 200px;
    line-height: 200px;
    margin: 0 auto;
    margin-top: 10px;
}
.saisie .numero {
    position: absolute;
    display: inline-block;
    margin: 0 auto;
    width:2em;
    left: -2.5em;
    font-size: 300%;
    text-align:left;
}
.saisie textarea {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid blue;
    border-radius: 10px;
    box-sizing: border-box;
    outline:none;
    resize:none;
}

[fredericmarcel]

J'aime bien l'approche intuitive: je peux appuyer sur le bouton magique.