Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Décalage anormal au dessus d'un header > Lecture du sujet

Décalage anormal au dessus d'un header

Vous devez être inscrit pour pouvoir poster des messages

RésoluLe problème de ce sujet a été résolu

Page : 1 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1 
Hors ligne Tristou # Posté le 30/08/2008 à 15:00:23
Noël@home
Avatar
Groupe : Membres
Bonjour,

j'ai un problème (assez frustrant je dois dire) que je n'arrive pas à résoudre, on s'y est même mis à deux, sans trouver :D .

Je code une appli de forum et sans raison particulière, entre la page index.php et la page de connexion, il y a une marge extérieure qui est plus grande dans un fichier que dans l'autre sans raison particulière puisque le margin-top est le même, comme le montre ces captures d'écran :

index.php
Image utilisateur

connexion.php
Image utilisateur

J'ai bien tenté d'enlever les éléments de la page petit à petit mais ça ne m'a pas indiqué où est le problème donc je m'en remet à d'autres, ptet que c'est évident mais que je l'ai loupé ^^ .

Voici les codes utilisés pour la page de connexion (celle qui a le problème) :
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<?php

session_start();

// Inclusion des classes du moteur de template
require_once('core/template/lib/template.class.php');
require_once('core/template/lib/cache_ftp.class.php');

// instanciation de la classe
$tpl = new Talus_TPL('core/template/tpl/', 'core/template/cache');

$tpl->set_file('connexion.html'); //On définit quel sera le fichier template correspondant

$tpl->set('NOM_FORUM','Forum de test');
$tpl->set('PAGE_ACTUELLE','connexion');

$tpl->parse('connexion.html'); // Enfin, on parse

?>



Le template html
Code : HTML
 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>{NOM_FORUM} &raquo; {PAGE_ACTUELLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="all" type="text/css" title="Design global du forum" href="core/style/defaut/global.css" />
	<link rel="stylesheet" media="all" type="text/css" href="core/style/defaut/formulaires.css" />
  </head>

  <body>       
    <include tpl="include/header.html" /> <!-- inclusion du header dynamique-->	
	<div id="connexion">
	  <form method="post" action="action.php?act=connexion">
	  <table>        	  
	    <tr>
		  <th colspan="2">Mes informations de connexion</th>
		</tr>
		<tr>		           
		  <td class="legende_connexion"><label for="pseudonyme"><strong>Pseudonyme :</strong></label></td>
		  <td class="form_connexion"><input type="text" name="pseudo" id="pseudonyme" /></td>
		</tr>
		<tr>
		<td class="legende_connexion"><label for="motdepasse"><strong>Mot de passe :</strong> </label></td>
		<td class="form_connexion"><input type="password" name="motdepasse" id="motdepasse" /></td>
		</tr>
		<tr>
		<td class="legende_connexion"><strong>Connexion automatique :</strong></td>
		<td class="form_connexion"><input type="checkbox" name="connex_auto" id="connex_auto" /> <label for="connex_auto">Rester connect&eacute;</label></td>
		</tr>			
	  </table>
	  <input type="submit" class="envoi" value="Valider" />
	  </form>
	  <div class="connex_infos">
	   <h4>Plus d'infos</h4>
	   <ul>
	     <li><a href="./action.php?act=get_mdp" title="R&eacute;cup&eacute;rez votre mot de passe">J'ai oublié mon mot de passe</a></li>
		 <li><a href="./inscription.php" title="S'inscrire pour participer au forum">S'inscrire au forum</a></li>
	   </ul>
	  </div>
	  
	</div>
	
    <include tpl="include/footer.html" /> <!-- inclusion du footer-->   
 
  </body>
</html>



Les feuilles de style

Code : CSS
  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
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
/*  Feuille de style "globale" du forum" */

body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 11px;
width : 95%;
margin: 2.5% 2.5%;
background-color : #EAEAEA;
padding: 0;
}

p {margin: 0;}

img {
border : none;
vertical-align : middle;
}

input {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 11px;
}

a {
color : black;
text-decoration : none;
}
 
 a:hover { 
text-decoration : underline; 
}

#header {
height: 100px;
background-color: #6BA3DA;
border: 1px solid #185265;
color : white;
padding : 0% 1% 1% 1%;
}

