Comment aligner deux boutons ?

**apt** · 16/12/2008, 02h00

Bonjour à tous,

J'ai un formulaire (Conditions d'acceptation) avec un textarea et deux champs input de type bouton.

Je trouve des duficultés pour pour aligner les deux boutons en horizontale sous le textarea ...

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
<div style="width:400px; margin:auto">
  <form action="" method="post" name="search" id="searchform">
    <fieldset>
    <legend>Step 1 - Terms and Conditions of acceptation</legend>
    <textarea name="conditions" cols="" rows="" class="inp">
  1 - Conditions
  2 - Accept
  </textarea>
    <ol style="list-style:none;display:inline">
      <li style="display:block">
        <input name="Accept" type="button"  value="Accept" class="submit"/>
      </li>
      <li style="display:block">
        <input name="Refuse" type="button"  value="Refuse" class="submit"/>
      </li>
    </ol>
    </fieldset>
  </form>
</div>

Merci

**Deallyra** · 16/12/2008, 07h58

Bonjour,

Le principe d'une liste est de faire une énumération.

1_
2_
3_

A partir de là, comment veux-tu que si tu fais une énumération de tes inputs, tu puisses les avoirs sur la même ligne?

Mettre ton bouton dans une puce de liste, c'est le faire aller sur la liste suivante, au moins dans ton cas.

**s.n.a.f.u** · 16/12/2008, 09h57

Deux boutons en ligne pour la table 2 !

Code :

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

1
2
3
4
5
 
<ul style="list-style: none;">
    <li style="display: inline;"><input name="Accept" type="button"  value="Accept" class="submit"/></li>
    <li style="display: inline;"><input name="Refuse" type="button"  value="Refuse" class="submit"/></li>
</ul>

**Erwan31** · 16/12/2008, 10h03

Envoyé par Deallyra

Bonjour,

Le principe d'une liste est de faire une énumération.

A partir de là, comment veux-tu que si tu fais une énumération de tes inputs, tu puisses les avoirs sur la même ligne?

Mettre ton bouton dans une puce de liste, c'est le faire aller sur la liste suivante, au moins dans ton cas.

Hello,
tous dépend de ce qu'entend apt par alignement horizontale (alignement à l'horizontal ou horizontal)

Si c'est une alignement horizontal et bien il faudra qu'Apt nous fournisse la totalité du code XHTML/CSS.

Code :

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

1
2
3
4
5
6
7
8
    <ol style="list-style:none;display:inline">
      <li style="display:block">
        <input name="Accept" type="button"  value="Accept" class="submit"/>
      </li>
      <li style="display:block">
        <input name="Refuse" type="button"  value="Refuse" class="submit"/>
      </li>
    </ol>

Je doute qu'une liste ordonnée soit une choix pertinent au vu de son contenu.
En l'état ça n'apportera rien à l'utilisateur donc à supprimer

**apt** · 16/12/2008, 10h34

Bonjour Erwan31,

Envoyé par Erwan31

Je doute qu'une liste ordonnée soit une choix pertinent au vu de son contenu.
En l'état ça n'apportera rien à l'utilisateur donc à supprimer

Avant, j'ai essayé avec input bouton seulement, puis il m'est venu l'idée d'essayer avec une lsite à puce et enfin avec une liste ordonnée, mais avec toutes les solutions, je n'ai pas pu avoir le rendu voulu

Bon voila comment ma page se présente (sans la solution de jml94) :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Condistions Form</title>
<style type="text/css">
<!--
input, textarea { 
border: 3px double #DDDDDD; 
padding: 2px; 
font: 11px Geneva, Arial, Helvetica, sans-serif; 
display: block; 
margin: 4px 0 4px 0; 
} 
#styleform input.inp, textarea.inp
	{
	border: 1px solid #ddd;
	font: 11px arial,verdana, sans-serif;
	color: #443;
	padding: 2px;
	text-indent: 1.2em;
	outline: none;
	}
 
#styleform input.inp {
	background: #fff url(images/Simplicity.png) no-repeat left center;
	width: 120px;
	height:18px;
	}
 
#styleform textarea.inp {
	width: 89%;
	height:150px;
	overflow:scroll;
}
 
#text
	{
	height:150px;
	overflow:scroll;
}
 
	/*Fix IE*/
#styleform input.inp, textarea.inp
	{
	padding: 0 1.3em;
    text-indent: 0
}
 
