Boutons superposés sur une ligne [Résolu]

Luke spywoker · 17/08/2011, 12h22

Salut les HTML,
Je n'arrive pas a placer mes boutons dans un formulaire comme je le souhaite: le <fieldset> est composer de 2 <select> et de 2 <button>, et j'aimerai placer sur une meme ligne le premier <select> puis les 2 deux <button> l'un au dessus de l'autre puis le deuxième <select> le tout sur une ligne.

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
 
<!DOCTYPE html>
<html lang='fr'>
<head>
<title>Je n'arrive pas a placer mes &amp;button&amp;</title>
</head>
<body>
<form>
<fieldset>
<select size='4'>
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
<option>item 4</option>
</select>
<button>button 1</button>
<button>button 2</button>
<select size='4'>
<option>item 5</option>
<option>item 6</option>
<option>item 7</option>
<option>item 8</option>
</select>
</fieldset>
</form>
</body>
</html>

Le problème étant que si j'insère un <br> après mon premier <button> afin que l'autre soit en dessous tout se décale. J'ai essayer avec des <span> et des propriétés {vertical-align: top|bottom} je n'y arrive pas.
Je pari que la réponse est simple, simplement je suis débutant en HTML.
Je cherche a obtenir quelque chose comme ca:

Code :

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

1
2
3
4
5
6
7
8
 
 
<select>............<select>
<option>.<button>...<option>
<option>............<option>
<option>.<button>...<option>
<option>............<option>
</select>...........</select>

Merci pour vos réponses.

17/08/2011, 12h41

essaye ===>

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
 
<form>
<fieldset>
<p>
  <select>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
    <option>item 4</option>
  </select>
</p>
<p></p>
<button>button 2</button> 
<p>
  <select>
 
    <option>item 5</option>
    <option>item 6</option>
    <option>item 7</option>
    <option>item 8</option>
  </select>
</p>
<p></p>
<button>button 1</button>
 
 
 
</fieldset>
</form>

Luke spywoker · 17/08/2011, 13h08

J'ai essayer sa ne marche pas: j'ai essayer avec les élements dans des balises <p></p> et meme avec une balise <div style='display:inline;'> qui englobe le tout sa marche pas. meme pas le copier-coller du code de biyob0, utiliser la balise <p> comme retour a la ligne a la place du térrible <br> est une idée néanmoins.

jreaux62 · 18/08/2011, 11h27

Bonjour,
si j'ai bien compris les explications :

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
<div id="formulaire"> 
<form>
<fieldset>
	<div style="float:left;">
	  <select>
		<option>item 1</option>
		<option>item 2</option>
		<option>item 3</option>
		<option>item 4</option>
	  </select>
	</div>
	<div style="float:left;">
		<button>button 1</button><br />
		<button>button 2</button> 
	</div>
	<div style="float:left;">
	  <select>
		<option>item 5</option>
		<option>item 6</option>
		<option>item 7</option>
		<option>item 8</option>
	  </select>
	</div>
</fieldset>
</form>
</div>

Luke spywoker · 21/08/2011, 08h03

Merci pour la réponse ton code marche mais entre temps le mien aussi: qui est constituer d'une <fieldset> principale diviser en 3 sous-<fieldset> qui on des bords a la meme couleur que le fond, sa marche aussi.
Problème résolu mais dans le livre que j'ai lu pour me former au HTML5 les balises <span> sont furtivement présenter comme des sous balises de la balise <div> servant a créer des colonnes dans une <div>, dite moi si je me trompe a leurs sujet (balise <span>).
Merci pour vos réponses.

jreaux62 · 21/08/2011, 10h46

-> HTML <span> Tag

Citation:

Traduction (anglais > français)
La balise <span> est utilisée pour le groupe inline-éléments dans un document.
La balise <span> fournit aucun changement visuel par lui-même.
La balise <span> fournit un moyen d'ajouter un crochet (une ancre) à une partie d'un texte ou une partie d'un document.
Lorsque le texte est accroché dans un élément span, vous pouvez ajouter des styles au contenu, ou de manipuler le contenu avec JavaScript par exemple.

-> HTML <div> Tag

Citation:

