Problème affichage CSS

Version imprimable

Bonjour,

Cela fait 7 jours que je tente de résoudre ce problème sans succès le header de mon site ne colle plus au haut de la page dès que je fais un include php.

Voici mon problème en détail :

Voici le code html de mon site :

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
 
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="style.css" />
        <script src='http://www.mathjax.org/mathjax/MathJax.js'></script>
 
		<title>MonSite</title>
    </head>
 
 
    <body>
		<header>
			<div id="titre_principal">
				<h1><a href="index.php"> MonSite </a></h1>
			</div>
		</header>
 
		<section>
			<article>
				<h1>Article 1 : Lorem Ipsum</h1>
 
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
							Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies 
							sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue,
							euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, 
							non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, 
							consequat in, pretium a, enim. Pellentesque congue. 
							Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. 
							Praesent egestas leo in pede. Praesent blandit odio eu enim.
						</p>
			</article>
		</section>
 
		<footer>
			<a href="#">2012 © MonSite</a>
		</footer>
    </body>
</html>

Voici le code 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
 
* {
	margin:0;
	padding:0;
}
 
body{
   height: 100%;
   width: 100%;
}
 
header
{
margin-top:0;
padding: 2% 13%;
border: 1px solid black;
text-align:right;
background-color: yellow;
}
 
header a
{
text-decoration:none;
color: black;
}
 
section
{
overflow: visible;
display: block;
border: 1px solid black;
margin: 5% 12%;
background-color: rgb(200,200,200);
padding-top: 7%;
}
 
section h1
{
text-align: justify;
margin-left: 7%;
margin-right: 2%;
}
 
 
p
{
text-align: justify;
margin: 5% 7%;
}
 
footer
{
text-align: center;
display: block;
border: 1px solid black;
background-color: black;
}
 
footer a
{
text-decoration: none;
color: white;
font-weight: bold;
}

Jusqu'ici tout va bien le site s'affiche tel que je le souhaite c'est à dire que le header est bien collé en haut de la page.

Mais dès que je veux rendre mon site plus facilement modifiable en ajoutant un include php le header se décolle du haut de la page.

Voici le fichier head.php :

Code:

1
2
3
4
5
6
<head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="style.css" />
 
		<title>MonSite</title>
    </head>

Et voici la manière dont je l'inclus dans mon fichier index.php :

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
<!DOCTYPE html>
<html>
 
 
   <?php include("head.php"); ?>
 
 
    <body>
		<header>
			<div id="titre_principal">
				<h1><a href="index.php"> MonSite </a></h1>
			</div>
		</header>
 
		<section>
			<article>
				<h1>Article 1 : Lorem Ipsum</h1>
 
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
							Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies 
							sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue,
							euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, 
							non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, 
							consequat in, pretium a, enim. Pellentesque congue. 
							Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. 
							Praesent egestas leo in pede. Praesent blandit odio eu enim.
						</p>
			</article>
		</section>
 
		<footer>
			<a href="#">2012 © MonSite</a>
		</footer>
    </body>
</html>

Merci d'avance. Je vous serai très reconnaissant de votre aide.

25/04/2012, 02h50
oceane751

est ce que c'est normal qu'il n'y ait pas les

Code:

<?php.... ?>

?

sinon pourquoi tu veux inclure la partie <head>?

Avez-vous essayé en intégrant l'incude dans les balises <head> ?
Code:

1 2 3 4 5 6 <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>MonSite</title>
Puis :
Code:

1 2 <head><?php include('head.php'); ?></head>

25/04/2012, 07h39
billy101

Il faut enlever les parenthèses et le ";" dans ton code php. Voici la commande que j'ai utilisé dans le code de mon site (http://clubsiteinternet.com):

Code:

<?php include 'header.php' ?>

Cordialement

essaye de supprimer les espaces inutiles :
Code:

1 2 3 4 5 6 7 <!DOCTYPE html> <html> <?php include('head.php'); ?> <body> ... ...

25/04/2012, 13h51
6nawak

Merci à tous pour vos réponses.

Malheureusement aucune réponse ne résous ce problème. Pour répondre à vos questions :

Citation:

sinon pourquoi tu veux inclure la partie <head>?

Je veux faire un include de la partie <head> tout simplement car au fur et à mesure que mon site se complexifiera il faudra que je rajoute de nouveaux javascripts etc entre les balises <head></head> par conséquent un include me permettrait de ne pas avoir a remodifier chaque page de mon site.

