28112 sujets

CSS et mise en forme, CSS3

Centrer un textArea dans un div et placer à sa gauche un paragraphe

Pages :
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 (1) 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.

 <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>
salut,

peut être l'utilisation de :before sur ta div pourrait combler ton besoin ? Si tu peux mettre un exemple sur codepen je suis preneur.
Modifié par JENCAL (30 Nov 2015 - 12:32)
Merci.
J'ai développé mon site depuis plusieurs années avec flash/actionscript2.
Je veux simplement le faire migrer sur html/css/javascript.
Je bute constamment sur les problèmes de mise en page et je perds un temps fou.
Existe-t-il un éditeur graphique simple qui me permettrait de dessiner ce que je veux créer et me donnerait les codes html et css?
Ca me simplifierait vraiment la vie. Et je pourrais alors montrer ce que je veux faire dans le forum pour avoir une aide qui me permet d'avance au lieu de faire du sur-place.
Un éditeur graphique html/css en open source serait une bénédiction.
Commencer la semaine en ramant, c'est pas de la tarte Smiley biggrin
Oui il existe dreamweaver d'adobe. Je le trouve pas 100 % efficace (mais il est bien).
après open source je connais pas.
Modifié par JENCAL (30 Nov 2015 - 12:43)
Voici l'image de ce que je cherche à réaliser.
Je suis certain que c'est tout simple, mais je ne sais pas comment m'y prendre.

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.
Modifié par fredericmarcel (30 Nov 2015 - 14:48)
Le number 1 est au-dessus de la textarea au lieu d'être à gauche et aligné verticalement au centre de la textarea..


 <div class="content">
        <div class="numero">
        1
        </div>
       <textarea class="box"></textarea>
    </div>


 .box {
         margin: auto;
        text-align: center;
        width: 400px;
        height: 200px;
        border: 5px solid blue;
        border-radius: 10px;
        padding: 5px;
        font-family: Arial;
        font-size: 30px;
         margin_top = 30px;
     }  
 .numero{
        margin-top: 35px;
      content: "1";
      font-family: Arial;
      font-size: 50px;  
    }
  .content{
         margin: auto;
        text-align: center;
        padding-left: 0px;
        margin-top: 10px;
    }

Modifié par fredericmarcel (30 Nov 2015 - 15:18)
Est-ce que je peux créer un script javascript pour positionner le numéro et la textarea comme bon me semble comme je le faisais avec actionscript ?
JENCAL a écrit :
Alors voila plus simple !

http://codepen.io/anon/pen/vNoRdM

avec display table et display: table-cell


Peux-tu enlever la div et le numéro 1.
Ce que je veux, c'est simplement une textarea centrée sur la page avec un nombre 1 à sa gauche.
C'est basique, non ?
J'apprécie beaucoup ton aide. J'espère que nous allons y arriver. Smiley smile

La zone de texte est alignée à gauche et pas centrée sur la page.
Si je fais "margin:auto" pour le div "content" c'est l'ensemble du numéro et de la textarea qui est centré.La textarea est donc un peu à droite
Modifié par fredericmarcel (30 Nov 2015 - 16:00)
fredericmarcel a écrit :


Peux-tu enlever la div et le numéro 1.


tu peux également l'enlever toi Smiley smile et oui , cest "très basique" je l'ai fais en 5 minutes. de 3 manière différentes : avec le :before, avec des float left, avec des display table.

tu peux gérer du css avec Jquery également. mais pour ce que tu veux, c'est plus galère.
ActionScript c'est plus gérer depuis 10 ans. y'a bien une raison.
Modifié par JENCAL (30 Nov 2015 - 16:01)
J'ai enlevé le rectangle numéro 1.
Mais la textarea est toujours à gauche et pas centrée sur la page.

En ce qui concerne actionscript, ça fonctionnait bien. Je développe une appli pour tablette et comme flash est bloqué par ios et android, j'ai été forcé de migrer. C'est un moment difficile à passer, mais je suis patient et tenace.
Je ne développe que cette appli et je n'ai donc pas le même profil et les mêmes besoins que les développeurs web en général.
Je trouve tout de même incroyable comment les choses sont plus compliquées avec html/css.
J'aimerais bien tout positionner ou je veux avec javascript si c'est possible.
après le débat n'est pas utile ici, car le pourquoi du comment du html / css, c'est traité des milliards de fois.
c'est bien plus propre et maintenable d'avoir le style d'un coté et la forme de l'autre.
Comme je disais si tu souhaite faire du css/javascript intéresse toi à Jquery. (Avec javascript tu peux aussi, mais tu va faire des trucs en 10 lignes en js au lieu de 2 en css, donc cela sera encoooooore pluuuus long).

http://codepen.io/anon/pen/vNojKO
Si c'est trop à droite, rajoute un padding right sur content2./
Merci.
La zone de texte n'est pas centrée sur la page. C'est l'ensemble number + textarea qui est centré.
Si je rajoute du padding-right pour le number alors la textarea se décentre encore plus.
Il faudrait vraiment que le number et la textarea soient indépendants l'un de l'autre et que l'on puisse centrer le textarea sur la page et placer le number à sa gauche avec un espace d'une dizaine de pixels entre les deux.
Mais sans que le textarea ne change sa position au milieu de la feuille.
Au moins, le problème est posé avec précision.

C'est tellement facile de centrer la textarea sans numéro.
Je ne comprends pas pourquoi c'est si difficile de la laisser centrée et de rajouter un numéro à gauche.
Quelque chose m'échappe ?
Modifié par fredericmarcel (30 Nov 2015 - 16:49)
Je suis certain que lorsque j'aurai terminé la migration de mon appli, je serai beaucoup plus à l'aise avec html5/css3. Ence moment, c'est le parcours du combattant.
Pages :
Sujet clos
Aller à