#header a {
color : white;
text-decoration : none;
}

#header a:hover {
text-decoration : underline;
}


#header  img.logo {
border : none;
vertical-align : middle;
float : right;
padding-top : 1%;
margin-left : 50%;
}

#header h2.nom_forum  {
float : left;
margin-left : 1%;
position : absolute;
}

ul#menu_horizontal {
height : 25px;
margin : 0%;
padding : 0;
background-color : #ECF8FB;
border-right : 1px solid #185265;
border-left : 1px solid #185265;
border-top : 1px solid #185265;
list-style-type : none; 
}
 
ul#menu_horizontal li {
padding : 0 0.5em;  
line-height : 30px;
}
 
ul#menu_horizontal li.bouton_gauche {
float : left;
}
 
ul#menu_horizontal li.bouton_droite {
float : right;
}

ul#menu_horizontal input.recherche {
width : 75%;
}
 
ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 0.5em;
}
 
ul#menu_horizontal a:hover { 
text-decoration : underline; 
}
 
#centre {
background-color: #EAEAEA;
margin : 2% 0%;
}

#centre table {
width : 100%;
border-collapse: collapse;
}

#centre td {
border: 1px solid #185265;
}

#centre .icone_legende {
width : 5%;
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
text-align : center;
font-weight : bold;
}

#centre .forum_legende {
width : 45%;
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
text-align : center;
font-weight : bold;
}

#centre .message_legende {
width : 10%;
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
text-align : center;
font-weight : bold;
}

#centre .last_msg_legende {
width : 20%;
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
text-align : center;
font-weight : bold;
}

#centre .modo_legende {
width : 20%;
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
text-align : center;
font-weight : bold;
}

#centre .supercat {
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
text-align : center;
font-weight : bold;
}

#centre .moderation_rapide {
background-color : #ECF8FB;
text-align : left;
padding-left : 1%;
}

#centre .moderation_rapide label {
font-weight : bold;
}

#centre .moderation_rapide select {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 11px;
}

#centre .icone {
width : 5%;
padding : 0% 1.7%;
background-color : #ECF8FB;
}

#centre .forum {
padding-left : 1%;
width : 45%;
background-color : #ECF8FB;
}

#centre .message {
width : 10%;
background-color : #ECF8FB;
text-align : center;
}

#centre .last_msg {
width : 20%;
background-color : #ECF8FB;
text-align : center;
}

#centre .modo {
width : 20%;
background-color : #ECF8FB;
text-align : center;
}

#centre .box_infos {
margin-top : 2%;
border : 1px solid #185265;
background-color : #ECF8FB;
}

#centre .box_infos h4{
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
border-bottom : 1px solid #185265;
margin-top : 0;
padding : 0.1% 1%;
}

#centre .box_infos ul {
list-style-type : square;
}

#pied {
color : black;
padding : 0.5% 0% 0.5%;
text-align : center;
}


Code : CSS
 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
/*  Feuille de style des formulaires du forum" */

#connexion table {
margin : 2% 20% 1% 20%; /* respectivement la marge du haut, de la droite, du bas, de la gauche.*/
width : 60%;
border-collapse: collapse;
}

#connexion th {
border : 1px solid #185265;
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
}

#connexion .legende_connexion {
background-color : #ECF8FB;
border : 1px solid #185265;
width : 30%;
text-align : right;
padding-right : 1%;
}

#connexion .form_connexion {
background-color : #ECF8FB;
border : 1px solid #185265;
width : 30%;
padding-left : 1%;
}

#connexion .envoi {
margin : 0% 50%;
}

#connexion .connex_infos {
margin : 2% 20% 1% 20%; /* respectivement la marge du haut, de la droite, du bas, de la gauche.*/
width : 60%;
border : 1px solid #185265;
background-color : #ECF8FB;
}

#connexion .connex_infos h4{
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
border-bottom : 1px solid #185265;
margin-top : 0;
padding : 0.1% 1%;
}

#connexion .connex_infos ul {
list-style-type : square;
}

#inscription table {
margin : 2% 20% 1% 20%; /* respectivement la marge du haut, de la droite, du bas, de la gauche.*/
width : 60%;
border-collapse: collapse;
}

#inscription th {
border : 1px solid #185265;
background : #6BA3DA url('images/barre_legendes.png') repeat-x;
}

