28172 sujets

CSS et mise en forme, CSS3

[Résolu] Formulaire textarea à droite

Bonjour,

J'ai ce type de formulaire, et j'aurai voulu que le textarea soit positionné sur le coté droit des champs text, voir image. Je n'arrive pas à le positionner !! Pouvez-vous me donner un coup de main ?

http://www.casimages.com/i/141018083238522936.gif

 <form action="contact_en/envoi.php" method="post" name="formContact" autocomplete="on">
<p>
<label for="lastname">Last Name<span class="required">*</span></label>
<input type="text" name="lastname" id="lastname" required="required" placeholder="Last Name *" />
</p>

<p>
<label for="firstname">First Name<span class="required">*</span></label>
<input type="text" name="firstname" id="firstname" required="required" placeholder="First Name *" />
</p>

<p>
<label for="address">Address</label>
<input type="text" name="address" id="address" placeholder="Address" />
</p>

<p>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode" placeholder="Zip Code" />
</p>

<p>
<label for="city">City</label>
<input type="text" name="city" id="city" placeholder="City" />
</p>

<p>
<label for="phone">Phone</label>-->
<input type="text" name="phone" id="phone" placeholder="Phone" />
</p>

<p>
<label for="email">Email<span class="required">*</span></label>
<input type="text" name="email" id="email" required="required" placeholder="Email *" />
</p>

<p>
<label for="subject">Subject<span class="required">*</span></label>
<input type="text" name="subject" id="subject" required="required" placeholder="Subject *" />
</p>

<p>
<label for="message">Message<span class="required">*</span></label>
<textarea id="message" name="message" required="required" placeholder="Area of Interest *"></textarea>
</p>

<p class="indication">All fields with a <span class="required">*</span> are required</p>

<p>
<input type="submit" value="Submit !" />
</p>
</form>
</div> 


 /*balises generiques*/
body{
	color:#000000; 
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

#conteneur{
	margin:0px auto;
	width:300px;
	padding:0px;
	border:0px solid #000000;
}

/*couleur pour les cchamps obligatoires*/
input:required, textarea:required{
	background-color:#fff;
	color:#000;
}

/*input et textaera*/
input:not([type="submit"]), textarea{
	display:block;
	width:230px;
	padding: 4px 8px;
	border: 1px solid #000000;
	color:#111;
	font-size:12px;
/*border radius*/
    border-radius: 1px;	
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
}

input:not([type="submit"]){
	height:20px;
}

textarea{
	min-height:100px;
	resize:vertical;
}

.indication{
	color:#878787;
	font-size:11px;
	font-style:italic;
	text-align:left;
}

/*bouton*/
input[type=submit]{
	margin-left:178px;
	cursor:pointer;
	color:#000000;
	font-size:16px;
	padding:5px 4px;
	border:1px solid #ffffff;
	background:#ffffff;
}
Bonjour,

Un peu chiant à te lire. Qu'est que tu obtiens à l'heure actuelle ?

Je ne vois rien qui pourrais faire que ton textarea se place à droite... Est ce que t'as tenté au moins de faire un truc ?

Regarde du côté de la propriété css : float.

Je te laisse un peu gratter.
Bonjour,

Actuellement j'obtiens cela (voir image). Si je demande de l'aide ce n'est pas pour vous embêter, je n’y arrive pas, et je ne suis pas un expert dans ce domaine.

C'est un générateur qui à fait le travail, malheureusement, il ne permet pas de faire ce que je souhaite, c'est à dire, intégrer le Textarea du côté droit.

http://imagik.fr/thumb/128653.jpeg [size=9]imagik[/size]
Bonjour,

Je ne sais pas si tu peux modifier ta structure HTML, mais tu peux aussi encapsuler tes éléments entre 2 divs supplémentaires : 

 <form action="contact_en/envoi.php" method="post" name="formContact" autocomplete="on">
    <div class="leftForm"><!-- ici les éléments de gauche --></div>
    <div class="rightForm><!-- ici les éléments de droite--></div>
</form>

et en css :

form {/* rajoute une classe sur ton form si tu ne veux pas faire hériter les autres forms du site */
  overflow: hidden; /* pour stopper les flottants */
}
.leftForm { /* on place la première div à gauche */
  float: left;
  width: 48%
}
.rightForm { /* on place la seconde div à droite avec un petit margin left */
  overflow: hidden;
  padding: 0 0 0 4%;
}


Il s'agit en fait de la même technique css qu'a utilisé gc-nomade mais en utilisant 2 div au lieu du sélecteur nth-child.
Page de test : http://codepen.io/anon/pen/yBcGu


Par ailleurs, j'ai vu dans ton ccs que tu as un contener de 300px, c'est pas un peu petit pour faire 2 colonnes ?

Et si tu peux changer l'HTML, tu peux aussi supprimer les <p>, il ne te sont pas utiles ^^.

Cdt
Bonsoir,

Je viens d'appliquer vos conseils avisés et tout fonctionne à la perfection Smiley biggrin

Un très GRAND merci à vous.

Cordialement
Modifié par Magnitude (21 Oct 2014 - 20:36)
Sujet clos
Aller à