Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

affichage des liste d'option

centrer dans la hauteur

Sujet résolu

23 décembre 2005 à 15:47:44

boujour,
je fais un formulaire de type:

<input type="radio" name="" value=""/>

pour ceux qui ne voient pas de quoi je parle, ce sont des liste d'option ou on ne peut faire qu'un choix (les petits ronds^^).
les diferentes options sont en fait des images et je voudrais donc que le petit rond soit centré verticalement par rapport à l'image correspondante.
comment faire?

24 décembre 2005 à 11:01:28

up!
s'il vous plait, dite moi au moin ce qui vous ne comprenez pas dans ma question, que je puisse la reformuler.

24 décembre 2005 à 11:11:25

Essaye quelque chose comme ça :

<style type="text/css">
form img {
vertical-align:middle;
}
</style>

<form action="jensaisrien" method="post">
<p><input type="radio" name="truc" value="machin"/><img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/accueil.png" alt="machin" /> </p>
<p><input type="radio" name="truc" value="bidule"/><img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/forums.png" alt="bidule" /></p>
<p><input type="radio" name="truc" value="chose"/><img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/livredor.png" alt="chose" /></p>
</form>

(pour les besoins de l'exemple j'ai pris les icônes du thème que j'utilise...)

24 décembre 2005 à 11:21:22

ah merci! c'était ça.
depuis le début j'essaye d'alligner les puces par rapport aux images et j'avais pas pensé à faire l'inverse.
cela dit j'ai un autre petit probleme: je ne fais pas de retour à la ligne autre deux options, pour que les images se suivent sur la meme ligne. Quand la ligne est remplie, l'image vas en dessous. malheureusement, souvent la puce reste sur la ligne précedante alors que l'image est en dessous...
comment faire pour que la puce soit toujours juste devant l'image?

24 décembre 2005 à 11:30:38

<style type="text/css">
form span {
white-space:pre;
}

form img {
vertical-align:middle;
}
</style>

<form action="jensaisrien" method="post">
<p>
<span><input type="radio" name="truc" value="machin"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/accueil.png" alt="machin" /></span>
<span><input type="radio" name="truc" value="bidule"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/forums.png" alt="bidule" /></span>
<span><input type="radio" name="truc" value="chose"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/livredor.png" alt="chose" /></span>
<span><input type="radio" name="truc" value="machin"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/accueil.png" alt="machin" /></span>
<span><input type="radio" name="truc" value="bidule"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/forums.png" alt="bidule" /></span>
<span><input type="radio" name="truc" value="chose"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/livredor.png" alt="chose" /></span>
<span><input type="radio" name="truc" value="machin"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/accueil.png" alt="machin" /></span>
<span><input type="radio" name="truc" value="bidule"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/forums.png" alt="bidule" /></span>
<span><input type="radio" name="truc" value="chose"/> <img src="http://www.siteduzero.com/Templates/images/designs/4/speedbarre/livredor.png" alt="chose" /></span>
</p>
</form>

bon le code est long mais c'est juste parce que j'ai fait plein de copier/coller histoire que ça soit aller large pour aller à la ligne

24 décembre 2005 à 11:42:52

ça fonctionne!
et bien merci!

affichage des liste d'option

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.