28172 sujets

CSS et mise en forme, CSS3

Salutles experts Smiley smile ,

J'ai un soucis dans ma page internet que je code actuellement.

Je voudrais positionner un formulaire à la droite d'une div, sur la même ligne.

Voici le code niveau HTML :

<div id="eval">
					<div>
						<h2>Ce site est dans sa version 1.0</h2>
						<p>
							Et il est encore en évolution ! c'est 
							pourquoi je suis ouvert à toute remarque concernant 
							le site internet.
						</p>
					</div>
				
					<form action="mailto:cinetx@gmx.fr" method="post" enctype="text/plain">
						<fieldset>
							<textarea rows="4" cols="30" name="commentaire">Tapez votre message ici</textarea>	
							<div>
								<input type="submit" id="envoyer" name="envoi" value="Envoyer" />
								<input type="reset" id="recommencer" name="reset" value="Effacer" />
							</div>
						</fieldset>
					</form>
				</div>


et donc, vu que le titre h2 et l'élément p prenait toute la place, je les ai regroupé dans une div commune, à laquelle j'ai appliqué une largeur fixe.

Ensuite, je pensais qu'en mettant cette div en display:inline, le formulaire viendrait naturellement se placer dans l'espace restant, sauf que rien ne se produit Smiley decu

De plus, je crois qu'il est déconseillé de forcer un élément block en inline.
J'avais aussi essayé précédemment d'englober le titre h2 et ma balise p dans une span, mais aucun effet non plus...

Est-ce que vous auriez une solution ?
Modifié par openwave (23 Aug 2010 - 18:33)
Hello Smiley smile

Tu peux peut être essayer avec des floats et un système de fausses colonnes comme sur le gabarit 7

Dans ton cas, il faudrait mettre le div avec ton h2 en float:left, puis lui donner une largeur, disons 100 px. Après il te reste à rajouter une petite margin-left à ton formulaire de plus de 100 px ( 110 par exemple si tu veux une marge de 10 px), ça devrait faire l'effet voulu.
Modifié par InpIxelItrust (23 Aug 2010 - 15:11)
Merci InpIxelItrust,

je viens de suivre tes instructions, et j'ai compris quelquechose en même temps Smiley cligne
je n'avais pas pensé à utiliser le float sur l'élément frère.

et je n'avais pas du tout remarqué que le form ne prend pas la place des éléments visible, il prend tout, c'est pour ça qu'il fallait faire les fameuses marges supérieur à la largeur de l'élement float !

Merci encore et passe une bonne soirée Smiley lol

(je posterai le lien du résultat de mon site quand je l'aurai finit pour demander vos avis !)