Alignement image en CSS

**Denis Placé** · 20/09/2015, 17h00

Bonjour,

De récents échanges ces jours-ci à propos de la création d'un qcm (Voir cette discussion) ont abouti à au script suivant

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<?php session_start();
	header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
	error_reporting(E_ALL); 	// en TEST
// -----------------------------------------------
if( isset($_POST['submitQCMagain']) )
{
	unset($_SESSION['quizz']); // on efface la session
}
// -----------------------------------------------
// 1/ CREATION du QUESTIONNAIRE
// -----------------------------------------------
//	unset($_SESSION['quizz']); // TEST : on efface la session (pour afficher le var_dump) -> commenter la ligne en production
// Si le questionnaire n'a pas encore été mis en SESSION, on le crée
if( empty($_SESSION['quizz']) || empty($_SESSION['quizz']['go']) )
{
	// ---------------------------------
	// CONNEXION à la BdD
		include "../php/mysqli_conf.inc.php"; // Inclusion du fichier de connexion &agrave; la base de donn&eacute;es
		$link = mysqli_connect($host,$login,$password,$base) or die(mysqli_error($link));	// Connexion &agrave; MySql
		mysqli_set_charset ( $link , 'UTF8' ); // ON IMPOSE UTF-8
	// ---------------------------------
	// tables utiles
	define('TAB_QUESTIONS',	'questions');
	define('TAB_REPONSES',	'reponses');
	// Définition des paramètres
	$nbre_questions_affiche = 6; // nombre de questions à afficher (parmi toutes celles enregistrées en BdD)
	// on découpe le questionnaire en plusieurs séries
	$nbre_questions_par_serie = 2; // nombre de questions par série
	// ---------------------------------
	// Création du questionnaire
	$questions = array();
	$query_questions = "SELECT * FROM ".TAB_QUESTIONS." ORDER BY RAND() LIMIT 0, ".$nbre_questions_affiche.";"; // Mélange aléatoire
	if ($result = mysqli_query($link, $query_questions))
	{
		while($question = mysqli_fetch_assoc($result))
		{
			list($liste_choix, $question['reponse_juste']) = explode(';', $question['choix_question']);//on sépare les choix de la réponse juste
			$question['choix_reponse'] = array();
			// libellé des reponses
			$query_reponses = "SELECT * FROM ".TAB_REPONSES." WHERE id_reponse IN (".$liste_choix.");";	//on récupère le choix de réponse
			if ($requete_reponses = mysqli_query($link, $query_reponses))
			{
				while($row_reponse = mysqli_fetch_assoc($requete_reponses))
				{
					$question['choix_reponse'][$row_reponse['id_reponse']]	= $row_reponse['texte_reponse']; //on met le choix de réponse dans le tableau de choix des réponses
				}
				array_push($questions, $question);//on met la réponse dans le tableau de réponses.
			}
		}
	}
	// ---------------------------------
	// Mélange aléatoire des questions // INUTILE, puisqu'on a utilisé RAND() dans la requete
//	shuffle( $questions ); // shuffle mélange les éléments d'un tableau
	// on découpe le questionnaire en plusieurs séries
	$questions_series = array_chunk( $questions, $nbre_questions_par_serie, true );
	// ---------------------------------
	// On met le questionnaire en SESSION
	$_SESSION['quizz'] = array();
	$_SESSION['quizz']['questions'] = $questions_series;	// met en session le tableau (mélangé) des séries questions
	$_SESSION['quizz']['index'] = 0;						// index de la seri de questions en cours
	$_SESSION['quizz']['go'] = true;						// si true : on a répondu à toutes les questions
	$_SESSION['quizz']['resultats'] = array();				// array qui permettra de stocker les reponses du candidat
	// Pour éviter les problèmes en cas de rechargement de la page (F5 ou touche < du navigateur)
	$_SESSION['quizz']['checkserie'] = uniqid('quizz_');
	$_SESSION['quizz']['affiche_result'] = false;
	// ---------------------------------
//	var_dump($_SESSION['quizz']);	// Affiche le contenu du tableau -> commenter la ligne en production
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Questionnaire du Quizz</title>
	<style type="text/css">
#quizz { width:100%;max-width:800px;margin:0 auto; }
#quizz form ul { list-style-type:none; }
#quizz .quizz-table { width:100%; }
#quizz .quizz-table fieldset { margin:10px 0; padding:0;  }
#quizz .quizz-table fieldset div { display:inline-block; width:46%; margin:0; padding:0 2%; vertical-align:middle; }
#quizz .quizz-table fieldset figure { display:inline-block; width:46%; margin:0; padding:0 2%; vertical-align:middle; text-align:center; }
#quizz .quizz-table fieldset figure img { max-width:300px; max-height:200px; }
#quizz .quizz-msg { color:#fff; text-align:center; padding:10px; }
	</style>
</head>
<body>
 
	<div id="quizz">
<?php
// -----------------------------------------------
// 2/ TRAITEMENT du FORMULAIRE si soumis
// -----------------------------------------------
if( isset($_POST['submitQCM']) && $_SESSION['quizz']['checkserie']== $_POST['checkserie'] )
{
	// on enregistre les réponses
	$_SESSION['quizz']['resultats'][$_SESSION['quizz']['index']] = $_POST['resultats']; // array contenant les réponses du candidat
}
// 4/ AFFICHAGE des RESULTATS
if( $_SESSION['quizz']['index'] == count($_SESSION['quizz']['questions'])-1 ) // derniere serie de questions : on affiche les résultats
{
	$_SESSION['quizz']['go'] = false;
	// on affiche les resultats
	require (__DIR__.'/quizz2-resultat.php'); 
}
if( isset($_POST['submitQCM']) && $_SESSION['quizz']['checkserie']== $_POST['checkserie'] )
{
	$_SESSION['quizz']['index']++;
	// Pour éviter les problèmes en cas de rechargement de la page (F5 ou touche < du navigateur)
	$_SESSION['quizz']['checkserie'] = uniqid('quizz_');
}
// -----------------------------------------------
// 3/ AFFICHAGE du QUESTIONNAIRE
// -----------------------------------------------
// AFFICHAGE du quizz : question + choix des réponses
//if( !empty($_SESSION['quizz']['go']) || (isset($_SESSION['quizz']['index']) && $_SESSION['quizz']['index']!=count($_SESSION['quizz']['questions'])-1) ) // le quizz n'est pas fini (ou pas commencé)
if( !empty($_SESSION['quizz']['go']) ) // le quizz n'est pas fini (ou pas commencé)
{
	$idserie = $_SESSION['quizz']['index'];
	$serie_questions = $_SESSION['quizz']['questions'][$idserie];
?>	
		<h2>Quizz</h2>
		<h3>Série n°<?php echo ($idserie+1); ?></h3>
	  <form id="quizz-form" method="post" action="quizz2.php">
		<input type="hidden" name="checkserie" value="<?php echo $_SESSION['quizz']['checkserie']; ?>"/>
		<div class="quizz-table">
<?php
	$num_question = $idserie;
	foreach($serie_questions as $idque => $question)
	{
		if(!empty($question['choix_reponse']))
		{
			$num_question++;
?>
			<fieldset>
				<legend><?php echo $num_question.' - '.$question['texte_question']; ?></legend>
				<div>
				<ul>
<?php
			$choix_reponse = $question['choix_reponse'];
			shuffle( $choix_reponse ); // on mélange les réponses
			foreach($question['choix_reponse'] as $idrep => $reponse)
			{
				echo '					<li><input type="radio" name="resultats['.$question['id_question'].']" id="reponse'.$idrep.'" value="'.$idrep.'" required="required"/><label for="reponse'.$idrep.'">'.htmlspecialchars($reponse,ENT_QUOTES,'utf-8').'</label></li>'."\n";
			}	
?>
				</ul>
				</div><figure><img border="0" src="<?php echo str_replace('../', './', htmlspecialchars($question['adresse_image'],ENT_QUOTES,'utf-8')); ?>" /></figure>
			</fieldset>
<?php
		}
	}
?>
		</div>
		<p style="text-align:center;"><input type="submit" name="submitQCM" value="Validez vos réponses"/></p>
	  </form>
<?php
} // fin affichage questionnaire
?>
	</div>
 
</body>
</html>

Je préfère ne pas poursuivre dans le post d'origine car le thème est maintenant différent à savoir le style.
Dans le script d'origine ci-dessus, une image apparaît en face d'un qcm. J'ai simplement coupé-collé la mise en forme dans une feuille de style externe mais l'image apparaît maintenant en dessous du texte alors que je souhaiterais la conserver en face.

Le script modifié est le suivant :

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<?php session_start();
	header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
	error_reporting(E_ALL); 	// en TEST
// -----------------------------------------------
if( isset($_POST['submitQCMagain']) )
{
	unset($_SESSION['quizz8']); // on efface la session
}
// -----------------------------------------------
// 1/ CREATION du QUESTIONNAIRE
// -----------------------------------------------
//	unset($_SESSION['quizz8']); // TEST : on efface la session (pour afficher le var_dump) -> commenter la ligne en production
// Si le questionnaire n'a pas encore été mis en SESSION, on le crée
if( empty($_SESSION['quizz8']) || empty($_SESSION['quizz8']['go']) )
{
	// ---------------------------------
	// CONNEXION à la BdD
		include "../php/mysqli_conf.inc.php"; // Inclusion du fichier de connexion &agrave; la base de donn&eacute;es
		$link = mysqli_connect($host,$login,$password,$base) or die(mysqli_error($link));	// Connexion &agrave; MySql
		mysqli_set_charset ( $link , 'UTF8' ); // ON IMPOSE UTF-8
	// ---------------------------------
	// tables utiles
		define('TAB_QUESTIONS',	'questions');
		define('TAB_REPONSES',	'reponses');
	// Définition des paramètres
	$nbre_questions_affiche = 6; // nombre de questions à afficher (parmi toutes celles enregistrées en BdD)
	// on découpe le questionnaire en plusieurs séries
	$nbre_questions_par_serie = 2; // nombre de questions par série
	// ---------------------------------
	// Création du questionnaire
	$questions = array();
	$query_questions = "SELECT * FROM ".TAB_QUESTIONS." ORDER BY RAND() LIMIT 0, ".$nbre_questions_affiche.";"; // Mélange aléatoire
	if ($result = mysqli_query($link, $query_questions))
	{
		while($question = mysqli_fetch_assoc($result))
		{
			list($liste_choix, $question['reponse_juste']) = explode(';', $question['choix_question']);//on sépare les choix de la réponse juste
			$question['choix_reponse'] = array();
			// libellé des reponses
			$query_reponses = "SELECT * FROM ".TAB_REPONSES." WHERE id_reponse IN (".$liste_choix.");";	//on récupère le choix de réponse
			if ($requete_reponses = mysqli_query($link, $query_reponses))
			{
				while($row_reponse = mysqli_fetch_assoc($requete_reponses))
				{
					$question['choix_reponse'][$row_reponse['id_reponse']]	= $row_reponse['texte_reponse']; //on met le choix de réponse dans le tableau de choix des réponses
				}
				array_push($questions, $question);//on met la réponse dans le tableau de réponses.
			}
		}
	}
	// ---------------------------------
	// Mélange aléatoire des questions // INUTILE, puisqu'on a utilisé RAND() dans la requete
//	shuffle( $questions ); // shuffle mélange les éléments d'un tableau
	// on découpe le questionnaire en plusieurs séries
	$questions_series = array_chunk( $questions, $nbre_questions_par_serie, true );
	// ---------------------------------
	// On met le questionnaire en SESSION
	$_SESSION['quizz8'] = array();
	$_SESSION['quizz8']['questions'] = $questions_series;	// met en session le tableau (mélangé) des séries questions
	$_SESSION['quizz8']['index'] = 0;						// index de la seri de questions en cours
	$_SESSION['quizz8']['go'] = true;						// si true : on a répondu à toutes les questions
	$_SESSION['quizz8']['resultats'] = array();				// array qui permettra de stocker les reponses du candidat
	// Pour éviter les problèmes en cas de rechargement de la page (F5 ou touche < du navigateur)
	$_SESSION['quizz8']['checkserie'] = uniqid('quizz_');
	$_SESSION['quizz8']['affiche_result'] = false;
	// ---------------------------------
//	var_dump($_SESSION['quizz8']);	// Affiche le contenu du tableau -> commenter la ligne en production
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Questionnaire du Quizz</title>
 
</head>
<body>
			<script language="javascript">
				<!-- Début
				if (window.screen)
				{ css="feuille.css";}
				document.writeln('<link rel="stylesheet" href="'+css+'" type="text/css">');
				// End -->
			</script>
 
	<div id="quizz">
<?php
// -----------------------------------------------
// 2/ TRAITEMENT du FORMULAIRE si soumis
// -----------------------------------------------
if( isset($_POST['submitQCM']) && $_SESSION['quizz8']['checkserie']== $_POST['checkserie'] )
{
	// on enregistre les réponses
	$_SESSION['quizz8']['resultats'][$_SESSION['quizz8']['index']] = $_POST['resultats']; // array contenant les réponses du candidat
}
// 4/ AFFICHAGE des RESULTATS
if( $_SESSION['quizz8']['index'] == count($_SESSION['quizz8']['questions'])-1 ) // derniere serie de questions : on affiche les résultats
{
	$_SESSION['quizz8']['go'] = false;
	// on affiche les resultats
	require (__DIR__.'/quizz2.php'); 
}
if( isset($_POST['submitQCM']) && $_SESSION['quizz8']['checkserie']== $_POST['checkserie'] )
{
	$_SESSION['quizz8']['index']++;
	// Pour éviter les problèmes en cas de rechargement de la page (F5 ou touche < du navigateur)
	$_SESSION['quizz8']['checkserie'] = uniqid('quizz_');
}
// -----------------------------------------------
// 3/ AFFICHAGE du QUESTIONNAIRE
// -----------------------------------------------
// AFFICHAGE du quizz : question + choix des réponses
//if( !empty($_SESSION['quizz8']['go']) || (isset($_SESSION['quizz8']['index']) && $_SESSION['quizz8']['index']!=count($_SESSION['quizz8']['questions'])-1) ) // le quizz n'est pas fini (ou pas commencé)
if( !empty($_SESSION['quizz8']['go']) ) // le quizz n'est pas fini (ou pas commencé)
{
	$idserie = $_SESSION['quizz8']['index'];
	$serie_questions = $_SESSION['quizz8']['questions'][$idserie];
 
		echo "quizz";
		?>
		<h3>Série n°<?php echo ($idserie+1); ?></h3>
	  <form id="quizz-form" method="post" action="quizz_reponses.php">
		<input type="hidden" name="checkserie" value="<?php echo $_SESSION['quizz8']['checkserie']; ?>"/>
		<div class="quizz-table">
<?php
	$num_question = $idserie;
	foreach($serie_questions as $idque => $question)
	{
		if(!empty($question['choix_reponse']))
		{
			$num_question++;
?>
			<fieldset>
				<legend><?php echo $num_question.' - '.$question['texte_question']; ?></legend>
				<div>
				<ul>
<?php
			$choix_reponse = $question['choix_reponse'];
			shuffle( $choix_reponse ); // on mélange les réponses
			foreach($question['choix_reponse'] as $idrep => $reponse)
			{
				echo '					<li><input type="radio" name="resultats['.$question['id_question'].']" id="reponse'.$idrep.'" value="'.$idrep.'" required="required"/><label for="reponse'.$idrep.'">'.htmlspecialchars($reponse,ENT_QUOTES,'utf-8').'</label></li>'."\n";
			}	
?>
				</ul>
				</div><figure><img border="0" src="<?php echo str_replace('../', './', htmlspecialchars($question['adresse_image'],ENT_QUOTES,'utf-8')); ?>" /></figure>
			</fieldset>
<?php
		}
	}
?>
		</div>
		<p style="text-align:center;"><input type="submit" name="submitQCM" value="Validez vos réponses"/></p>
	  </form>
<?php
} // fin affichage questionnaire
?>
	</div>
 
</body>
</html>

Tandis que le feuille de styles est celle-ci :

Code css :

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

1
2
3
4
5
6
7
8
.quizz { width:100%;max-width:800px;margin:0 auto; }
.quizz form ul { list-style-type:none; }
.quizz .quizz-table { width:100%; }
.quizz .quizz-table fieldset { margin:10px 0; padding:0;  }
.quizz .quizz-table fieldset div { display:inline-block; width:46%; margin:0; padding:0 2%; vertical-align:middle; }
.quizz .quizz-table fieldset figure { display:inline-block; width:46%; margin:0; padding:0 2%; vertical-align:middle; text-align:center; }
.quizz .quizz-table fieldset figure img { max-width:300px; max-height:200px; }
.quizz .quizz-msg { color:#fff; text-align:center; padding:10px; }

Etant loin d'être un spécialiste du style, je ne vois pas comment faire.
Auriez-vous une solution ?
Merci.

**laurentSc** · 20/09/2015, 19h05

Bonjour,

c'est quand même plus lisible, si on affiche du PHP, de le préciser !

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<?php //session_start();
	header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
	error_reporting(E_ALL); 	// en TEST
// -----------------------------------------------
if( isset($_POST['submitQCMagain']) )
{
	unset($_SESSION['quizz']); // on efface la session
}
// -----------------------------------------------
// 1/ CREATION du QUESTIONNAIRE
// -----------------------------------------------
//	unset($_SESSION['quizz']); // TEST : on efface la session (pour afficher le var_dump) -> commenter la ligne en production
// Si le questionnaire n'a pas encore été mis en SESSION, on le crée
if( empty($_SESSION['quizz']) || empty($_SESSION['quizz']['go']) )
{
	// ---------------------------------
	// CONNEXION à la BdD
		include "../php/mysqli_conf.inc.php"; // Inclusion du fichier de connexion &agrave; la base de donn&eacute;es
		$link = mysqli_connect($host,$login,$password,$base) or die(mysqli_error($link));	// Connexion &agrave; MySql
		mysqli_set_charset ( $link , 'UTF8' ); // ON IMPOSE UTF-8
	// ---------------------------------
	// tables utiles
	define('TAB_QUESTIONS',	'questions');
	define('TAB_REPONSES',	'reponses');
	// Définition des paramètres
	$nbre_questions_affiche = 6; // nombre de questions à afficher (parmi toutes celles enregistrées en BdD)
	// on découpe le questionnaire en plusieurs séries
	$nbre_questions_par_serie = 2; // nombre de questions par série
	// ---------------------------------
	// Création du questionnaire
	$questions = array();
	$query_questions = "SELECT * FROM ".TAB_QUESTIONS." ORDER BY RAND() LIMIT 0, ".$nbre_questions_affiche.";"; // Mélange aléatoire
	if ($result = mysqli_query($link, $query_questions))
	{
		while($question = mysqli_fetch_assoc($result))
		{
			list($liste_choix, $question['reponse_juste']) = explode(';', $question['choix_question']);//on sépare les choix de la réponse juste
			$question['choix_reponse'] = array();
			// libellé des reponses
			$query_reponses = "SELECT * FROM ".TAB_REPONSES." WHERE id_reponse IN (".$liste_choix.");";	//on récupère le choix de réponse
			if ($requete_reponses = mysqli_query($link, $query_reponses))
			{
				while($row_reponse = mysqli_fetch_assoc($requete_reponses))
				{
					$question['choix_reponse'][$row_reponse['id_reponse']]	= $row_reponse['texte_reponse']; //on met le choix de réponse dans le tableau de choix des réponses
				}
				array_push($questions, $question);//on met la réponse dans le tableau de réponses.
			}
		}
	}
	// ---------------------------------
	// Mélange aléatoire des questions // INUTILE, puisqu'on a utilisé RAND() dans la requete
//	shuffle( $questions ); // shuffle mélange les éléments d'un tableau
	// on découpe le questionnaire en plusieurs séries
	$questions_series = array_chunk( $questions, $nbre_questions_par_serie, true );
	// ---------------------------------
	// On met le questionnaire en SESSION
	$_SESSION['quizz'] = array();
	$_SESSION['quizz']['questions'] = $questions_series;	// met en session le tableau (mélangé) des séries questions
	$_SESSION['quizz']['index'] = 0;						// index de la seri de questions en cours
	$_SESSION['quizz']['go'] = true;						// si true : on a répondu à toutes les questions
	$_SESSION['quizz']['resultats'] = array();				// array qui permettra de stocker les reponses du candidat
	// Pour éviter les problèmes en cas de rechargement de la page (F5 ou touche < du navigateur)
	$_SESSION['quizz']['checkserie'] = uniqid('quizz_');
	$_SESSION['quizz']['affiche_result'] = false;
	// ---------------------------------
//	var_dump($_SESSION['quizz']);	// Affiche le contenu du tableau -> commenter la ligne en production
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Questionnaire du Quizz</title>
	<style type="text/css">
#quizz { width:100%;max-width:800px;margin:0 auto; }
#quizz form ul { list-style-type:none; }
#quizz .quizz-table { width:100%; }
#quizz .quizz-table fieldset { margin:10px 0; padding:0;  }
#quizz .quizz-table fieldset div { display:inline-block; width:46%; margin:0; padding:0 2%; vertical-align:middle; }
#quizz .quizz-table fieldset figure { display:inline-block; width:46%; margin:0; padding:0 2%; vertical-align:middle; text-align:center; }
#quizz .quizz-table fieldset figure img { max-width:300px; max-height:200px; }
#quizz .quizz-msg { color:#fff; text-align:center; padding:10px; }
	</style>
</head>
<body>
 
	<div id="quizz">
<?php
// -----------------------------------------------
// 2/ TRAITEMENT du FORMULAIRE si soumis
// -----------------------------------------------
if( isset($_POST['submitQCM']) && $_SESSION['quizz']['checkserie']== $_POST['checkserie'] )
{
	// on enregistre les réponses
	$_SESSION['quizz']['resultats'][$_SESSION['quizz']['index']] = $_POST['resultats']; // array contenant les réponses du candidat
}
// 4/ AFFICHAGE des RESULTATS
if( $_SESSION['quizz']['index'] == count($_SESSION['quizz']['questions'])-1 ) // derniere serie de questions : on affiche les résultats
{
	$_SESSION['quizz']['go'] = false;
	// on affiche les resultats
	require (__DIR__.'/quizz2-resultat.php'); 
}
if( isset($_POST['submitQCM']) && $_SESSION['quizz']['checkserie']== $_POST['checkserie'] )
{
	$_SESSION['quizz']['index']++;
	// Pour éviter les problèmes en cas de rechargement de la page (F5 ou touche < du navigateur)
	$_SESSION['quizz']['checkserie'] = uniqid('quizz_');
}
// -----------------------------------------------
// 3/ AFFICHAGE du QUESTIONNAIRE
// -----------------------------------------------
// AFFICHAGE du quizz : question + choix des réponses
//if( !empty($_SESSION['quizz']['go']) || (isset($_SESSION['quizz']['index']) && $_SESSION['quizz']['index']!=count($_SESSION['quizz']['questions'])-1) ) // le quizz n'est pas fini (ou pas commencé)
if( !empty($_SESSION['quizz']['go']) ) // le quizz n'est pas fini (ou pas commencé)
{
	$idserie = $_SESSION['quizz']['index'];
	$serie_questions = $_SESSION['quizz']['questions'][$idserie];
?>	
		<h2>Quizz</h2>
		<h3>Série n°<?php echo ($idserie+1); ?></h3>
	  <form id="quizz-form" method="post" action="quizz2.php">
		<input type="hidden" name="checkserie" value="<?php echo $_SESSION['quizz']['checkserie']; ?>"/>
		<div class="quizz-table">
<?php
	$num_question = $idserie;
	foreach($serie_questions as $idque => $question)
	{
		if(!empty($question['choix_reponse']))
		{
			$num_question++;
?>
			<fieldset>
				<legend><?php echo $num_question.' - '.$question['texte_question']; ?></legend>
				<div>
				<ul>
<?php
			$choix_reponse = $question['choix_reponse'];
			shuffle( $choix_reponse ); // on mélange les réponses
			foreach($question['choix_reponse'] as $idrep => $reponse)
			{
				echo '					<li><input type="radio" name="resultats['.$question['id_question'].']" id="reponse'.$idrep.'" value="'.$idrep.'" required="required"/><label for="reponse'.$idrep.'">'.htmlspecialchars($reponse,ENT_QUOTES,'utf-8').'</label></li>'."\n";
			}	
?>
				</ul>
				</div><figure><img border="0" src="<?php echo str_replace('../', './', htmlspecialchars($question['adresse_image'],ENT_QUOTES,'utf-8')); ?>" /></figure>
			</fieldset>
<?php
		}
	}
?>
		</div>
		<p style="text-align:center;"><input type="submit" name="submitQCM" value="Validez vos réponses"/></p>
	  </form>
<?php
} // fin affichage questionnaire
?>
	</div>
 
</body>
</html>

D'autre part, il y a une icône "lien" : http://www.developpez.net/forums/d15...chage-d-image/

J'ai quand même essayé de faire tourner ton script : d'une part, il a fallu que je commente le session_start() de la ligne 1 et de plus, la variable $idserie de la ligne 119 est non définie...

Invité · 20/09/2015, 19h17

Bonjour Denis,

1/ ici, dans le forum CSS, il est inutile de fournir le code PHP (même s'il est très beau ).

Il faut montrer le code HTML généré => ("Ctrl" + "U" de ton clavier)

2/ Pour ce qui est de l'alignement, c'est ici que ça se passe :

Code css :

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

1
2
.quizz .quizz-table fieldset div { display:inline-block; width:46%; margin:0; padding:0 2%; }
.quizz .quizz-table fieldset figure { display:inline-block; width:46%; margin:0; padding:0 2%; }

46% + 2% + 2% = 50%. Et ce, sur <div> et <figure>, chacun en display:inline-block; *.
50% + 50 % = 100% : normalement, ils devraient se mettre l'un à coté de l'autre.

(* j'ai accolé volontairement dans le code </div><figure>... justement pour éviter un espace entre les 2, dû au inline...)

Essaie en remplaçant pour les 2 : display:inline-block; par float:left;.
Et ajoute overflow:hidden; sur le <fieldset> :

Code css :

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

1
2
3
.quizz .quizz-table fieldset { margin:10px 0; padding:0; overflow:hidden; }
.quizz .quizz-table fieldset div { float:left; width:46%; margin:0; padding:0 2%; vertical-align:middle; }
.quizz .quizz-table fieldset figure { float:left; width:46%; margin:0; padding:0 2%; vertical-align:middle; text-align:center; }

Et/ou remplace 46% par 45% (c'est parfois un problème d'arrondi dans les calculs par les navigateurs, au pixel inférieur ou supérieur).

3/ A propos de cette ligne :

Code php :

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

				</div><figure><img border="0" src="<?php echo str_replace('../', './', htmlspecialchars($question['adresse_image'],ENT_QUOTES,'utf-8')); ?>" /></figure>

str_replace('../', './' car MON dossier d'images n'était pas au même niveau que le TIEN ! (et j'avais gardé TES valeurs en BdD).
Tu peux simplement mettre :

Code php :

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

				</div><figure><img border="0" src="<?php echo htmlspecialchars($question['adresse_image'],ENT_QUOTES,'utf-8'); ?>" /></figure>

**Denis Placé** · 20/09/2015, 21h24

Bonsoir jreaux62,

C'est vrai que j'avais pris l'habitude dans le forum "PHP-MySQL" de fournir le code

Bon, j'ai combiné tes 2 propositions et j'arrive à la feuille de style

Code :

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

1
2
3
4
5
6
7
8
.quizz { width:100%;max-width:800px;margin:0 auto; }
.quizz form ul { list-style-type:none; }
.quizz .quizz-table { width:100%; }
.quizz .quizz-table fieldset { margin:10px 0; padding:0; overflow:hidden; }
.quizz .quizz-table fieldset div { float:left; width:45%; margin:0; padding:0 2%; vertical-align:middle; }
.quizz .quizz-table fieldset figure { float:left; width:45%; margin:0; padding:0 2%; vertical-align:middle; text-align:center; }
.quizz .quizz-table fieldset figure img { max-width:300px; max-height:200px; }
.quizz .quizz-msg { color:#fff; text-align:center; padding:10px; }

Je suis même descendu jusque 40% mais .... sans aucun effet. Je crois que je ne vais pas me prendre la tête là-dessus mais mettre le code dans un tableau comme ça, il ne devrait plus y avoir de problème. C'est juste que ça fait bizarre que l'alignement soit différent en mettant le code dans un script externe que directement dans la page.

**Denis Placé** · 21/09/2015, 17h48

Bonjour,

Ce post n'ayant pas l'air d'attirer les foules, je le clos, ayant une solution de rechange avec un tableau.
Merci à laurentSc et jreaux62 qui sont penché sur mon problème.

Invité · 21/09/2015, 20h06

Envoyé par Denis Placé

...ça fait bizarre que l'alignement soit différent en mettant le code dans un script externe que directement dans la page...

Si c'est ça, il faut vérifier que le chemin vers le fichier CSS est le bon, et qu'il est correctement intégré.

**Denis Placé** · 21/09/2015, 21h08

Bonsoir jreaux62,

Surprenant, n'est-ce pas ?
J'ai modifié la couleur du titre dans la feuille de style et l'effet est visible sur la page donc je suis affirmatif, le script pointe bien vers la bonne feuille de styles

Alignement image en CSS

Positionnement en CSS

Discussions similaires

Partager

Partager