[Résolu] Marge en hauteur d'une 20aine de pixel appel d'une page

Question

Vict0

6 Jan 2011 à 17:43

Bonjour,

Avant toute explication, je tiens à dire que le problème suivant n'est pas un problème de CSS mais de PHP. Enfin c'est ce que je pense du moins. Smiley cligne

Je travail le squelette de mon site sur deux pages : header.php et footer.php.
Le contenu quant à lui est propre à chaque page... (Ex inscription.php, recheche.php etc...)

Sur chaque page j'appel header.php et footer.php via la fonction require_once();

Jusque à présent, sur la page header.php je n'avais aucun décalage. Dès que j'ai appelé cette page via la fonction require_once, j'ai eu le droit à une marge d'une 20aine pixel en haut de page... J'ai vérifier en plaçant le contenu de header.php au seins de ma page index, et ça résoud le problème... Smiley rolleyes

Voici les pages concernés...

header.php


<!-- Le doctype se trouve sur le fichier index.php -->
<html lang="fr">
	<head>
		<title><?php echo $title; ?></title>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/design.css" />
		
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		
		<!-- FancyBox -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="script/javascript/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
		<link rel="stylesheet" href="script/javascript/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
		<!-- FancyBox -->
		
		<script type="text/javascript">
			<!-- Afficher popin FancyBox -->
			(function($){
					$(function(){
							$("a#InternetExplorer").fancybox({
									"hideOnContentClick": false
							}).trigger("click");
					});
			})(jQuery);
			<!-- Afficher popin FancyBox -->
			
			var bouton;
			function menu(bouton){
				switch(bouton){
					case "Accueil":
						document.getElementsByTagName('nav')[0].style.background  = 'url("design/images/MenuAccueil.png")';
					break;

					case "Expose":
						document.getElementsByTagName('nav')[0].style.background  = 'url("design/images/MenuExpose.png")';
					break;
					
					case "Articles":
						document.getElementsByTagName('nav')[0].style.background  = 'url("design/images/MenuArticles.png")';
					break;
					
					case "Membres":
						document.getElementsByTagName('nav')[0].style.background  = 'url("design/images/MenuMembres.png")';
					break;
					
					case "MaPage":
						document.getElementsByTagName('nav')[0].style.background  = 'url("design/images/MenuMaPage.png")';
					break;
					
					case "Recherche":
						document.getElementsByTagName('nav')[0].style.background  = 'url("design/images/MenuRecherche.png")';
					break;
				}
			}
		</script>
	</head>

	<body>
		<!--[if lte IE 6]><a href="../script/ie/ie.html" id="InternetExplorer" style="display:none;"></a><![endif]-->
		
		<div id="CorpMinimum">
			<header>
				<!-- Bannière -->
			</header>
			
			<div class="FormulaireConnexion">
				<!-- Formlaire de connexion -->
				<table>
					<form method="POST">
						<tr>
							<td style="font-size:12px;">Pseudo :</td>
							<td colspan="2"><input type="text" name="pseudo" class="ChampConnexion" /></td>
						</tr>
						<tr>
							<td style="font-size:12px;">Mot de passe :</td>
							<td colspan="2"><input type="password" name="MotDePasse" class="ChampConnexion" /></td>
						</tr>
						<tr>
							<td style="font-size:12px;">Rester connecter</td>
							<td><input type="checkbox" name="ResterConnecter" /></td>
							<td rowspan="2" align="right"><input type="image" src="design/images/connexion.png" class="BoutonConnexion" /></td>
						</tr>
						<tr>
							<td colspan="2" style="font-size:10px;" ><a href="" class="MotDePasseOublie">J'ai oublié mon mot de passe.</a></td>
						</tr>
					</form>
				</table>
				<!-- Formlaire de connexion -->
			</div>
			
			<nav>
				<!-- Bouton du menu -->
				<a href="#" ><img src="design/images/BoutonAcceuil.png" width="66" height="26" alt="Accueil" class="BoutonAccueil" OnMouseOver="menu('Accueil')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonExpose.png" width="69" height="26" alt="Expose" class="BoutonExpose" /></a>
				<a href="#" ><img src="design/images/BoutonArticle.png" width="67" height="26" alt="Articles" class="BoutonArticle" OnMouseOver="menu('Articles')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonMembre.png" width="66" height="26" alt="Membres" class="BoutonMembre" OnMouseOver="menu('Membres')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonMaPage.png" width="67" height="29" alt="Ma page" class="BoutonMaPage" OnMouseOver="menu('MaPage')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonRecherche.png" width="80" height="26" alt="Recherche" class="BoutonRecherche" OnMouseOver="menu('Recherche')" OnMouseOut="menu('Expose')" /></a>
				<!-- Bouton du menu -->
			</nav>
			
			<div id="contenu">

