28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'essaye de mettre en forme un <textarea> dans un formulaire sans utiliser <table>.
<form>
	<div class="double">
		<label for="genre">Genre :</label>
		<input type="text" name="genre" value="" />
		<p class="spacer"></p>
	</div>
		
	<div class="double">
		<label for="espece">Espèce :</label>
		<textarea name="espece" rows="5" value=""></textarea>
		<p class="spacer"></p>
	</div>

	<div class="double">
		<label for="famille">Famille :</label>
		<input type="text" name="famille" value="" />
		<p class="spacer"></p>
	</div>
</form>


form div.double {
	position:relative;
	}
form label {
	display:block;
	width:160px;
	text-align:right;
	}
form .field,
form textarea {
	position:absolute;
	left:170px;
	top:0px;
	margin:0;
	width:500px;
	}
form textarea {
	/* ??? */
	}

Avec cela, tous les <label> sont alignés à droite et les champs <input> <textarea> sont alignés à gauche (170px). Le problème est que le <textarea> ne pousse pas le 2ème <input> vers le bas et se retrouve "derrière"...
Existe-t-il une propriété CSS ou une astuce pour cela ????
L'idéal serait de garder la possibilité de le redimensionner tout en poussant si besoin/possible.
Merci pour votre précieuse aide ! Smiley biggrin
salut,

je pense que la meilleure solution serait de prendre le temps de bien comprendre le positionnement en CSS Smiley smile . Tu peux continuer ainsi à bricoler sans trop comprendre ce que tu fais et pourquoi ça se passe comme ça ou bien tu te donnes un délai et tu maîtrises les bases du positionnement.

Il y a forcément plusieurs façons de faire (en voici une très simple) et il faudra voir quelles sont tes contraintes.

Au passage, lorsque tu spécifies un label, l'attribut for est obligatoire pour celui-ci ainsi que l'attribut id sur l'élément avec lequel il est en rapport.
rohlalalala ! trop facile ! Smiley biggol
merci beaucoup Zelalsan, ça marche super bien... Tu as aussi tout a fait raison, il est temps d'arrêter le bricolage. Smiley cligne
en + tu viens de me faire découvrir jsfiddle.

pour ce qui est l'attribut id manquant, c'est juste que j'ai trop épurer mon code.

en tout cas : un GRAND MERCI !

tchusss