Liste de choix sur la droite d'un titre

**xeron33** · 27/10/2012, 11h51

Bonjour,
J'ai besoin de rajouter une liste de choix sur la gauche d'un titre centré codé comme ceçi :

Code :

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

1
2
3
4
 
<p><h4 align="center">ENQUETE DE SATISFACTION CLIENT </h4><br />
 
    </p>

J'ai donc codé comme ceçi :

Code :

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

1
2
3
4
5
6
7
8
9
10
<p><h4 align="center">ENQUETE DE SATISFACTION CLIENT </h4><br />
    <p align ="right" style="font-size:16px;">Année:
		 	<select name="enq_version" >
    			<option value="enq_Année_1">2009</option>
    			<option value="enq_Année_2">2010</option>
    			<option value="enq_Année_3">2011</option>
    			<option value="enq_Année_4">2012</option>
			</select>    
    </p>

pour créer ma liste, mais le problème est que la liste apparait dans ce code là dessous le titre ("Enquete de satisfaction client") :
et je voudrais le voir apparaitre sur la même ligne et à droite également.
Je n'arrive pas à trouver la solution, si quelqu'un peut m'aider merçi.

**Muchos** · 27/10/2012, 16h00

Comme ça ?

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
21
22
23
24
25
26
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>alignement éléments</title>
	<style type="text/css">
#mon-enquete {text-align: center;}
#mon-enquete h4 {text-transform: uppercase; display: inline;}
#mon-enquete p {display: inline;}
        </style>
</head>
<body>
	<div id="mon-enquete">
		<h4>Enquête de satisfaction client</h4>
    	<p>Année:
			<select name="enq_version" >
				<option value="enq_Année_1">2009</option>
				<option value="enq_Année_2">2010</option>
				<option value="enq_Année_3">2011</option>
				<option value="enq_Année_4">2012</option>
			</select>    
	    </p>
	</div>
</body>
</html>

**laurentSc** · 27/10/2012, 22h16

Très intéressant ; ça me fait découvrir le display: inline alors que j'imaginais une bête solution du type :

Code :

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

<table><tr><td>partie 1 du titre</td><td>partie 2 du titre</td></tr></table>

**Muchos** · 28/10/2012, 16h08

Et pour pouvoir par ex. modifier les dimensions de tes éléments inline, tu peux les rendre à la fois bloc et en ligne avec display:inline-block :

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
21
22
23
24
25
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>inline - inline-block</title>
	<style type="text/css">
li {background-color: orange; width: 4em; height: 2em;}
.inline li {display: inline;}
.inline-block li {display: inline-block;}
        </style>
</head>
<body>
	<ul class="inline">
		<li><a href="#">toto</a></li>
		<li><a href="#">toto</a></li>
		<li><a href="#">toto</a></li>
	</ul>
	<ul class="inline-block">
		<li><a href="#">toto</a></li>
		<li><a href="#">toto</a></li>
		<li><a href="#">toto</a></li>
	</ul>
</body>
</html>

**xeron33** · 28/10/2012, 20h15

Envoyé par Muchos

Comme ça ?

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
21
22
23
24
25
26
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>alignement éléments</title>
	<style type="text/css">
#mon-enquete {text-align: center;}
#mon-enquete h4 {text-transform: uppercase; display: inline;}
#mon-enquete p {display: inline;}
        </style>
</head>
<body>
	<div id="mon-enquete">
		<h4>Enquête de satisfaction client</h4>
    	<p>Année:
			<select name="enq_version" >
				<option value="enq_Année_1">2009</option>
				<option value="enq_Année_2">2010</option>
				<option value="enq_Année_3">2011</option>
				<option value="enq_Année_4">2012</option>
			</select>    
	    </p>
	</div>
</body>
</html>

*********************************************
Merçi pour ton aide, j'ai essayé d'adapter ton code à ma page :

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
 
<head>
	<meta charset="UTF-8" />
	<title>alignement éléments</title>
	<style type="text/css">
#mon-enquete {text-align: center;}
#mon-enquete h4 {text-transform: uppercase; display: inline;}
#mon-enquete p {display: inline;}
        </style>
</head>
<form name="form" method="post" action="<?php echo $this->baseurl ?>/enquete/site_web/enquete_upload.php" enctype="multipart/form-data">      
  <div id="mon-enquete">
 <h4 align="center">ENQUETE DE SATISFACTION CLIENT </h4>
    <p Année:
		 	<select name="annee" >
    			<option value="2009">2009</option>
    			<option value="2010">2010</option>
    			<option value="2011">2011</option>
    			<option value="2012">2012</option>
			</select>    
    </p>
    </div>

