Textarea et élargissement en hauteur d'une cellule de tableau

Bonjour,

Je cherche à insérer dans un tableau à 1 colonne et 2 lignes un textarea (dans la seconde ligne). Ce textarea est en position absolute pour le placer horizontalement dans la cellule. Je spécifie également la hauteur de ce textarea, et là c'est le drame: le text area n'élargit pas la hauteur de la cellule du tableau et s'affiche par dessus (et donc dépasse largement).

Si je le mets en position relative ça marche, mais je ne peux plus le placer horizontalement de manière "propre" (il y a du texte avant et la mise en page devient scabreuse).

Qu'est ce que je fais mal?

Le code HTML:

<FORM name="forum">
            <TABLE class="tableauprinci">
                <TR><TD>
                    <DIV class="cadre">Titre:<INPUT type="text" id="titre"></DIV>
                </TD></TR>
           
                <TR><TD>
                    <DIV class="cadre">Message:<Textarea id="message"></textarea></DIV>
                </TD></TR>
            </TABLE>
        </FORM>

Le code CSS:

.tableauprinci
{
  position                  :absolute;
  left                        :50%;
  top                        :50px;
  margin-left              :-200px;
  width                     :400px;
  border                    :1px solid black;
}


.cadre
{
  position                  :relative;
  border                    :2px solid black;
  background-color     :#b9b9f1;
  width                     :400px;
  padding                   :12px;
  font-family               :Tahoma;
  font-size                 :14px;
}


input
{
  position                  :absolute;
  width                     :300px;
  left                      :100px;
  border                    :1px solid black;
  background-color          :#e7e7fb;
}


textarea
{
  position                  :absolute;
  width                     :300px;
  height                    :200px;
  left                        :100px;
  border                    :1px solid black;
  background-color          :#e7e7fb;
}

Modifié par stinlolo (20 Jul 2010 - 18:51)

Je n'ai pas vérifier complètement ton code »
Ton code devrais être revu. Tant en CSS qu'en HTML. Faire des choix logiques concernant les scripts de mise en page (*.css) et d'affichage (*.html).

Cependant voici un bout de ton code avec des changements »

.tableauprinci
{
  position:absolute;
  left:50%;
  top:50px;
  margin-left :-200px;
  width :400px;
  border :1px solid black;
}

.cadreTitre
{
  border :2px solid black;
  background-color:#b9b9f1;
  width:400px;
  padding:12px;
  font-family:Tahoma;
  font-size :14px;
}

.cadreMessage
{
   border :2px solid black;
  background-color :#b9b9f1;
  width:400px;
  height:200px;
  padding:12px;
  font-family:Tahoma;
  font-size:14px;  
}

input
{
  float:right;
  width:300px;
  border :1px solid black;
  background-color:#e7e7fb;
}

textarea
{
  float:right;
  width:300px;
  height :200px;
  border:1px solid black;
  background-color:#e7e7fb;
}

Avec les résultats que voici »



Ne crois pas ici que ton code est passer en revue, celui-ci devrais être redéfini totalement. N'oublis pas les tutoriels de Alsacréations qui vont te donner une façon de faire plus logique et plus solide.

Ce que je t'ai offert n'est qu'un dépannage, temporaire. Revois ton source.

++ zardoz.
Modifié par zardoz (20 Jul 2010 - 20:11)

Merci beaucoup, je prends note de ton conseil.


+

En générale les tableaux servent surtout pour le chargement des données. Issus d'un fichier XML ou d'une BDD.

Toi tu imbriques des div's dans des cellules d'un tableau. Fais attention aux imbrications de ce genre. La raison d'être des tableaux est le chargement des données de masse. On peut quand même utiliser les tableaux pour des chargements de champs de saisis, de textes et d'images, mais il y a d'autres façons de faire. Plus léger en écriture.

Voici un exemple ( capture d'écran d'un de mes exercices ), sur l'utilisation des tableaux.



Celui-ci est écrit en xml et porte aussi l'extension (*.xml). Il est tout simplement formater avec une feuille de style (*.xsl) et, les fichiers xml et xsl sont compiler avec saxon (version 9).

L'intérêt ici sera le chargement des données XML. Ceux-ci pourraient provenir d'une BDD.
C'est la raison majeur des tableaux, que de charger des données de masse.

Un autre intérêt de l'exercice est l'automatisation de certaines tâches. En effet la colonne économies et la colonne totale des économies n'existe pas dans le fichier xml. Ces deux colonnes ont des fonctions de calculs automatique issus du fichier (*.xsl).

Dans ton cas une façon de faire plus léger en écriture serait la bienvenue.
Ce ne sont que des suggestions ici, rien n'est vraiment couler dans le béton.

N'hésite pas à exercer et à comprendre les techniques de base offert par Alsacréations.

++ zardoz.
Modifié par zardoz (20 Jul 2010 - 21:56)

C'est très sympathique à toi d'avoir pris le temps de développer une réponse à ma question, je te remercie une fois encore.

Au départ j'avais fait sans tableau et uniquement avec des blocks encastrés les uns dans les autres, mais bizarrement cela ne fonctionnait pas (il fallait jongler avec les position absolute et relative mais à chaque fois quelquechose n'allait pas/plus) alors je me suis rabattu sur les tableaux qui sont comme tu l'as justement dit un peu du bricolage dans ce cas précis.

Je vais creuser la question pour m'en sortir autrement, notamment avec les "float" qui semblent plutôt convenir à mon problème.


A plus

Lorris

C'est bien »
C'est une bonne décision de ta part.

» Il ne faut surtout pas choisir un élément dans le but de se soustraire devant l'inévitable. La balise table, tel que tu l'as utiliser, suggérait une porte de sortie facile, et de là, pas besoin du savoir faire de certaines techniques offert sur Alsacréations.

» Moi personnellement j'utilise les tableaux lorsque je tiens à me rapprocher davantage d'une application, utilisant les données pour nourrir une BDD, ou générer un fichier XML en PHP.

» Mais jamais pour éviter, ou pour résoudre certains problèmes techniques.

Dans l'exemple suivant j'utilise un tableau avec des champs de saisies. Le but peut être de charger des données dans une table MySQL. Ou de générer un fichier XML. Il n'y a pas d'éléments div ici. On s'en sert comme zone administrative par exemple.



Dans l'exemple du haut, il s'agit d'une maquette pour une maison de thérapie venant en aide à des jeunes toxicomanes. Le but était d'informatiser un atelier. Maintenant l'atelier n'existe plus, sauvant ainsi du temps, du seul fait que tout l'atelier a été informatiser sous cette forme que l'on peut identifier comme étant une application.

Quoiqu'il en soit, utiliser les balises correctement est une bonne habitude en soi.

++ zardoz.

J'ai parcouru quelques tutoriels très intéressants, j'ai refais mon code et je me retrouve devant un autre question:

La balise Textarea peut elle élargir les dimensions de son parent? J'ai beau ne rien sortir du flux, si j'agrandis la hauteur de mon textarea, la balise div parente, elle, ne s'agrandit pas (et le textarea recouvre/dépasse mon div).

Voici mon nouveau code css:

.conteneur
{
  text-align                :center;
  margin-left               :auto;
  margin-right              :auto;
  width                     :400px;
}

.cadre
{
  background-color          :#b9b9f1;
  border                    :2px solid black;

  width                     :400px;
  margin-bottom             :5px;
  padding                   :10px;

  text-align                :left;
  font-family               :Tahoma;
  font-size                 :16px;
}

input
{
  float                     :right;
  width                     :300px;
}

textarea
{
  float                     :right;
  width                     :300px;
  height                    :150px;
}

et HTML:

<BODY>
        <DIV class="conteneur">
            <FORM>
                <DIV class="cadre">Titre:<INPUT type="text"></DIV>
                <DIV class="cadre">Message:<TEXTAREA></TEXTAREA></DIV>
            </FORM>
        </DIV>
</BODY>

EDIT: j'ai trouvé une solution (paradoxale), en utilisant overflow:hidden pour le textarea. Bizarrement ce qui dépasse du block n'est alors pas caché, au contraire: il reste visible et agrandit la hauteur du block, et c'est au final ce que je voulais faire. C'est complétement illogique mais ça marche. Comme je ne vois pas d'autres solutions plus logiques pour l'instant je me contenterai de ça.
Modifié par stinlolo (21 Jul 2010 - 15:18)