Discussion :

[moimp]

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 */
}

[Invité]

bonjour,

ce n'est pas compliqué. Parfois, mettre des éléments en position:absolute a son intérêt :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
    <div class="imgPosition">
      <input type="radio" name="pos" value="1" title="en haut à gauche" />
      <input type="radio" name="pos" value="2" title="en haut à droite" />
      <input type="radio" name="pos" value="3" title="en bas à droite" />
      <input type="radio" name="pos" value="4" title="en bas à gauche" />
    </div>

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
.imgPosition
{
  position:relative;
  display:inline-block;
  margin-top:7px;
  border:1px solid;
  padding:0 5px;
  width:50px;
  height:50px;
}
.imgPosition input { position:absolute; display:block; width:20px; height:20px;}
.imgPosition input { position:absolute; display:block; width:20px; height:20px;}
.imgPosition input:nth-child(1) { top:0; left:0; }
.imgPosition input:nth-child(2) { top:0; right:0; }
.imgPosition input:nth-child(3) { bottom:0; right:0; }
.imgPosition input:nth-child(4) { bottom:0; left:0; }

[moimp]

Merci, c'est vrai que je n'utilise pas les positions absolues parce que je les maîtrise mal.