Probleme CSS dans affichage resultat sondage

novice100 · 21/11/2010, 17h26

Bonjour,
J'ai un probleme pour afficher les resultats d'un sondage.

Aujourd'hui, j'ai les resultats comme ceci.

Libelle reponse
barre horizontale
donnes en %

Je souhaite avoir ceci aligné sur une même ligne:
Libelle reponse barre horizontale donnes en %

Voici mon code :

Code :

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

echo '<div style="background-color:#3366FF; width:'.$pourcentage.'px; height:10px;"></div>'.$pourcentage.'%<br />';

ornitho13 · 21/11/2010, 18h11

Salut,

je te conseillerais d'utiliser le float:left sur chaque div englobant une donnée à afficher (label, barre, donnée en %).

Peux tu donner un peu plus de code html (class, id et autre)?

merci

Jerome

novice100 · 21/11/2010, 18h21

J'ai essaye les float : left; mais rien ne fonctionne.

Voici ma page :

Code php :

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
<html>
<head>
<title>Résultats des votes</title>
</head>
 
<body>
<?php
// Déclaration des paramètres de connexion
$hostname_cnxsitephp = "localhost";
$username_cnxsitephp = "root";
$database_cnxsitephp = "forum";
$password_cnxsitephp = "";
// on se connecte à notre base de données
$link = mysql_pconnect($hostname_cnxsitephp, $username_cnxsitephp, $password_cnxsitephp) or die("erreur de connexion au serveur");
mysql_select_db($database_cnxsitephp) or die("erreur de connexion a la base de donnees");
// on selectionne la question et l'id du sondage en cours
$sql = 'SELECT id, question FROM sondage_questions ORDER BY id DESC LIMIT 0,1';
 
// on lance la requête
$req = mysql_query ($sql) or die ('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
 
// on récupère le résultat dans un tableau associatif
$data = mysql_fetch_array ($req);
 
// on libère l'espace mémoire alloué à cette requête
 
$nb_sondage = mysql_num_rows($req);
mysql_free_result ($req);
 
if ($nb_sondage == 0) {
                echo 'Aucun sondage.';
}
else {
 
                // on affiche la question
                echo stripslashes(htmlentities(trim($data['question']))),'<br /><br />';
 
                // on déclare un tableau qui contiendra les réponses de notre sondage
                $tableau_reponses = array();
 
                // on déclare un tableau qui contiendra le nombre de réponse à chaque question
                $tableau_nb_reponses = array();
 
                // on selectionne les reponses de ce sondage
                $sql = 'SELECT reponse, nb_reponses FROM sondage_reponses WHERE id_sondage="'.$data['id'].'"';
 
                // on lance la requête
                $req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
 
                // on prépare notre boucle pour récupérer les différents choix possibles de réponses
                while ($data = mysql_fetch_array($req)) {
                               // on place ces valeurs dans nos deux tableaux
                               $tableau_reponses[] = $data['reponse'];
                               $tableau_nb_reponses[] = $data['nb_reponses'];
                }
 
 
                // on compte le nombre de réponses possible de notre sondage
                $nb_reponses_du_sondage = count ($tableau_reponses);
 
                // on compte le nombre total de réponses pour ce sondage
                $nb_total_reponse = array_sum ($tableau_nb_reponses);
 
                // on teste le nombre de vote
                if ($nb_total_reponse == 0) {
                               // cas où personne n'a voté
                               echo 'Aucun vote pour linstant';
                }
                else {
 
                               // cas où quelqu'un a déjà voté
                               for ($i = 0; $i < $nb_reponses_du_sondage; $i++) {
                                               // on affiche une réponse
                                               echo $tableau_reponses[$i];
 
                                               // on calcul le pourcentage de cette réponse
                                               $pourcentage = ($tableau_nb_reponses[$i] * 100) / $nb_total_reponse;
 
                                               // on arrondi ce calcul à un chiffre après la virgule
                                               $pourcentage = round ($pourcentage);
 
                                               // on affiche le pourcentage
 
											   echo '<div style="background-color:#3366FF; width:'.$pourcentage.'px; height:15px;"></div><div>'.$pourcentage.'%</div>';
 
 
											}
 
 
                               // on affiche le nombre total de votes
                               echo '<br />Nombre de votes : ', $nb_total_reponse;
                }
}
?>
</body>
</html>

ornitho13 · 21/11/2010, 18h45

ce qui serait pas mal, c'est que tu mettes le code html "généré" (c'est a dire sans php), ce serait plus facile à visualiser.

merci

novice100 · 21/11/2010, 19h04

Pour remarque, c'est surtout le % que veut devant la barre horizontale

Voici le code html :

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
<html>
<head>
<title>Résultats des votes</title>
</head>
 
<body>
Quel age avez-vous ?<br /><br />
un an<div style="background-color:#3366FF; width:21px; height:15px;"></div><div>21%</div>
deux ans<div style="background-color:#3366FF; width:39px; height:15px;"></div><div>39%</div>
trois ans<div style="background-color:#3366FF; width:31px; height:15px;"></div><div>31%</div>
quatre ans<div style="background-color:#3366FF; width:10px; height:15px;"></div><div>10%</div><br />
Nombre de votes : 101</body>
 
</html>

ornitho13 · 24/11/2010, 15h13

Salut,

il faut revoir la structure html et utiliser comme je te l'avais dit le float:left.

Voici un exemple qui fonctionne

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<html>
	<head>
		<title>Résultats des votes</title>
		<style type="text/css">
			.block div{
				float:left;
				margin-right:20px;
			}
			.label{
				width:100px;
			}
			.block{
				clear:left;
				margin-bottom:10px;
			}
		</style>
	</head>
	<body>
		<div class="block">
			Quel age avez-vous ?
		</div>
		<div class="block">
			<div class="label">un an</div>
			<div style="background-color:#3366FF; width:21px; height:15px;"></div>
			<div>21%</div>
		</div>
		<div class="block">
			<div class="label">deux ans</div><div style="background-color:#3366FF; width:39px; height:15px;"></div><div>39%</div>
		</div>
		<div class="block">
			<div class="label">trois ans</div><div style="background-color:#3366FF; width:31px; height:15px;"></div><div>31%</div>
		</div>
		<div class="block">
			<div class="label">quatre ans</div><div style="background-color:#3366FF; width:10px; height:15px;"></div><div>10%</div><br />	
		</div>
		<div class="block">
			Nombre de votes : 101
		</div>
	</body>
</html>

++

21/11/2010, 17h26	#1
novice100 Invité régulier Inscription : octobre 2010 Messages : 63 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 63 Points : 6 Points : 6	Probleme CSS dans affichage resultat sondage Bonjour, J'ai un probleme pour afficher les resultats d'un sondage. Aujourd'hui, j'ai les resultats comme ceci. Libelle reponse barre horizontale donnes en % Je souhaite avoir ceci aligné sur une même ligne: Libelle reponse barre horizontale donnes en % Voici mon code : Code : Sélectionner tout - Visualiser dans une fenêtre à part echo '<div style="background-color:#3366FF; width:'.$pourcentage.'px; height:10px;"></div>'.$pourcentage.'%<br />';
	00

21/11/2010, 18h11	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, je te conseillerais d'utiliser le float:left sur chaque div englobant une donnée à afficher (label, barre, donnée en %). Peux tu donner un peu plus de code html (class, id et autre)? merci Jerome
	00

21/11/2010, 18h45	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	ce qui serait pas mal, c'est que tu mettes le code html "généré" (c'est a dire sans php), ce serait plus facile à visualiser. merci
	00

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