Mais ça ne fonctionne pas.
Il m'affiche la page comme ça :
ENQUETE DE SATISFACTION CLIENT

2009

2010

2011

2012

peut être que j'ai pas tout à fait bien adapter ton code, merçi de me tenir au courant.
A +

**Muchos** · 28/10/2012, 22h38

La balise <p> n'est pas fermée.
EDIT 2012-10-29: en fait, le code n'était ni fait ni à faire.

PS: Ne pas faire <h4 align="center">. Plutôt utiliser h4 {text-align: center;}

**laurentSc** · 28/10/2012, 22h48

Plutôt utiliser h4 {text-align: center;}

Oui et d'ailleurs, comme il y a déjà un truc sur h4 :

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
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><!-- bien vu, pour gérer les accents -->
	<title>alignement éléments</title>
	<style type="text/css">
#mon-enquete {text-align: center;}
#mon-enquete h4 {text-transform: uppercase; display: inline; text-align: center;} 
#mon-enquete p {display: inline;}
        </style>
</head>
<form name="form" method="post" action="<?php echo $this->baseurl ?>/enquete/site_web/enquete_upload.php" enctype="multipart/form-data">      
  <div id="mon-enquete">
 <h4 align="center">ENQUETE DE SATISFACTION CLIENT </h4>
    <p> <!-- je ferme la balise !! --> Année:
		 	<select name="annee" >
    			<option value="2009">2009</option>
    			<option value="2010">2010</option>
    			<option value="2011">2011</option>
    			<option value="2012">2012</option>
			</select>    
    </p>
    </div>

**xeron33** · 29/10/2012, 20h30

Envoyé par Muchos

La balise <p> n'est pas fermée.

PS: Ne pas faire <h4 align="center">. Plutôt utiliser h4 {text-align: center;}

Si elle est fermée :

Code :

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

1
2
3
4
5
6
7
8
9
<p Année:
		 	<select name="annee" >
    			<option value="2009">2009</option>
    			<option value="2010">2010</option>
    			<option value="2011">2011</option>
    			<option value="2012">2012</option>
			</select>    
    </p>

**xeron33** · 29/10/2012, 20h32

Merçi pour vos réponses mais ça ne marche toujours pas toujours le même affichage

**Muchos** · 29/10/2012, 22h24

Ôte-nous d'un doute : tu avais laissé le code tel quel, sans les balises obligatoires manquantes ? ô_ò

Avec du code valide, ça marche

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
21
22
23
24
25
26
 
<!doctype html>
<head>
	<meta charset="UTF-8" /><!-- bien vu, pour gérer les accents -->
	<title>alignement éléments</title>
	<style type="text/css">
#mon-enquete {text-align: center;}
#mon-enquete h4 {text-transform: uppercase; display: inline; text-align: center;} 
#mon-enquete p {display: inline;}
        </style>
</head>
<body>
	<!-- <form name="form" method="post" action="<?php echo $this->baseurl ?>/enquete/site_web/enquete_upload.php" enctype="multipart/form-data"> -->
	<div id="mon-enquete">
	<h4>Enquête de satisfaction client</h4>
		<p><!-- je ferme la balise !! --> Année:
			 	<select name="annee" >
					<option value="2009">2009</option>
					<option value="2010">2010</option>
					<option value="2011">2011</option>
					<option value="2012">2012</option>
				</select>    
		</p>
	</div>
</body>
</html>

**xeron33** · 29/10/2012, 23h31

Merçi pour ta réponse, oui je n'avais pas mis les balises Head et Body, mais les mettre ou ne pas les mettre ne changent rien à mon problème. Je les ai rajoutées voiçi mon code là maintenant ça marche, j'ai tout sur la même ligne à part que je n'arrive pas à placer la liste année à droite alors que pour l'instant elle touche le titre.
En gras ce qui manquait pour que ça marche et en italique le "align = right " qui ne fonctionne pas.

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
<head>
	<meta charset="UTF-8" />
	<title>alignement éléments</title>
	<style type="text/css">
#mon-enquete {text-align: center;}  
#mon-enquete h4 {text-transform: uppercase; display: inline;}
#mon-enquete p {display: inline;}
	</style>
</head>
<body>
<form name="form" method="post" action="<?php echo $this->baseurl ?>/enquete/site_web/enquete_upload.php" enctype="multipart/form-data">      
  <div id="mon-enquete">
 <h4>ENQUETE DE SATISFACTION CLIENT</h4>
    <p align="right" style="font-size:16px;">Année :
		 	<select name="annee" >
    			<option value="2009">2009</option>
    			<option value="2010">2010</option>
    			<option value="2011">2011</option>
    			<option value="2012">2012</option>
			</select>    
    </p>
    </div>