index.php


<code type="php">
<!DOCTYPE html>
<?php 
session_start();
$title = "Accueil";
require_once("architecture/header.php");
?>
				<fieldset id="NewsCommunaute">
					<legend align="center"><img src="design/images/NewsCommunautaire.png" alt="News de la communautée" /></legend>
				</fieldset>
				
				<fieldset id="NewsSite">
					<legend align="center"><img src="design/images/NewsSite.png" alt="News de la communautée" /></legend>
				</fieldset>
<?php 
require_once("architecture/footer.php");
?>

footer.php

<code type="html">
</div>
			
			<footer>
			</footer>
		</div>
	</body>
</html>

desing.css


<code type="css">
body{
	margin:0;
	padding:0;
	font-family:Arial;
	background:url('images/FondBanniere.png') repeat-x;
	margin-top:-20px; /* Permet de corriger le problème de marge en attendant une solution plus propre... */
}

img{
	border: none;
}

#InternetExplorer6{
	width:100%;
	background-color:black;
	z-index:1000;
}

#CorpMinimum{
	position:relative;
	margin:0px auto;
	min-width:1024px;
	width:expression(document.body.clientWidth < 1024 ? "1024px" : "auto" ); /* min-width pour IE */
}

header{
	display:block;
	background:url('images/banniere.png') no-repeat;
	height:150px;
	width:1024px;
}

.FormulaireConnexion table{
	width:359px;
	color:#808080;
	border:none;
}

.FormulaireConnexion{
	position:absolute;
	top:10px;
	right:35px;
}

.ChampConnexion{
	border:1px solid #d3d3d6;
	width:235px;
	height:20px;
	height/*\**/:18px\9; /* Placement IE */
	padding-top/*\**/:4px\9; /* Placement IE */
	padding-left:5px;
	padding-right:5px;
	border-radius:5px; /* Coin arrondi Opéra, Google Chrome, Firefox */
	-moz-border-radius:5px; /* Coin arrondi Firefox */
	-webkit-border-radius:5px; /* Coin arrondi ancienne version Google Chrome, Safari */
	-khtml-border-radius:5px; /* Coin arrondi sur Linux */
	behavior:url('../script/ie/border-radius.htc'); /* Arrondi IE */
}

.BoutonConnexion{
	margin-right/*\**/:2px\9; /* Placement IE */
}

/* Placement Google Chrome, Safari et Opéra */
@media screen and (-webkit-min-device-pixel-ratio:0), all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){ 
	.BoutonConnexion{
		margin-right:2px;
	}
}

.MotDePasseOublie{
	text-decoration:none;
	color:#808080;
}

nav{
	display:block;
	background:url('../design/images/MenuExpose.png') no-repeat;
	width:1024px;
	height:85px;
	margin: 10px auto;
}

.BoutonAccueil{
	position:relative;
	top:20px;
	left:118px;
}

.BoutonExpose{
	position:relative;
	top:20px;
	left:211px;
}

.BoutonArticle{
	position:relative;
	top:20px;
	left:304px;
}

.BoutonMembre{
	position:relative;
	top:20px;
	left:385px;
}

.BoutonMaPage{
	position:relative;
	top:22px;
	left:465px;
}

.BoutonRecherche{
	position:relative;
	top:20px;
	left:550px;
}

#NewsCommunaute{
	display:block;
	float:left;
	width:44%;
	height:250px;
	margin:10px 0 0 3%;
	padding:10px;
	border:1px solid #ccc;
}
#NewsSite{
	display:block;
	float:right;	
	width:44%;
	height:250px;
	margin:9px 3% 0 0;
	padding:10px;
	border:1px solid #ccc;
}

Code généré sur index.php


