Décalage avec les balises <DIV>

**arno34php** · 14/04/2008, 12h15

Bonjour tout le monde.
J'ai placé sur mon site les balises <DIV="center">. Jusque là, tout va bien.

Selon les requêtes, la page contient plus ou moins d'informations et j'obtiens ou pas une barre de défilement sur mon navigateur.
Du coup, ma page de décale horizontalement du fait de la présence ou pas de la barre de défilement. Je comprends pourquoi mais je ne sais pas comment y remédier.
Quelqu'un pourrait-il m'aider svp ?

**osia1** · 14/04/2008, 12h51

salut, envoie ton code s'il te plaît pour que l'on visualise mieux....

**ac/dc** · 14/04/2008, 13h07

A mon avis tu as dû faire ceci :

Code :

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

1
2
 
body {text-align : center;}

Et sous firefox, le body diminue ou augmente en fonction de si il y a une barre de défilement ou non. Essaye sous ie, ça ne doit pas le faire normalement. Enfin si j'ai bien compris le problème ... Par contre pour y remédier je sais pas comment ...

**12monkeys** · 14/04/2008, 13h45

Bonjour

Envoyé par arno34php

<DIV="center">

Là je ne vois pas trop à quoi ça correspond ? Ca ne correspondrait pas plutôt à :

Code :

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

1
2
3
<div style="text-align:center">
ou
<div align="center">

Envoyé par ac/dc

Essaye sous ie, ça ne doit pas le faire normalement. Enfin si j'ai bien compris le problème ... Par contre pour y remédier je sais pas comment ...

+1

En effet IE réserve toujours la place aux ascenseurs (même s'il n'y en a pas necessité) alors que firefox ne le fais pas.

Pour résoudre le "problème", comme ac/dc je ne vois pas trop comment faire, il faudrait vérifier que l'affichage de la page dépasse la hauteur du navigateur, et pour faire ça ???

**arno34php** · 14/04/2008, 14h36

Merci pour vos réponses.

Envoyé par ac/dc

A mon avis tu as dû faire ceci :

Code :

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

1
2
 
body {text-align : center;}

...

Malheureusement ça ne résout pas le décalage.

Ensuite, pour répondre à 12monkeys, il s'agit bien de :

Code :

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

<div align="center">

et pour terminer ... osia, tu souhaites tout le code ? Le voilà :

Code maPage.php :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MonTitre</title></head>
 
<body>
<link rel="stylesheet" href="formpage.css" type="text/css" />
<div align="center">
<table class="general">
   <tr>
    <td colspan="6"><img src="./Img/banniere2.png" />
	<ul id="menu_horizontal">
<li class="bouton_gauche">lien1</li>
<li class="bouton_gauche">lien2</li>
<li class="bouton_gauche">lien3</li>
<li class="bouton_gauche">lien4</li>
<li class="bouton_gauche">lien5</li>
<li class="bouton_droite">lien6</li>
</ul>
    </td>
   </tr>
 
  <tr>
   <td colspan="6" class="Lien_page"></td></tr>
 
  <tr>	
    <td colspan="6">	
 
<table>
  <tr>
    <td width="17%" rowspan="2" class="Photo"></td>
    <td width="33%" class="Titre"></td>
    <td width="32%" class="Titre"></td>
    <td width="18%" class="Titre"></tr>
 
    <tr>
     <td colspan="3" class="'.$nouveaute.'"></td></tr>
 
</table>
</td>
   </tr>
 
 
 
   <tr>
    <td colspan="6" class="Lien_page"></td></tr>
 
 <tfoot>
   <tr>
    <td colspan="6" class="PiedDePage"></td>
   </tr></tfoot>
</table>
</div>
</body>
</html>

Code formpage.css :

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
86
87
88
89
body {
	background-color:#f4f9fd;
	}
 
table {
	background-color:#FFFFFF;
	border-color:#500078;
	border:2px;
	width:800px;
	border-collapse:collapse;
	padding:0px;
	}
.PiedDePage {
	background-color: #800000;
	font-weight: bold;
	font-size: 10px;
	color:#FFFFFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	}
.Photo {
	border:0px;
	margin:0px;
	border-collapse:collapse;
	width:130px;
	height:95px;
	margin-left:0px;
	margin-right:0px;
	padding:0px;
	vertical-align:top;
	}
.general {
	margin-left:0px;
	margin-top:5px;
	}
ul#menu_horizontal { 
              width : 798px; 
              height : 30px;
              margin : 0.2em 0 0 0;
              padding : 0;
              background-color : #f4f9fd;
              border : 1px dashed black;
              list-style-type : none; 
}
 
ul#menu_horizontal li {
              padding : 0 0.5em;  
              line-height : 30px;
}
 
ul#menu_horizontal li.bouton_gauche {
              float : left;
              border-right : 1px dashed black; 
}
 
ul#menu_horizontal li.bouton_droite {
               float : right;
               border-left : 1px dashed black;
}
 
ul#menu_horizontal a {
            color : black;
            text-decoration : none;
            padding : 0 0.5em; 
            font :  1em "Trebuchet MS";
}
 
ul#menu_horizontal a:hover { text-decoration : underline; }
 
ul#menu_horizontal a img { 
          border : none;
          padding :  0 0.3em;
}
.vignette {
	font-size:14px;
	color:#333333;
	font-weight:normal;
	text-align:justify;
	vertical-align:text-top;
	margin-left:5px;
	height:80px;
	padding-left:10px;
	padding-top:10px;
            padding-left:5px;
            padding-top:5px;
            background: url("./Img/nouveau.gif");
            background-position:right;
            background-repeat:no-repeat;
	}

Et enfin, une précision sur la classe nouveauté.

Code :

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

1
2
3
4
5
// le timestamp
$vieux_timestamp = $donnees['timestamp'];
$timestamp = time();
$diff = $timestamp - $vieux_timestamp;
if ($diff <= 2592000) {$nouveaute = "vignette";} else {$nouveaute = "Normal";}

Voilà pour l'essentiel.
Ca vous fera un peu de lecture

Merci encore !

**12monkeys** · 14/04/2008, 15h35

Tout ça est bien beau mais tu ne réponds pas à nos interogations : ton problème est t'il bien lié à l'ascenseur qui ne s'affiche pas par défaut dans firefox !

**arno34php** · 14/04/2008, 19h12

Envoyé par 12monkeys

Tout ça est bien beau mais tu ne réponds pas à nos interogations : ton problème est t'il bien lié à l'ascenseur qui ne s'affiche pas par défaut dans firefox !

Oui Oui ... pas seulement sur FireFox mais sous IE7 aussi. Quand l'ascenseur apparait il créé un décalage avec les deux navigateurs.