#styleform input.inp:hover, textarea.inp:hover,
#styleform input.inp:focus, textarea.inp:hover
	{ 
	border: 1px solid #aaa; 	
		}
 
 #styleform input.submit {   
    border:0px;
    margin: 0 3px 0 0;
	background-color: #85C329;
	color:white;
 }
 #styleform input.submit:hover,
 #styleform input.submit :active
{
	background-color: #FB9622;
}
fieldset {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #33CCFF;
	border: 1px solid #3399FF;
	padding:2px;
}
 
-->
</style>
</head>
 
<body>
<div style="width:400px; margin:auto">
<form action="" method="post" name="search" id="styleform">
  <fieldset>
  <legend>Step 1 - Terms and Conditions of acceptation</legend>
  <textarea name="conditions" cols="" rows="" class="inp">
  1 - Conditions
  2 - Accept
  </textarea>
    <ol style="list-style:none;display:inline">
	<li style="display:block"><input name="Accept" type="button"  value="Accept" class="submit"/></li>
    <li style="display:block"><input name="Refuse" type="button"  value="Refuse" class="submit"/></li>
	</ol>
  </fieldset>
</form>
</div>
</body>
</html>

Envoyé par jml94

Deux boutons en ligne pour la table 2 !

Ca ne marche pas !

**s.n.a.f.u** · 16/12/2008, 10h38

Envoyé par apt

Bon voila comment ma page se présente (sans la solution de jml94)

Je n'avais donc pas compris la question...
Du coup, il faut effectivement répondre à la question de Erwan31

Envoyé par Erwan31

tous dépend de ce qu'entend apt par alignement horizontale (alignement à l'horizontal ou horizontal)

**Erwan31** · 16/12/2008, 11h02

Envoyé par apt

Avant, j'ai essayé avec input bouton seulement, puis il m'est venu l'idée d'essayer avec une lsite à puce et enfin avec une liste ordonnée, mais avec toutes les solutions, je n'ai pas pu avoir le rendu voulu

Erreur d'approche classique > tu détournes l'usage de cet élément à des fins de présentation, ce qu'il faut éviter...

**s.n.a.f.u** · 16/12/2008, 11h06

Envoyé par apt

Ca ne marche pas !

C'est sûrement que je n'ai rien compris.

Tu veux aligner deux boutons sur la même ligne ou bien aligner les bords gauche de ces boutons qui seront l'un au dessus de l'autre ?

**apt** · 16/12/2008, 11h26

Envoyé par jml94

Je n'avais donc pas compris la question...
Du coup, il faut effectivement répondre à la question de Erwan31

Non, par contre tu as bien compris la question, la preuve, j'ai vu des codes sur le net qui utilisent bien des listes à puce (avec line-style : none) pour organiser les champs et libellés des formulaires.

Pour mon cas, je voulais mettre mes deux boutons sur la même ligne (cote à cote avec un espace entre les deux bien sur) au lieu des les avoir l'un superposé à l'autre.

**s.n.a.f.u** · 16/12/2008, 11h30

Envoyé par apt

Pour mon cas, je voulais mettre mes deux boutons sur la même ligne (cote à cote avec un espace entre les deux bien sur) au lieu des les avoir l'un superposé à l'autre.

Alors j'ai un code super fort pour ça. Accroches-toi bien, c'est high level :

Code :

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

1
2
3
 
<input name="Accept" type="button"  value="Accept" class="submit"/>
<input name="Refuse" type="button"  value="Refuse" class="submit"/>

Hélas, ce tip hyper sophistiqué ne marchera pas chez toi à cause du style que tu indiques en début de page :

Code :

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

1
2
3
4
5
6
7
8
input, textarea { 
border: 3px double #DDDDDD; 
padding: 2px; 
font: 11px Geneva, Arial, Helvetica, sans-serif; 
display: block; 
margin: 4px 0 4px 0; 
}

Ce style est-il nécessaire ?

**Erwan31** · 16/12/2008, 11h38

Envoyé par jml94

Alors j'ai un code super fort pour ça. Accroches-toi bien, c'est high level :

Code :

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

1
2
3
 
<input name="Accept" type="button"  value="Accept" class="submit"/>
<input name="Refuse" type="button"  value="Refuse" class="submit"/>

Lol alors si ce n'était que ça... Es tu certain que tu as beaucoup cherché Apt?

Avec ça <li style="display:block"> ça risque pas de marcher non plus.
Je crois qu'il va falloir que tu révises les fondamentaux que tu n'as manifestement pas encore acquis Apt

**s.n.a.f.u** · 16/12/2008, 11h45

J'ai trouvé ça en ressource interne : http://pbnaigeon.developpez.com/tuto...s-de-base/#LIV

Et je plaisantais un peu, mais je dois bien avouer que j'ai mis quelques temps à être à l'aise avec les displays, alors ne te prive pas de cette lecture édifiante.

