Problème affichage CSS

**6nawak** · 24/04/2012, 15h58

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 :

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
 
<!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 :

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
 
* {
	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 :

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

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 :

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
<!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.

**oceane751** · 25/04/2012, 01h50

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

Code :

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

<?php.... ?>

?

sinon pourquoi tu veux inclure la partie <head>?

**Muchos** · 25/04/2012, 04h30

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

Code php :

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

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

Puis :

Code html :

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

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

**billy101** · 25/04/2012, 06h39

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 :

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

<?php include 'header.php' ?>

Cordialement

**ouldfella** · 25/04/2012, 12h39

essaye de supprimer les espaces inutiles :

Code :

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

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

**6nawak** · 25/04/2012, 12h51

Merci à tous pour vos réponses.

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

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.

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.

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à.

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.

Problème affichage CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager