[CSS 2] Affichage des pages décalé par rapport au menu G [Résolu]

jlb59 · 25/05/2011, 07h00

Bonjour à tous,

Je me tourne vers vous parce que là, je n'arrive pas à m'en sortir.

En effet, j'essaie de faire un site assez simple, mais les pages qui doivent s'afficher sont très décalées par rapport au menu si celui-ci est modifié (ajout de rubriques par exemple).

A tout hasard, je mets les scripts pour que je me fasse comprendre mieux.
Html et Css du Menu gauche

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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#menu_g {
width: 150px;
margin: 1px;
font-family:verdana,arial,trebuchet;
font-size:0.8em;
background-color:#d2691e;}
 
#menu_g ul {
list-style: none;
margin: 0;
padding: 0;
}
 
#menu_g li a {
height: 32px;
height: 24px;
text-decoration: none;
color: #ffffff;
}
 
#menu_g li a:link, #menu17 li a:visited {
color: #000000;
display: block;
background: url(images/menu_g/menu_g.gif);
padding: 8px 0 0 35px;
}
 
#menu_g li a:hover {
color: #000000;
background: url(images/menu_g/menu_g.gif) 0 -32px;
padding: 8px 0 0 35px;
}
</style>
 
</head>
 
<body>
 
<div id="menu_g">
<ul>
<li><a href="#2" title="">Bureautique</a></li>
<li><a href="#3" title="">Graphisme</a></li>
<li><a href="#4" title="">Securité</a></li>
<li><a href="#5" title="">Outils du Webmaster</a></li>
</ul>
<ul>
<li><a href="#6" title="">Générateurs</a></li>
<li><a href="#7" title="">Outils & développement</a></li>
<li><a href="#8" title="">Ressources Web</a></li>
<li><a href="#9" title="">Utilitaires</a></li>
<li><a href="#10" title="">T & A du Web</a></li>
</ul>
</div>
 
</body>
</html>

