28172 sujets

CSS et mise en forme, CSS3

Input text + label variables (dynamique)

Bonjour,

J'ai un petit problème :

Comment faire pour avoir dans un formulaire et sur une ligne un label dont le texte peut varier en taille et collé à celui-ci à coté une zone de texte qui prendra tout le reste de la largeur de la page sans utiliser un tableau à 2 cellules ?

<form action="formulaires.php" method="post">
<label>Texte généré par PHP :</label><input type="text" />
</form>


Ce qui donnera ceci :
| Texte généré par PHP: [______________________________________________________] |
| <----- variable -----> <-- prendre tout l'espace qui reste jusqu'à la marge de la page --> |

et la cerise sur le gâteau serai que ça marche sur tout les navigateurs (même IE6)

Je débute en CSS et j'ai beaucoup cherché mais je tombe toujours sur des mise en forme avec des zone de saisie qui ont une taille fixe (pour les aligner entre elles) mais ce n'est pas ça que veut... Smiley ohwell

Je remercie d'avance qui pourra m'aider !
Modifié par VincentB85 (01 Mar 2010 - 13:34)
Bonsoir,

aucune idée pour IE6 mais tu dois pouvoir utiliser un truc du genre :
label {
	float:left;
	text-align:right;
	width:10%;
	margin-right:1%
}
input {
	width:89%;
}
Bonjour et merci MatTheCat pour ta réponse,

Tu a raison pour IE6 oublions le, par contre j'ai testé ton code en adaptant les width:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<style>
			label {
				float: left;
				text-align: right;
				width: [b]19%[/b];
				margin-right: 1%;
			}
			input {
				width: [b]79%[/b];
			}
		</style>
	</head>
	<body>
		<label>Comment allez vous ?</label>
		<input type="text">
	</body>
</html>

J'ai agrandi le label de 10% et donc réduit de 10% le input mais cela provoque un retour à la ligne Smiley sweatdrop j'ai donc encore réduit le label de 1% ce qui résout ce problème mais pas le mien... Smiley decu

Mon problème c'est que ce label peut être écrit en toutes les langues et donc avoir une taille très variable, mais là par exemple il est fixé à 19%, ce qui provoque un retour à la ligne si le label est trop long.
J'ai trouvé ce message sur le forum qui ressemble un peu au mien :
http://forum.alsacreations.com/topic-4-32756-1-Div-largeur-dynamique.html


Actuellement la seul solution que j'ai trouvé c'est avec un tableau :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<style>
			td {
				width: 0;
				white-space: nowrap
			}
			table,
			#cell,
			#cell input {
				width: 100%
			}
		</style>
	</head>
	<body>
		<form action="script.php" method="post">
			<table>
				<tr>
					<td><label>i18n question ?</label>
					<td id="cell"><input type="text" name="response">
					<td><input type="submit">
			</table>
		</form>
	</body>
</html>

C'est moche mais la cellule qui contient "i18n question ?" peut recevoir un texte de n'importe quelle taille, le tout prendra toujours toutes la largeur de la page sur une seul ligne et le input text s'adaptera toujours avec l'espace restant.

PS: Tu remarquera que j'ai ajouter un bouton submit Smiley murf pour envoyer une réponse qui sera lui aussi traduit dans toutes les langues et donc dynamique tant qu'a faire ! Smiley ravi


Mais comment faire cela simplement en CSS ??
Suis-je condamné à utiliser un tableau pour de la mise en forme ? Smiley ohwell
Modifié par VincentB85 (20 May 2010 - 12:31)
Impossible de reproduire le comportement du tableau uniquement avec du CSS même sans ce soucier des navigateurs incompatibles...

Mon but est d'avoir sur une ligne "label" + "input text" [+ "bouton submit"](bonus optionnel)
Le tout doit utiliser 100% de la largeur de la page et input text doit utiliser tout l'espace restant donc on ne peut pas donner de taille fixe (px) ou relative (%) a chacun des éléments car le texte du label (et du bouton) on une taille imprévisible !

J'ai testé pas mal de trucs mais sans succès :

Avec float ça n'arrange rien.
Min-width & max-width ne semble pas fonctionner...
Position:absolute avec left + right: 0 ne déforme pas le input text même avec display:block !
Avec overflow:hidden ça marche mais input text est tronqué Smiley bawling

Et pourquoi ne pas simuler un tableau en CSS avec display:table-cell ?
Je me document un peu et je test ça Smiley sweatdrop
Modifié par VincentB85 (24 May 2010 - 15:07)
Sujet clos
Aller à