Merçi encore à +

**NoSmoking** · 30/10/2012, 19h21

Bonjour,

Code :

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

1
2
3
4
5
6
7
8
<p><label for="annee">ENQUETE DE SATISFACTION CLIENT Année :</label>
  <select name="annee" id="annee">
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
  </select>
</p>

me parait plus sain.

**xeron33** · 31/10/2012, 17h45

Merçi pour ta réponse hélas ça ne change rien j'ai toujours la liste année collée au titre alors que je la voudrais à droite.
Pourrais tu m'expliquer ton code :

Code :

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

<p><label for="annee">

car je ne connaissais pas l'emploi de "for" dans du html.
Merçi encore.
A +

**NoSmoking** · 31/10/2012, 18h52

j'ai toujours la liste année collée au titre alors que je la voudrais à droite.

je pense qu'il est nécessaire que tu précises vraiment ton besoin car le SELECT est bien à doite du titre.

Sinon pour l’éloigner tu peux introduire une notion de marge

Code :

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

<label for="annee" style="margin-right:100px">ENQUETE DE SATISFACTION CLIENT Année :</label>

car je ne connaissais pas l'emploi de "for" dans du html.

Un avant goût de ce que tu rates

La balise LABEL

**laurentSc** · 31/10/2012, 23h00

instructif ; car je ne connaissais ni label ni margin-right ; pour créer un écartement, je fais d'habitude :

Code :

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

<table><tr><td>Premiere partie du texte</td><td width=100px>&nbsp;</td><td>Seconde partie du texte</td></tr></table>

un peu lourdingue...

**NoSmoking** · 01/11/2012, 09h00

Envoyé par laurentSc

...un peu lourdingue...

je le pense également !

Mais si l'envie de savoir te hantes il y à The label element et le reste bien sûr.

**xeron33** · 01/11/2012, 10h43

Envoyé par NoSmoking

je pense qu'il est nécessaire que tu précises vraiment ton besoin car le SELECT est bien à doite du titre.

Sinon pour l’éloigner tu peux introduire une notion de marge

Code :

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

<label for="annee" style="margin-right:100px">ENQUETE DE SATISFACTION CLIENT Année :</label>

Un avant goût de ce que tu rates

La balise LABEL

Merçi pour ton aide, maintenant j'ai bien la liste sur la droite grâce à

Code :

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

1
2
 
style="margin-right:100px"

mais je voudrais mettre une étiquette à coté de cette liste et la nommer "Année" et d'après ce que j'ai compris l'étiquette est "ENQUETE DE SATISFACTION CLIENT". Comment faire pour par exemple coller un espace sur cette même étiquette pour séparer "ENQ ..." et "ANNEE" ?
Je suis allé voir l'explication du for j'avoue que ça me donne pas grand chose de plus :
"Renvoie, par un simple clic sur cette étiquette, au champ de formulaire portant cette valeur d'identifiant."
si tu pouvais m'éclaircir.
Merçi encore A +

**laurentSc** · 01/11/2012, 23h35

Comment faire pour par exemple coller un espace sur cette même étiquette pour séparer "ENQ ..." et "ANNEE" ?

En réutilisant le tag <label> :

Code :

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

1
2
<label for="annee" style="margin-right: 100px;">ENQUETE
DE SATISFACTION CLIENT</label><label> Ann&eacute;e :</label>

J'ai compris à quoi il sert

mais l'important, c'est margin-right car on peut se passer de label :

Code :

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

1
2
<span style="margin-right: 100px;">ENQUETE
DE SATISFACTION CLIENT</span><span> Ann&eacute;e :</span>

**Muchos** · 02/11/2012, 02h01

Envoyé par laurentSc

En réutilisant le tag <label>

Attention quand même : un label est spécifique et associé à un champ de contrôle du formulaire.

**NoSmoking** · 02/11/2012, 15h05

Envoyé par xeron33

...mais je voudrais mettre une étiquette à coté de cette liste et la nommer "Année" et d'après ce que j'ai compris l'étiquette est "ENQUETE DE SATISFACTION CLIENT". Comment faire pour par exemple coller un espace sur cette même étiquette pour séparer "ENQ ..." et "ANNEE" ?

Code :

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

1
2
3
4
5
6
7
8
<p>ENQUETE DE SATISFACTION CLIENT <label for="annee" style="margin-left:100px;">Année :</label>
  <select name="annee" id="annee">
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
  </select>
</p>

Liste de choix sur la droite d'un titre

HTML

Discussions similaires

Partager

Partager