<code type="html">
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Accueil</title>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/design.css" />
		
		<script type="text/javascript" src="script/javascript/menu.js"></script> 

		
		<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
		
		<!-- FancyBox -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script type="text/javascript" src="script/javascript/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
		<script type="text/javascript" src="script/javascript/ie.js"></script>
		<link rel="stylesheet" href="script/javascript/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
		<!-- FancyBox -->

	</head>

	<body>
		<!--[if lte IE 6]><a href="../script/ie/ie.html" id="InternetExplorer" style="display:none;"></a><![endif]-->
		
		<div id="CorpMinimum">
			<header>
				<!-- Bannière -->
			</header>
			
			<div class="FormulaireConnexion">

				<!-- Formlaire de connexion -->
				<table>
					<form method="POST">
						<tr>
							<td style="font-size:12px;">Pseudo :</td>
							<td colspan="2"><input type="text" name="pseudo" class="ChampConnexion" /></td>
						</tr>
						<tr>

							<td style="font-size:12px;">Mot de passe :</td>
							<td colspan="2"><input type="password" name="MotDePasse" class="ChampConnexion" /></td>
						</tr>
						<tr>
							<td style="font-size:12px;">Rester connecter</td>
							<td><input type="checkbox" name="ResterConnecter" /></td>
							<td rowspan="2" align="right"><input type="image" src="design/images/connexion.png" class="BoutonConnexion" /></td>
						</tr>

						<tr>
							<td colspan="2" style="font-size:10px;" ><a href="" class="MotDePasseOublie">J'ai oublié mon mot de passe.</a></td>
						</tr>
					</form>
				</table>
				<!-- Formlaire de connexion -->
			</div>
			
			<nav>

				<!-- Bouton du menu -->
				<a href="#" ><img src="design/images/BoutonAcceuil.png" width="66" height="26" alt="Accueil" class="BoutonAccueil" OnMouseOver="menu('Accueil')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonExpose.png" width="69" height="26" alt="Expose" class="BoutonExpose" /></a>
				<a href="#" ><img src="design/images/BoutonArticle.png" width="67" height="26" alt="Articles" class="BoutonArticle" OnMouseOver="menu('Articles')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonMembre.png" width="66" height="26" alt="Membres" class="BoutonMembre" OnMouseOver="menu('Membres')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonMaPage.png" width="67" height="29" alt="Ma page" class="BoutonMaPage" OnMouseOver="menu('MaPage')" OnMouseOut="menu('Expose')" /></a>
				<a href="#" ><img src="design/images/BoutonRecherche.png" width="80" height="26" alt="Recherche" class="BoutonRecherche" OnMouseOver="menu('Recherche')" OnMouseOut="menu('Expose')" /></a>
				<!-- Bouton du menu -->
			</nav>

			
			<div id="contenu">
				<fieldset id="NewsCommunaute">
					<legend align="center"><img src="design/images/NewsCommunautaire.png" alt="News de la communautée" /></legend>
				</fieldset>
				
				<fieldset id="NewsSite">
					<legend align="center"><img src="design/images/NewsSite.png" alt="News de la communautée" /></legend>
				</fieldset>
				
				
			</div>
			
			<footer>

			</footer>
		</div>
	</body>
</html>

Merci de m'aider à trouver le pourquoi du comment. Smiley cligne

Modifié par Vict0 (09 Jan 2011 - 10:59)

Vict0

8 Jan 2011 à 14:38

Up.

Zealot

14 Feb 2011 à 01:10

Bonjour,

J'ai à peu près le même problème avec la fonction switch qui permet d'appeler mes pages sans recharger la bannière, pourriez vous me dire comment avez vous résolu ce souci?

Environ 20 px de marge et rien à faire, ça ne vient ni du css, ni du html.

Par ailleusr, lorsque je charge uniquement le header.php dans un navigateur, ça marche, pas de marge indésirée...

sherone48

3 May 2011 à 13:30

je re up !!!!
même problème sur un prestashop. Hier tout était Ok et ce matin, une marge de +- 20px au dessus du site. Rien dans le css ni dans le html.
Par contre dans le code source, tout le contenu du head à part les méta et la <title> se retrouve dans le body 0_o
comprend rien !!!
Je suppose un bug ajax mais bon ... Smiley sweatdrop

sherone48

3 May 2011 à 14:09

Problème résolu, conversion du fichier en utf8 sans Bom à la place d'utf8 et c'est réglé ...

Sujet clos