Aligner deux images avec un formulaire

Fermé
eg33 Messages postés 1075 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 7 mars 2018 - Modifié par eg33 le 3/08/2010 à 13:54
avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 - 3 août 2010 à 16:51
Bonjour,

C'est peut-être moi qui suis débile ou qui ignore un truc important, mais bon, je débute...

J'aimerais que les deux flèches se trouvent aux deux extrémités du formulaire ; mais quand je fais comme ça :

<p style="text-align:center"> 
<img style="float: left; margin-right: 5px" src="http://cdn.iconfinder.net/data/icons/silk2/resultset_next.png" /> 
<form> 
<select name="ListeUrl" size=1 onChange="ChangeUrl(this.form)"> 
<option selected value="" style="text-align:center; color:grey">Choisissez votre format... 
[...]
</select> 
</form> 
<img style="float: right; margin-left: 5px" src="http://cdn.iconfinder.net/data/icons/silk2/resultset_previous.png" /> 
</p>


Ça ne fonctionne évidemment pas. Normal, vous allez me dire, mais je dois avouer que j'ai essayé plusieurs combinaisons, et impossible de trouve la bonne. Alors je fais appel à vous !

Quelqu'un de dévoué pourrait-il me corriger SVP ? Merci beaucoup.
On croyait avoir atteint le pire avec HADOPI... LOPPSI, ça c'est le pire !
WOT : un système simple et gratuit d'évaluations partagées de sites, pour un Web plus sûr.

2 réponses

avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 4 496
3 août 2010 à 13:45
Salut.
Ton lien est invalide.
0
eg33 Messages postés 1075 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 7 mars 2018 66
Modifié par eg33 le 3/08/2010 à 13:55
Désolé ; j'ai collé le code ici, ça sera plus simple finalement.
0
avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 4 496
3 août 2010 à 14:03
Voilà :
<form>
	<div>
		<img style="margin-right: 5px; vertical-align: middle;" src="http://cdn.iconfinder.net/data/icons/silk2/resultset_next.png" />
		<select style="vertical-align: middle;" name="ListeUrl" size="1" onchange="ChangeUrl(this.form)">
			<option selected value="" style="text-align:center; color:grey">Choisissez votre format...</option>
		</select>
		<img style="margin-left: 5px; vertical-align: middle;" src="http://cdn.iconfinder.net/data/icons/silk2/resultset_previous.png" />
	</div>
</form>


Inutile d'utiliser float, <img /> et <select> sont des éléments en lignes (inline).
J'ai ajouter "vertical-align: middle" pour que ce soit bien aligné.
0
eg33 Messages postés 1075 Date d'inscription dimanche 21 décembre 2008 Statut Membre Dernière intervention 7 mars 2018 66
Modifié par eg33 le 3/08/2010 à 14:49
Merci infiniment pour ton aide, je prend note de ce rappel important. Juste par curiosité : pourquoi une balise DIV ?

Par ailleurs, je viens de me rendre compte que le vertical-align: middle n'a aucun effet (top & bottom, oui) ; pourtant cette valeur existe (testé sous plusieurs navigateurs)...
0
avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 4 496
3 août 2010 à 16:51
Le div c'est par habitude : je mets chaque ligne de mes formulaires dans son div.
0