Discussion :

[Papy214]

Bonjour,

Hier, j'ai voulu mettre un textearea dans un div et je me suis rendu compte que le div "englobant" ne s'agrandit pas automatiquement en fonction de la taille du textarea.

Est-ce un fait connu ou bien aurais-je oublié quelque chose ?

( mis à part la définition explicite d'un height pour le div évidemment )

Papy !

[pastel.pro]

Tu peux poster ton code HTML et CSS ? Ou donner un lien vers ta page ?
A priori, le DIV devrait s'adapter à la taille de ton textarea

[Papy214]

Voilà le code incriminé !

Code :

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

1
2
3
4
5
 
.contact_label {
	float: left;
	width: 150px;
}

Code :

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

1
2
3
4
5
6
7
8
 
<form action="../scripts/contact.php" method="post">
	<div class="contact_label">Votre prénom</div> <div> <input type="text" name="firstname"	value="{$firstname}"  /></div>
	<div class="contact_label">Votre nom   </div> <div> <input type="text" name="lastname"	value="{$lastname}" /></div>
	<div class="contact_label">Votre email </div> <div> <input type="text" name="email"		value="{$email}" /></div>
	<div class="contact_label">Votre message </div> <div><textarea name="message" rows="5" cols="40">{$message}</textarea></div>
	<div style="text-align: center; margin-bottom: 15px;"><input type="submit" value="Envoyer"  /></div>
</form>

Le bouton submit se retrouve en plein milieu du textarea.



Par contre, je viens de voir que si je n'entoure pas le textarea avec un div, le bouton est bien placé en dessous du textarea. La solution est donc trouvée mais je ne comprends pas en quoi le div peut bien intervenir ici.

[RunCodePhp]

Salut

A mon avis, la DIV ne sert à rien.
De plus, la DIV est un élément flottant (class contact_label), mais surtout, tu lui donne une largeur : 150px.
Du coup, elle ne peux pas s'agrandir, sa taille est devenue fixe.

Les DIV qui englobes les <input /> eux aussi ne servent à rien à mon avis.

Il y a que pour le bouton qui demanderait d'être englobé par un élément de block, comme une DIV du fait que tu souhaite que le bouton soit centré.
Par contre, il faudrait peut être rajouter une propriété à la DIV -> clear: both
car à mon sens faut pas que celle ci soit flottante, donc quelle passe à la ligne.


Petite parenthèse.
Pourquoi n'utilise tu pas un <label> plutôt que des DIV ?
C'est pourtant "sémantiquement" plus adapté.
Coté mise en forme, suffit de leur donner celle que tu veux en CSS.

[Papy214]

La(le?) DIV qui englobe le textarea n'a pas la classe contact_label.
Ci-dessous le code remis sur plusieurs lignes ...

Code :

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

1
2
3
4
 
<div class="contact_label">Votre message </div> 
 
<div><textarea name="message" rows="5" cols="40">{$message}</textarea></div>

D'où mon incompréhension de son influence sur le rendu visuel ...

Concernant l'utilisation du label, j'avoue que je n'y pense pas assez. Je vais revoir cette partie.

[RunCodePhp]

A ben zut alors, j'avais pas vu

Les éléments flottant sortent du flux de la page, c'est assez particulier.
En faite, leur hauteurs ne sont pas tenu comptent, c'est un peu comme si ils ne faisaient pas partie du FORM.
Du coup, l'emplacement du DIV du bouton est perturbé par ça.
A mon avis, c'est cela qui en serait la cause.
Je parle même pas des interprétation différentes qu'il y a entre navigateurs.
Les éléments flottant et les position absolus sont pas si simple à gérer par moment.

De mon coté, je n'hésite pas à rajouter des clear: both à un élément placé après un élément flottant quant il doit passer à la ligne.
Personnellement, je le ferais pour la DIV du bouton.

Ceci dit, au lieu de mettre une DIV autour du textarea, tu pourrais lui mettre un style Css : display: block; , juste pour voir

[Papy214]

le display: block n'a aucune influence, quel que soit l'emplacement utilisé (div ou input).

Je vais donc juste enlever les DIV en trop et utiliser des label .

Merci !