CSS - Bouton de formulaire sur plusieurs lignes

Bonjour

Comment faire pour le bouton de formulaire dont j'ai fixé la largeur en css (voir en bas) s'agrandisse automatiquement en hauteur quand le texte dépasse la largeur fixée ?

Merci pour votre site !

Duck

.bouton_egal, {
width:307px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

Là c'est OK le texte tient :

<input type="submit" name="consultation" value="Consulter la structure des enseignements" class="bouton_egal"><br/>

Là le texte est tronqué :

<input name="Submit" type="suppression" value="Supprimer des DS ou TP, R&eacute;affecter les coefficients, Modifier les libell&eacute;s" class="bouton_egal"><br/>
Modifié par DuckLeCanard (26 Sep 2006 - 11:50)

Bonjour,

Autant de texte sur un bouton est peu recommandé je pense.
une balise <label> pourrait être plus claire.

<label for="suppression">Supprimer des DS ou TP, Réaffecter les coefficients, Modifier les libellés</label>
<input type="submit" id="suppression" name="suppression" value="Ok" class="bouton_egal" />

Le label ne convient pas.

En fait je vais avoir plusieurs boutons les uns en dessous des autres de même longueur. Il y en a un qui comportera deux lignes de textes car très spécifique.

Duck

Modifié par DuckLeCanard (26 Sep 2006 - 14:50)

bonjour,

le code cité en exemple ne semble pas correspondre tout a fait (une virgule en trop sur la classe et un type submit et un autre texte ... par defaut ?



pour aggrandir les boutons et les passer sur 2 lignes , il y a une solution qui ne passe pas partout :

<input type="submit" name="consultation" value="Consulter la structure des enseignements" class="bouton_egal" />

<input type="Submit" name="suppression" 
value="Supprimer des DS ou TP,
R&eacute;affecter les coefficients, Modifier les libell&eacute;s" class="bouton_egal" />

Ecrire le texte et faire un retour chariot dans le code html et faire usage du "white-space:pre; dans le css.

.bouton_egal {
width:307px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
display:block; /* a la place de <br /> dans le html */
white-space: pre; /* fonctionne sur les boutons  mais  pas dans opera  par exemple */
}

Alors la solution label ,ou paragraphe contenant le bouton d'envoi apres le texte sur plusieurs ligne peut etre plus judicieux ?

++
Modifié par gcyrillus (26 Sep 2006 - 15:53)