Affichage des pages

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
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
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">-->
<title></title>
<style type="text/css">
body{background-color:#c0c0c0;font-family: trebuchet verdana arial; font-size:1em;font-weight:normal;}
/*  margin: top right bottom left  */
#conteneur{margin-left:auto;margin-right:auto;width:970px;border:none;background-color:#ffffff;}
#conteneur #header{height:125px;margin:auto;display:block;background-image:url("images/header/banniere.jpg");background-repeat:no-repeat;}
 
#conteneur #pages{
	float:right;
	height:auto;
	width:797px;
	padding:5px 5px 5px 5px;
	margin-top:-160px;
	border:1px solid red;
	background-color:#FFFFE0;}
 
#conteneur #footer{clear:both;text-align:center;font-weight:bold;border:0px solid red;background-color:#FFA500;}
 
.ecart{margin: 10px;}
.smallfont{font-size:small;}
 
</style>
 
</head>
<body>
 
<div id="conteneur">
 
	<div id="header">&nbsp;</div>
 
	<div id="menu_h">
		<?php include("main/menu_h.html"); ?>
	</div>
<span class="ecart"><span class="smallfont">Vous êtes ici !</span></span>
 
 
	<div id="menu_g">
		<?php include("main/menu_g.html"); ?>
	</div>
 
	<div id="pages">
		Quel est le but de mesurer son QI ?
 
		<br>
		<table style="border:0px solid red;width:100%;" cellpadding="0" cellspacing="10">	
		<tr>		
		<td style="vertical-align:top;text-align:center;">
		<!-- Centre la popup à* l'écran -->
		<a href="javascript:void(0);" title="" class="thickbox"><img src="images/capture/p_qi98_100.jpg" alt="" style="border:none;width:100px;"></a>
		<br>
		<span style="text-align:left;font-size:x-small;">&nbsp;Agrandir l'image</span>
		<br>
		<script type="text/javascript" SRC="javascript:void(0);"></script>
		<br>
		</td>		
		<td style="vertical-align:top;">
		Une image très simple de <span class="important">l'intelligence est de la comparer à* la force physique</span>.
		<br>
		<span class="orange">L'intelligence est le résultat du cerveau</span> comme <span class="important">
		la force physique est celle des muscles</span>.<p>Certaines personnes naissent plus fortes que d'autres, 
		et l'entraînement leur permet d'augmenter en partie cet avantage, mais d'une manière limitée.<br>
		Et bien, pour la mémoire, c'est exactement pareil !<br>
		En clair, il faut bien faire la différence entre <span class="important">Quotient Intellectuel</span> et 
		<span class="important">Intelligence</span>.</p>		
		</td>	
		</tr>
		</table>   
	</div>
 
	<div id="footer">
		<?php include("main/footer.html"); ?>
	</div>
 
<!-- Fin Conteneur -->
</div>
 
</body>
</html>

Merci de prendre le temps de voir d'où vient mon erreur.

Bisûnûrs · 25/05/2011, 08h00

Le problème c'est que l'erreur peut venir des nombreuses erreurs de structure de ton code.

Si tu regardes la source affichée dans ton navigateur, tu verras que tu as plusieurs élément html, body, head, etc, alors que ceux-ci doivent être uniques dans un document. Donc tes fichiers inclus ne doivent pas les contenir.
Ensuite, le fait que tu aies mis la déclaration XML fait basculer IE6 en mode Quirks, ce qui peut provoquer beaucoup de bug sur ce navigateur.

Enfin, tu ne précises pas sur quel navigateur tu observes ce comportement. Avec la pléthore de navigateurs existants, en plus des différentes versions de ces navigateurs sur le marché, on aimerait bien pouvoir cibler un navigateur précis pour ne pas à avoir à passer 2h sur chaque problème.

jlb59 · 25/05/2011, 12h50

Bonjour Bisûnûrs, tes explications semblent claires et logiques et t'en remercie beaucoup.

Citation:

Envoyé par Bisûnûrs

Le problème c'est que l'erreur peut venir des nombreuses erreurs de structure de ton code.

Si tu regardes la source affichée dans ton navigateur, tu verras que tu as plusieurs élément html, body, head, etc, alors que ceux-ci doivent être uniques dans un document. Donc tes fichiers inclus ne doivent pas les contenir.
Ensuite, le fait que tu aies mis la déclaration XML fait basculer IE6 en mode Quirks, ce qui peut provoquer beaucoup de bug sur ce navigateur.

Concernant le XML, je croyais que c'était un bien ! Mais, je vois par tes dire que c'est pas nécessaire, alors, je vais en revenir sur les déclarations minimales.
Mais tu crois qu'il y ait encore IE6, surtout que ça date un peu ?

Pour ce qui est de plusieurs Html, Head, etc., la raison de tout ça est simple, tous les fichiers ont l'extension "html", sauf l'index qui est en "php" parce qu'il n'y a que comme ça que ça fonctionne bien en local (à cause des Include).
C'est pour cette raison uniquement.

Je n'ai pas très bien saisi quand tu parles de "document", est-ce qu'il s'agit uniquement du fichier "index.php" ?
Si celui-ci contient des "include", c'est, je pense, que ça évite que les fichiers affichant le contenu, donc les pages d'informations, ne soient trop encombrés.
Là, j'ai peut-être du mal à ma faire comprendre !

Si je crois comprendre, il n'y aurait que l'index.php qui contiendrait les balises et tous les autres fichiers (header, menu, pages, footer) ne devraient contenir que l'essentiel (sans aucune balise) ?

Si je fais ça, il va y avoir des problèmes avec certains JS !

Citation:

Envoyé par Bisûnûrs

Enfin, tu ne précises pas sur quel navigateur tu observes ce comportement. Avec la pléthore de navigateurs existants, en plus des différentes versions de ces navigateurs sur le marché, on aimerait bien pouvoir cibler un navigateur précis pour ne pas à avoir à passer 2h sur chaque problème.

Pour le navigateur, il s'agit de FF 4.01.

Bisûnûrs · 25/05/2011, 14h02

En France, IE6 a encore 3.5% de parts de marché.

Un document HTML est en fait une "page" dont le code est délimité par les balises <html> et </html>.
Un document HTML peut être composé de plusieurs fichiers, dans le cas d'include en PHP, comme c'est ton cas.
Un document HTML ne doit contenir qu'un seul élément html, qu'un seul élément body, head, etc.
Donc dans les fichiers composant ton document HTML, ces éléments ne doivent pas être répétés.

Exemple correct :

index.php :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
   <title>Titre</title>
</head>
<body>
 
<?php include('menu.html'); ?>
 
</body>
</html>

menu.html :

Code html :

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

1
2
3
4
<ul>
   <li>Accueil</li>
   <li>Contact</li>
</ul>

Résultat :

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
<!doctype html>
<html>
<head>
   <title>Titre</title>
</head>
<body>
 
<ul>
   <li>Accueil</li>
   <li>Contact</li>
</ul>
 
</body>
</html>

Exemple erroné :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
   <title>Titre</title>
</head>
<body>
 
<?php include('menu.html'); ?>
 
</body>
</html>

menu.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
<!doctype html>
<html>
<head>
   <title>Titre</title>
</head>
<body>
 
<ul>
   <li>Accueil</li>
   <li>Contact</li>
</ul>
 
</body>
</html>

Résultat :

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
<!doctype html>
<html>
<head>
   <title>Titre</title>
</head>
<body>
 
<!doctype html>
<html>
<head>
   <title>Titre</title>
</head>
<body>
 
<ul>
   <li>Accueil</li>
   <li>Contact</li>
</ul>
 
</body>
</html>
 
</body>
</html>

jlb59 · 25/05/2011, 14h36

Citation:

Envoyé par Bisûnûrs

En France, IE6 a encore 3.5% de parts de marché.

Un document HTML est en fait une "page" dont le code est délimité par les balises <html> et </html>.
Un document HTML peut être composé de plusieurs fichiers, dans le cas d'include en PHP, comme c'est ton cas.
Un document HTML ne doit contenir qu'un seul élément html, qu'un seul élément body, head, etc.
Donc dans les fichiers composant ton document HTML, ces éléments ne doivent pas être répétés.

Tes explications sont très limpides en effet, mais là où il y a un problème c'est qu'en local, si j'ai un fichier "html" qui contient des "include", aucune d'elles n'est prises en compte, donc, rien ne s'affiche !

J'avais déjà essayé avec "index.html" et pour que tout soit OK en local, il a fallu le renommer en "index.php".

J'essaie de faire tout ça parce que pour que les JS fonctionnent bien, généralement, ils sont placés entre les "Head".
Seulement, je voulais dans un formulaire de contact, mettre le nombre de caractères saisis dans le textarea, mais comme ça ne marchait pas, je me suis dit que cela pouvait provenir du fait que le JS ne se trouvait pas dans la page concernée, donc de contact !

Mais comme je vois, après tes explications, que le projet est pratiquement similaire à celui déjà existant, il est inutile de poursuivre en ce sens.

N'empêche que tes explications détaillées m'ont été très utiles et t'en remercie encore.

A+

Bisûnûrs · 25/05/2011, 15h46

Globalement pour utiliser les include il faut que ton fichier soit en .php (amalgame rapide pour ne pas te perdre en explications complexes qui te sont inutiles). Après, rien ne t'empêche d'avoir des .html pour tes fichiers inclus, tant qu'il n'y a pas de PHP dedans.

Et il n'y a aucun problème de Javascript ou quoi que ce soit d'autre, puisque le PHP est exécuté du côté du serveur, donc avant le HTML et le Javascript qui sont exécuté côté client. PHP te sert à générer du HTML (voire du Javascript) qui sera lu par ton navigateur. Donc quand ton navigateur lit et exécute ton code, il n'y a déjà plus de PHP depuis longtemps.

jlb59 · 25/05/2011, 17h19

Citation:

Envoyé par Bisûnûrs

Globalement pour utiliser les include il faut que ton fichier soit en .php (amalgame rapide pour ne pas te perdre en explications complexes qui te sont inutiles). Après, rien ne t'empêche d'avoir des .html pour tes fichiers inclus, tant qu'il n'y a pas de PHP dedans.

Et il n'y a aucun problème de Javascript ou quoi que ce soit d'autre, puisque le PHP est exécuté du côté du serveur, donc avant le HTML et le Javascript qui sont exécuté côté client. PHP te sert à générer du HTML (voire du Javascript) qui sera lu par ton navigateur. Donc quand ton navigateur lit et exécute ton code, il n'y a déjà plus de PHP depuis longtemps.

C'"est en quelque sorte ce que j'avais déjà fait.

J'ai encore regardé les codes JS (les derniers) et il s'est avéré qu'il y avait une petite faute d'orthographe, donc de frappe, et le problème a été résolu !

Donc, je n'ai plus de nécessité à faire une autre manière de refaire mon site !

Tes conseils et informations m'ont été très instructifs et t'en remercie encore.

25/05/2011, 08h00	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Le problème c'est que l'erreur peut venir des nombreuses erreurs de structure de ton code. Si tu regardes la source affichée dans ton navigateur, tu verras que tu as plusieurs élément html, body, head, etc, alors que ceux-ci doivent être uniques dans un document. Donc tes fichiers inclus ne doivent pas les contenir. Ensuite, le fait que tu aies mis la déclaration XML fait basculer IE6 en mode Quirks, ce qui peut provoquer beaucoup de bug sur ce navigateur. Enfin, tu ne précises pas sur quel navigateur tu observes ce comportement. Avec la pléthore de navigateurs existants, en plus des différentes versions de ces navigateurs sur le marché, on aimerait bien pouvoir cibler un navigateur précis pour ne pas à avoir à passer 2h sur chaque problème.
	10

25/05/2011, 15h46	#6
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Globalement pour utiliser les include il faut que ton fichier soit en .php (amalgame rapide pour ne pas te perdre en explications complexes qui te sont inutiles). Après, rien ne t'empêche d'avoir des .html pour tes fichiers inclus, tant qu'il n'y a pas de PHP dedans. Et il n'y a aucun problème de Javascript ou quoi que ce soit d'autre, puisque le PHP est exécuté du côté du serveur, donc avant le HTML et le Javascript qui sont exécuté côté client. PHP te sert à générer du HTML (voire du Javascript) qui sera lu par ton navigateur. Donc quand ton navigateur lit et exécute ton code, il n'y a déjà plus de PHP depuis longtemps.
	00

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