Traduction (anglais > français)
La balise <div> définit une division ou une section dans un document HTML.
La balise <div> est souvent utilisé pour un groupe de bloc-éléments pour les formater avec des styles.

jreaux62 · 21/08/2011, 10h51

Citation:

Envoyé par Luke spywoker

Merci pour la réponse ton code marche mais entre temps le mien aussi

Bonjour,
tu peux poster ton code ? Ca pourrait en intéresser certains ici. Merci.

Luke spywoker · 22/08/2011, 00h39

Voici le code demander:

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
 
<form>
<fieldset>
<legend>J'arrive a placer mes boutons</legend>
<fieldset style='border: white;display: inline;'>
<select size='4'>
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
<option>item 4</option>
</select>
</fieldset>
<fieldset style='border: white; display: inline;'> 
<button>button1</button><br>
<button>button2</button>
</fieldset>
<fieldset style='border: white;display: inline;'> 
<select size='4'>
<option>item 5</option>
<option>item 6</option>
<option>item 7</option>
<option>item 8</option>
</select>
</fieldset>
</fieldset>
</form>

Pas très élégant j'avoue, mais le validateur ne ronchonne pas.

zeclad01 · 22/08/2011, 09h02

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
<fieldset>
	<select style="width:200px;">
		<option>Select 1 - Option 1</option>
		<option>Select 1 - Option 2</option>
		<option>Select 1 - Option 3</option>
	</select>
	<button>Bouton 1</button>
	<select>
		<option>Select 2 - Option 1</option>
		<option>Select 2 - Option 2</option>
		<option>Select 2 - Option 3</option>
	</select>
	<br/>
	<button style="margin-left:200px;">Bouton 2</button>
</fieldset>

ou

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
<fieldset>
	<select style="width:200px;">
		<option>Select 1 - Option 1</option>
		<option>Select 1 - Option 2</option>
		<option>Select 1 - Option 3</option>
	</select>
	<button>Bouton 1</button>
	<select>
		<option>Select 2 - Option 1</option>
		<option>Select 2 - Option 2</option>
		<option>Select 2 - Option 3</option>
	</select>
	<br/>
	<span style="margin-left:200px;"></span>
	<button>Bouton 2</button>
</fieldset>

C'est ça que tu veux faire ? O_o

17/08/2011, 13h08	#3
Luke spywoker Membre confirmé Etudiant informatique autodidacte Inscription : juin 2010 Messages : 452 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Etudiant informatique autodidacte Informations forums : Inscription : juin 2010 Messages : 452 Points : 278 Points : 278	J'ai essayer sa ne marche pas: j'ai essayer avec les élements dans des balises <p></p> et meme avec une balise <div style='display:inline;'> qui englobe le tout sa marche pas. meme pas le copier-coller du code de biyob0, utiliser la balise <p> comme retour a la ligne a la place du térrible <br> est une idée néanmoins. __________________ Pour faire tes armes: Use du présent pour construire ton futur sinon use de ce que tu as appris auparavant. Et sois toujours bien armé avant de te lancer. Le hasard ne sourit qu'aux gens préparés... Blog: http://3dcyberspace.unblog.fr/ Site: Sanctuaire cybernétique
	00

21/08/2011, 08h03	#5
Luke spywoker Membre confirmé Etudiant informatique autodidacte Inscription : juin 2010 Messages : 452 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Etudiant informatique autodidacte Informations forums : Inscription : juin 2010 Messages : 452 Points : 278 Points : 278	Merci pour la réponse ton code marche mais entre temps le mien aussi: qui est constituer d'une <fieldset> principale diviser en 3 sous-<fieldset> qui on des bords a la meme couleur que le fond, sa marche aussi. Problème résolu mais dans le livre que j'ai lu pour me former au HTML5 les balises <span> sont furtivement présenter comme des sous balises de la balise <div> servant a créer des colonnes dans une <div>, dite moi si je me trompe a leurs sujet (balise <span>). Merci pour vos réponses. __________________ Pour faire tes armes: Use du présent pour construire ton futur sinon use de ce que tu as appris auparavant. Et sois toujours bien armé avant de te lancer. Le hasard ne sourit qu'aux gens préparés... Blog: http://3dcyberspace.unblog.fr/ Site: Sanctuaire cybernétique
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email