Citation:

Avez-vous essayé en intégrant l'incude dans les balises <head> ?

Oui j'ai essayé toutes les dispositions possibles même en faisant un include vide entre les balises <head> complétées mon header se décolle du haut de la page.

Citation:

Il faut enlever les parenthèses et le ";" dans ton code php. Voici la commande que j'ai utilisé dans le code de mon site (http://clubsiteinternet.com):

J'ai fait ce changement pourtant rien ne change. Le problème est toujours là.

Citation:

essaye de supprimer les espaces inutiles :

J'ai supprimé aussi les espaces inutiles rien à faire le problème est toujours là.

Je n'arrive vraiment pas à voir d'où vient ce problème.
25/04/2012, 16h01
ouldfella

Code:

le problème est toujours là.

est ce que le code est en ligne ?
si oui donne nous le lien svp.

bonjours dans le header tu peux essayer de faire ceci :

Code:

1
2
3
4
 
<?php
    include_once('header.php');
?>

pour ton css peut-être ceci aussi :

Code:

1
2
3
4
5
6
7
8
9
10
 
#header
{
    margin:0;
    padding:0;
    position: relative;
    border:1px solid #000000;
    /*mise en place du bloc*/
    height:90px;
}

Bonjour,
pourquoi ne pas faire directement
<?php include 'header.php'; ?> en mettant dedans ce que tu souhaites et même plus, le DOCTYPE et la suite par exemple
Code:

1 2 3 4 5 6 7 8 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>MonSite</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src='http://www.mathjax.org/mathjax/MathJax.js'></script> </head>
et ton fichier HTML devient
Code:

1 2 3 4 5 6 7 <?php include('header.inc.php'); ?> <body> <div>  </div> </body> </html>

Merci ouldfella, dharkan et NoSmoking, mais malheureusement aucune de vos propositions ne résout mon problème.
Pour répondre à ouldfella : non mon site n'est pas encore sur internet.

Voici une version simplifiée du problème (focalisée sur le problème) :

Si vous prenez ce code php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <title>MonSite</title> </head> <body> <header> <h1>MonSite</h1> </header> </body> </html>
avec comme fichier style.css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 *{ margin:0; padding:0; } header { margin-top:0; padding: 2% 13%; border: 1px solid black; text-align:right; background-color: yellow; }
alors vous verrez le titre du site bien collé en haut de la page.

Mais dès que vous faites un include de ce qui est contenu entre les balises <head> et </head> le titre n'est plus collé en haut de page. C'est à dire dès que vous faites ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <?php include("head.php"); ?> <body> <header> <h1>MonSite</h1> </header> </body> </html>
avec comme fichier head.php :
Code:

1 2 3 4 5 <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <title>MonSite</title> </head>
J'ai beau cherché sur internet je ne vois vraiment pas pour quelle raison ce décalage se créer.

25/04/2012, 23h46
NoSmoking

juste une question ton fichier a t-il une extension PHP ?
25/04/2012, 23h52
6nawak

Citation:

Envoyé par NoSmoking

juste une question ton fichier a t-il une extension PHP ?

Oui tous mes fichiers sont enregistrés en PHP (à part le CSS bien évidemment).

une dernière chose le chemin d'accès au fichier include est le bon !?!

fichier header.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> *{ margin:0; padding:0; } header{ margin-top:0; padding: 2% 13%; border: 1px solid black; text-align:right; background-color: yellow; } </style> <title>MonSite</title> </head>
fichier t_header.php
Code:

1 2 3 4 5 6 7 <?php include("header.php"); ?> <body> <header> <h1>MonSite</h1> </header> </body> </html>
fonctionne très bien

26/04/2012, 00h54
6nawak

Citation:

Envoyé par NoSmoking

une dernière chose le chemin d'accès au fichier include est le bon !?!

Oui c'est le bon, d'ailleurs le design du site se charge bien, il y a juste le décalage du haut qui change.
27/04/2012, 17h15
NoSmoking

il te reste à regarder le code HTML généré pour voir si il correspond réellement à ton attente.

Il existe des outils pour inspecter la struture des documents, cela peut également servir.

Click droit -> Inspecter un élément, par exemple.
27/04/2012, 17h27
oceane751

une url peut être?