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, 20h32

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

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

Liste de choix sur la droite d'un titre

HTML

Vue hybride

Discussions similaires

Partager

Partager