Discussion :

[theo17]

Bonjour,

J'ai un problème de positionnement, je ne sais comment aligner à droite le bouton validation.

+--------------------------------------------------------------+
|___Les rubriques d'un numéro____====_________valider__|
+--------------------------------------------------------------+
|___Chaque article d'un auteur_____======______valider__|
+--------------------------------------------------------------+
|___Familles étudiées____________=========___valider__|
+--------------------------------------------------------------+

Je positionne mon texte avec un label qui est suivi de ma balise select (pas toujours de la même longueur en fonction des enregistrements), jusque là tout va bien, les textes et select des trois cadres s'alignent
bien, mais je ne vois pas du tout comment faire pour aligner mon bouton input de validation à droite.

l'html correspondant tiré du php :

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
<div id="rubrique">
   <p><label for="rub">Les rubriques d'un numéro</label>
   <select id="rub" name="rubrique">".Select_rubrique()."</select></p>
   <input id="droite" type=submit value="Validation rubrique" name="valide_rub">
</div>
<div id="article">
   <p><label for="art">Chaque article d'un auteur</label>
   <select id="art" name="article">".Select_nom('ART')."</select></p>
   <input id="droite" type=submit value="Validation article" name="valide_art">
</div>
<div id="famille">
   <p><label for="fam">Familles étudiées</label>
   <select id="fam" name="famille">".Select_nom('FAM')."</select></p>
   <input id="droite" type=submit value="Validation famille" name="valide_fam">
</div>

note : Les Select_.. sont en php et me donnent les enregistrements d'une table sous forme de tableau

le css correspondant :

Code :

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
#rubrique {
   width: 700px;
   height: 60px;
   border: 1px solid black;
}
 
#article {
   width: 700px;
   height: 60px;
   border: 1px solid black;
}
 
#famille {
   width: 700px;
   height: 60px;
   border: 1px solid black;
}
 
#droite {
   text-align: right;
}
 
label {
    display: inline-block;
    width: 210px;
    padding-left: 10px;
}

Pouvez vous m'aider à positionner ces boutons submit à droite ?
Merci beaucoup.

[NoSmoking]

Bonjour,
fait "floater" ton INPUT à droite, en changeant l'ordre dans le HTML.

Code html :

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

1
2
3
4
5
<div id="rubrique">
  <input class="droite" type=submit value="Validation rubrique" name="valide_rub">
  <label for="rub">Les rubriques d'un numéro</label>
  <select id="rub" name="rubrique">".Select_rubrique()."</select>
</div>

et le CSS

Code :

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

1
2
3
div input.droite{
  float:right;
}

Attention: une ID Doit être UNIQUE, passe donc par une class.

[theo17]

Bonjour,

Merci beaucoup, çà marche mon bouton se cale bien à droite.

Au temps pour moi au sujet des class à la place des id, je le savais mais dans la foulée de l'écriture du code ...

Merci encore.
Bonne journée.

[theo17]

Je reviens sur ta solution, elle marche bien, mais je ne comprends pas pourquoi il faut changer l'ordre de l'input dans le HTML. ??

Merci

[NoSmoking]

Vielle survivance du passé qui faisais que IE géré mal le float:right en ménageant un espace au dessus de l'élément flottant, le fait de le mettre en avant lui permettais de gérer comme il faut l'espace restant destiné aux éléments devant envelopper ce flottant.

C'est de la vielle histoire, tu peux donc à mon avis le remettre à sa place, au moins pour IE7+.