Bon courage.

**apt** · 16/12/2008, 15h36

Envoyé par Erwan31

Lol alors si ce n'était que ça... Es tu certain que tu as beaucoup cherché Apt?

Avec ça <li style="display:block"> ça risque pas de marcher non plus.
Je crois qu'il va falloir que tu révises les fondamentaux que tu n'as manifestement pas encore acquis Apt

Oui tu as raison Erwan31

Et c'est sur que je devrais encore apprendre

D'ailleurs cette faute commise en haut m'a appris, avec l'aide du lien du jml94, de différencier les éléments inline et ceux en block ainsi que leurs affichage respectif

**apt** · 16/12/2008, 16h02

Envoyé par jml94

Ce style est-il nécessaire ?

C'est cette ligne :

Code :

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

display:block

qui causais le probleme

Je l'ai enlevé, et hop !

Les boutons se placent l'un à coté de l'autre

Code :

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

1
2
3
4
<ul style="list-style: none;">
     <li style="display: inline;"><input name="Accept" type="button"  value="Accept" class="submit"/></li>
     <li style="display: inline;"><input name="Refuse" type="button"  value="Refuse" class="submit"/></li>
    </ul>

J'ai ensuite fait un autre essai, en créant une nouvelle class :

Code :

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

1
2
3
4
#styleform span.2btn{
     display:block;
     margin:0 10px;
}

avec le XHTML :

Code :

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

1
2
<span class"2btn"><input name="Accept" type="button"  value="Accept" class="submit"/></span>
<span class="2btn"><input name="Refuse" type="button"  value="Refuse" class="submit"/></span>

et ça marche aussi

Par contre cette ce troisième essai ne marche pas (je crois que j'ai encore fait une bétise

)

Code :

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

1
2
3
4
5
6
7
8
#divbtn ul {
     list-style:none;
}
 
#divbtn ul il {
     display:inline;
     margin :0 10px;
}

Code :

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

1
2
3
4
5
6
<div id="divbtn">
    <ul>
     <li><input name="Accept" type="button"  value="Accept3" class="submit"/></li>
     <li><input name="Refuse" type="button"  value="Refuse3" class="submit"/></li>
    </ul>
  </div>

Pourquoi ?

Merci

**s.n.a.f.u** · 16/12/2008, 16h09

Je te propose un autre truc old school, assez peu en vogue actuellement : la simplicité.

Code :

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

1
2
3
4
5
6
7
8
9
 
#divbtn input {
     margin :0 10px;
}
 
<div id="divbtn">
     <input name="Accept" type="button"  value="Accept3" class="submit"/>
     <input name="Refuse" type="button"  value="Refuse3" class="submit"/>
</div>

**Erwan31** · 16/12/2008, 16h20

Envoyé par jml94

Je te propose un autre truc old school, assez peu en vogue actuellement : la simplicité.

Encore mieux

(mais ça dépend du contexte...)

Code :

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

1
2
<input name="Accept" type="button"  value="Accept3" class="submit"/>
<input name="Refuse" type="button"  value="Refuse3" class="submit"/>

Apt, tu n'as pas besoin d'imbriquer tes input dans d'autres éléments pour agir sur leur affichage.
Essaye de t'en tenir au minimum de balises et éviter des éléments inutiles autant que possible.

**apt** · 16/12/2008, 16h47

Ca marche ta solution jml94.

Erwan31 : Comment tu as fait pour que ton code, si simple qu'il soit, marche ?

**s.n.a.f.u** · 16/12/2008, 16h51

Envoyé par apt

Ca marche ta solution jml94.

Erwan31 : Comment tu as fait pour que ton code, si simple qu'il soit, marche ?

Je proteste avec la dernière vigeur !

Et qu'est-ce que je disais là : http://www.developpez.net/forums/d65...s/#post3871279

On m'écoute jamais t'façons !

**apt** · 16/12/2008, 17h05

Non je t'écoute jml94.

Je n'ai pas pris ce code comme solution proposée

Je comprends maintenant la difficulté causée par la ligne display:block

Excuse alors

**Erwan31** · 16/12/2008, 17h16

Envoyé par jml94

Et qu'est-ce que je disais là : http://www.developpez.net/forums/d65...s/#post3871279

Bon de toute façon je dis des bêtises étant donné qu'un formulaire ne peut avoir comme descendant direct (enfant) que des éléments de niveaux bloc.

Donc il faut bien imbriquer les 2 input dans un div ou un p (plus commun).

Apt > préfère la solution de jlm694.

Comment aligner deux boutons ?

Positionnement en CSS

Discussions similaires

Partager

Partager