28172 sujets

CSS et mise en forme, CSS3

Bonsoir, bonne nuit ou bonjour Smiley lol

Est-il possible de faire s'adapter en largeur les input(text ou textarea) à leur conteneur ? Si oui comment ?

Merci

@+
Modifié le 29 Nov 2004 - 14:53
Eh bien tout simplement en appliquant une taille en % (vu que les tailles en % sont des tailles qui sont proportionnelles à leurs contenus).

Donc par exemple :

<div class="contenu">
     <input type="text" />
</div>

.contenu
{
 /* Définition de la taille du contenu */
 width: 400px;
 height: 300px; 
 background-color: #eee; /* Je mets #eee en couleur de fond pour qu'on voit un peu le fond ;o) */
}
/* Propriétés s'appliquant aux balises <input />
input
{
	width: 30%;
	background-color: #000;
	color: #000;
}


Je n'ai pas défini de taille parce que je n'en vois pas trop l'utilité, mais tu peux le mettre si tu veux. Donc avec cet exemple, le champ <input /> prendrait 30% de la taille de son contenu.

Voilà Smiley smile
Modifié le 27 Nov 2004 - 02:21
Ce n'est pas aussi simple que ça Smiley biggrin
<input /> est un élément en ligne (inline) donc pas dimensionable, en %, en px, en em ou quoi que ce soit.

Donc il faut le passer en affichage en bloc grâce à display: block; et là le input prendra la largeur maximale comme tout élément de type bloc qui se respecte Smiley cligne
Pour réduire la taille tu peux utiliser width: ...;

Voilà, @++
Administrateur
ElMoustiko a écrit :
Ce n'est pas aussi simple que ça Smiley biggrin
<input /> est un élément en ligne (inline) donc pas dimensionable, en %, en px, en em ou quoi que ce soit.

Normalement : si. (edit) Smiley smile (/edit)

Parmi les balises en-ligne, les éléments "remplacés" sont les seuls qui possèdent des dimensions (height, width) par défaut. Il s'agit des éléments IMG, INPUT, TEXTAREA, SELECT, et OBJECT.

Pour ces éléments, les valeurs width et height s'appliquent.

Sources :
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_heights_and_margins
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_widths_and_margins

Pour tous les autres éléments en-ligne :
- The 'width' property does not apply. A specified value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a computed value of '0'.
- The 'height' property doesn't apply, but the height of the box is given by the 'line-height' property.
dans les deux cas ça marche pas bien, je peux pas vous en dire plus pour le moment, j'suis un peu débordé là.

Ptet plus tard, ou demain
Administrateur
Poire a écrit :
dans les deux cas ça marche pas bien, je peux pas vous en dire plus pour le moment, j'suis un peu débordé là.

Ptet plus tard, ou demain

Tu as bien précisé une hauteur au conteneur ? des pourcentages ne s'appliquent que par rapport à une hauteur définie.
Si la hauteur du conteneur est elle-même en %, il faut que le conteneur du conteneur soit défini, et ainsi de suite... jusqu'aux balises <body> et <html> si besoin est.
Administrateur
Poire a écrit :
je veux pas en hauteur, mais plutôt en largeur

Oups.
Reprend mon post et remplace "hauteur" par "largeur" Smiley cligne
mdr

je viens de rentre, trop creuvé pour tester Smiley ohwell

pas sûr d'avoir le temps demain

promi je vous tien au courant et donne + de détail si ça marche pas
Administrateur
Poire a écrit :
c'est bon ça marche Smiley smile

Merci à tous Smiley smile

C'est à dire ? On peut savoir comment tu as réglé ça ?
J'ai mis le conteneur à width: 100%;
et le textarea à 80%

et c'était bien la non spécification de la taille du conteneur qui foutait le bordel Smiley cligne