Bonjour,
Je veux afficher un bouton radio aux 4 coins d'un bloc div pour sélectionner l'emplacement d'une image dans une page. Le bloc div représente la page, les boutons représentent la position de l'image à l'intérieur de cette page. Mon souci est que les deux boutons de droite ne s'affichent pas complètement à droite mais juste à la suite de ceux de gauche (cf. ligne 12 et 28 à 33)
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form method="post" class="L" enctype="multipart/form-data">
	<fieldset><legend>Texte</legend>
		<!-- Edition du texte -->
	</fieldset>
	<fieldset><legend>Image</legend>
		<input type="hidden" name="MAX_FILE_SIZE" value="100000">
		<label for="picture">Ajout image/photo</label><input type="file" name="picture" id="picture" /><br/>
		<label>Position de l'image dans le texte</label>
		<div class="imgPosition">
			<p>
				<input type="radio" name="pos" value="1"> <input type="radio" name="pos" value="2"><br/>
			</p>
			<p>
				<input type="radio" name="pos" value="3"> <input type="radio" name="pos" value="4"><br/>
			</p>
		</div>
	</fieldset>
	<p><input type="submit" name="save" value="Enregistrer" /> 
	<input type="submit" name="resetImg" value="Effacer image" /> <input type="submit" name="resetAll" value="Tout effacer" /></p>
</form>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.imgPosition
{
	display:inline-block;
	margin-top:7px;
	border:1px solid;
	padding:0 5px;
	width:100px;
	height:70px;
}
.imgPosition p
{
	text-align:justify; /* Cette ligne apparaît dans l'explorateur DOM mais est inopérante */
}
.imgPosition p:first-child
{
	margin-top:5px;
}
.imgPosition p:last-child
{
	margin-top:27px;
}
.imgPosition label /* Ne fonctionne pas, n'apparaît pas dans le DOM en débogage */
{
	min-width:300px;
	vertical-align:top;
	border:1px solid; /* pour test uniquement */
}
.imgPosition p input:nth-child(2n) /* bloc utilisé comme palliatif de la ligne 12 */
{
	padding-left:30px;
	margin-top:0;
	border:1px solid grey; /* pour test uniquement */
}