display : table & responsive

Bonjour,

J'ouvre cette discussion suite à une problématique que je rencontre et que je n'arrive pas à résoudre depuis quelques temps ...

J'ai un petit projet composé de deux pages HTML à structure identique (HTML pense bête & PHP pense bête) ainsi qu'un fichier CSS associé.

Les pages sont mises en page sous forme de table avec display : table, j'ai une partie à gauche servant à la navigation et une partie à droite servant à afficher le contenu.

Sur la page HTML, tout fonctionne, lorsque je réduis la fenêtre de mon navigateur la page et son contenu s'ajuste correctement. (cf. image ci-dessous)

Pièce jointe 497693

A l'inverse, sur la page PHP je n'obtiens pas le même résultat et un scroll sur l'axe x persiste. (cf. image ci-dessous)

Pièce jointe 497694

Je n'arrive pas à déterminer ce qui pose problème au niveau de la page PHP, pouvez-vous m'aider svp ?

Vous trouverez les scripts associés ci-dessous.

HTML_pense_bête.html

Code:

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
<!DOCTYPE html>
<html lang="fr" id="html">
<head>
    <title>Accueil</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style_pages_pense_bete.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style_menu.css">
    <link rel="icon" type="image/png" href="images/logo_page.png" /> 
</head>
<body> 
 
<!-- ===== partie gauche ===== -->
<div id="conteneur">
	<div id="contenu_gauche"> 
            <h1>Les bases</h1> 
            <ul>
				<li><a href="#html1"> Préparation du document HTML </a></li>
			</ul>
	</div>
<!-- ===== partie droite ===== -->
<div id="contenu_droite"> 
<!-- === article -->
        <article id="html1"> 
            <h1>Les bases : préparation du document HTML</h1> 
            <p>La doctype : 
<pre>
&lt!DOCTYPE html&gt
</pre>
			</br></br>
			L élément html indique dans une page web le début du contenu html de cette dernière, en HTML5 nous avons :
<pre>
&lthtml lang="fr"&gt
</pre>
			</br></br>
			Il conviendra de spécifier l encodage des caractères de la page web avec l élément meta pour l en-tête http et pour le contenu avec l'attribut charset :
			<pre>&ltmeta charset="utf-8"&gt</pre>
			</br></br>
			Nous obtiendrons la structure type suivante pour un document HTML5 :</br>
<pre>
&lt!DOCTYPE html&gt</br>
&lthtml lang="fr"&gt</br>
	&lthead&gt</br>
		&lttitle&gtMa page d accueil&lt/title&gt</br>
		&ltmeta charset="utf-8"&gt</br>
	&lt/head&gt</br>
	&ltbody&gt </br>
	&lt/body&gt </br>
&lt/html&gt</br>
</pre>	
			</p> 
        </article> 
</div> 
</div>
<!-- ==================== Pied de page ====================-->	
 
</body> 
</html>

PHP_pense_bete.html

Code:

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
<!DOCTYPE html>
<html lang="fr" id="html">
<head>
    <title>Accueil</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style_pages_pense_bete.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style_menu.css">
    <link rel="icon" type="image/png" href="images/logo_page.png" />
</head>
<body> 
 
<!-- ===== partie gauche ===== -->
<div id="conteneur">
	<div id="contenu_gauche"> 
            <h1>Préparer son environnement</h1> 
            <ul>
				<li><a href="#php1"> WAMP </a></li>
				<li><a href="#php2"> La connexion </a></li>
			</ul>
	</div>
 
<!-- ===== partie droite ===== -->
<div id="contenu_droite"> 
<!-- === article -->
        <article id="php1"> 
            <h1>Préparer son environnement : WAMP</h1> 
            <p> Pour se faire, nous utiliserons la plate-forme de développement web  WampServer.</a> Ce dernier offre un package avec un serveur web Apache2, un serveur de bases de 
                   données MySQL, le langage PHP 5.6 et un outil permettant de gérer le serveur de bases de données : PhpMyAdmin.</br></br>
			Accéder au site, télécharger WampServer et l installer. Une fois terminé, vous devriez visualiser l arborescence suivante : </br></br>
			</br></br>
			Une fois installé et executé, vous devez voir apparaître l icône  dans la barre des tâches.</br></br>
			La couleur rouge du logo signifie que WampServer est inactif, si le logo est orange c est qu il y a un problème de démarrage d un des services et la couleur est verte si tous les services sont correctement lancés : WampServer est prêt.
			</p>
        </article>  
 
<!-- === article -->
        <article id="php2"> 
            <h1>Préparer son environnement : la connexion</h1> 
            <p>Pour se connecter à une base données selon les versions : à placer dans un fichier config.php (include 'config.php';).  </br></br>
			<b>MySQLi-Extension</b>
			</br></br>
<pre>
&lt?php </br>
$host_name = 'nom hôte';</br>
$database = 'nom base';</br>
$user_name = 'identifiant';</br>
$password = '&ltmot de passe&gt';</br>
$connect = mysqli_connect($host_name, $user_name, $password, $database);</br>
 
	if (mysqli_connect_errno()) {</br>
	die('&ltp&gtLa connexion au serveur MySQL a échoué: '.mysqli_connect_error().'&lt/p&gt');</br>
	} else {</br>
	echo '&ltp&gtConnexion au serveur MySQL établie avec succès.&lt/p &gt';</br>
	}</br>
?&gt
</pre>
			</p>
		</article>
 
</div> 
</div>
</body> 
</html>

CSS :

Code:

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
/* ==================== Style généraux ==================== */
html,body { 
	width : 100%;
	height : 100%;
	padding : 0;
	margin : 0;
    background: #f7f7f7;
	display : block;
	font-family: 'Century Gothic', Verdana, Calibri, serif;
} 
 
 
 
/* ==================== Conteneur ==================== */
#conteneur {
	display : table;
	width : 100%; 
	height : 100%;
}
 
div#contenu_gauche { 
	display : table-cell;
    width: 20%; 
    color: white; 
	font-size : 14px;
	background-color : #101757;
}
 
div#contenu_droite { 
	display : table-cell;
    width: 80%; 
    background-color: white; 
	box-shadow: 0 0 10px 0 grey; 
}
	@media (max-width: 1024px) {
		div#contenu_gauche { 
		display : table-row;
		width : auto;
		color: white; 
		font-size : 14px;
		background-color : #101757;
	}
 
	div#contenu_droite { 
		display : table-row;
		width : auto;
		background-color: white; 
		box-shadow: 0 0 10px 0 grey; 
	}
}
 
 
 
article { 
	width : auto;
    border-top: 1px dotted #333; 
	text-align : justify;
	font-family : arial;
	padding-left : 10px;
	padding-right : 10px;	
	font-family: 'Century Gothic', Verdana, Calibri, serif;
}
 
article h1 {
	background-color : #101757; 
	color : orange;
    padding : 5px;
    font-family: 'Century Gothic', Verdana, Calibri, serif;
}
 
/* Balise pour le code */
pre {
	width : 60%;
	font-style : italic;
  	font-size : 13px;
	margin : auto;
	overflow-x : scroll;
	padding : 0.5px;
	border-radius : 10px;
	padding-top : 10px;
    background: #f7f7f7;
    background: -moz-linear-gradient(90deg, #fff, #ccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}

Vous remerciant par avance pour vos contributions.