#inscription .legende_inscription {
background-color : #ECF8FB;
border : 1px solid #185265;
width : 30%;
text-align : right;
padding-right : 1%;
}

#inscription .form_inscription {
background-color : #ECF8FB;
border : 1px solid #185265;
width : 30%;
padding-left : 1%;
}

#inscription .envoi {
margin : 0% 50%;
}




Et en bonus track, le code html du header et du footer, inclus :


Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="menu_horizontal">
   <if condition="{$IS_ONLINE}">
		<li class="bouton_gauche"><a href="./index.php" title="Aller &agrave; l'accueil du forum">Accueil</a></li>
		<li class="bouton_gauche"><a href="./profil.php?mode=edition" title="Editer mon profil">Mon profil</a></li>
		<li class="bouton_gauche"><a href="./membres.php" title="Voir la liste des membres">Membres</a></li>
		<li class="bouton_gauche"><a href="./deconnexion.php" title="Se deconnecter du forum">Deconnexion (<strong>Tristan</strong>)</a></li>
		<li class="bouton_gauche"><a href="./recherche.php" title="Effectuer une recherche">Recherche</a></li>
        <li class="bouton_droite"><a href="./messagerie.php" title="Envoyer/lire ses messages priv&eacute;s">Ma messagerie</a></li>		
		<li class="bouton_droite"><a href="./admin-index.php" title="Administration du forum">Administration</a></li>		
    <else />
		<li class="bouton_gauche"><a href="./index.php" title="Aller &agrave; l'accueil du forum">Accueil</a></li>
		<li class="bouton_gauche"><a href="./inscription.php" title="S'inscrire pour participer au forum">Inscription</a></li>
		<li class="bouton_gauche"><a href="./connexion.php" title="Se connecter au forum">Connexion</a></li>
		<li class="bouton_gauche"><a href="./recherche.php" title="Effectuer une recherche">Recherche</a></li> 
	</if> 
</ul>	

<div id="header">      
  <a href="./index.php" title="Nom du forum"><img src="upload/images/demo.gif" alt="{NOM_FORUM}" class="logo" /></a>    		
  <h2 class="nom_forum">{NOM_FORUM}</h2>	  
</div>



Code : HTML
1
2
3
4
5
6
<div id="pied">
  &copy; 2008 <strong>Forum de test</strong>, tous droits r&eacute;serv&eacute;s<br/>
  <a href="#" title="Cr&eacute;ez votre propre forum gratuit">Cr&eacute;er son forum</a> |
  <a href="#" title="Besoin d'aide, de conseils ?">Forum de support</a> |
  <a href="#" title="Tous les forums sont dans l'annuaire">Annuaire des forums</a>
</div>


Ce bug est vraiment insoluble et j'avoue ne plus trop savoir comment le corriger...

Merci par avance ;)
 
Hors ligne Yano # Posté le 31/08/2008 à 00:37:04
Avatar
Groupe : Membres
Bonjour,

Tu évoques un problème dont tu nous nous caches la source.

Ici, on est dans un forum HTML.
Donc, le PHP ne nous est d'aucune utilité.
Par contre, la page une fois affichée par le HTML dans le navigateur, avec tout le code HTML donc, là, oui, c'est utile.

Le site n'est pas en ligne ?
Si ?
Donne l'adresse, ça sera plus facile.


Hors ligne Tristou # Posté le 31/08/2008 à 11:10:59
Noël@home
Avatar
Groupe : Membres
Si je met aussi le code PHP ici alors que l'on est dans la partie xHTML ce qu'il est possible que ce lié au problème qui touche la partie xHTML. C'est donc pour être exhaustif que j'ai mis tant de trucs afin que l'on ne me demande pas le contenu de tel ou tel fichier.

Le site n'est pas en ligne, j'ai bien tenté mais sans succès :( .

EDIT : problème résolu, c'était dû à l'encodage de lapage (UTF-8) qui rajoutait un caractère invisible sous Notepad, il a suffit d'enregistrer en UTF-8 sans BOM pour régler le souci.
Édité le 31/08/2008 à 18:19:59 par Tristou
 

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 74 Zéros connectés | Requêtes SQL 7 requêtes | Temps de génération de la page : Total (SQL) 0.0683s (0.0546s)