Décalage avec les balises <DIV>

Version imprimable

14/04/2008, 12h15
arno34php

Décalage avec les balises <DIV> [TERMINE]

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 ?
14/04/2008, 12h51
osia1

salut, envoie ton code s'il te plaît pour que l'on visualise mieux....
14/04/2008, 13h07
ac/dc
A mon avis tu as dû faire ceci :
Code:

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 ...
14/04/2008, 13h45
12monkeys
Bonjour

Citation:

Envoyé par arno34php

<DIV="center">

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

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

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 ??? :aie:

Merci pour vos réponses.

Citation:

Envoyé par ac/dc

A mon avis tu as dû faire ceci :

Code:

1
2
 
body {text-align : center;}

...

Malheureusement ça ne résout pas le décalage. :cry:
Ensuite, pour répondre à 12monkeys, il s'agit bien de :

Code:

<div align="center">

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

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

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:

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 :roll:
Merci encore !

14/04/2008, 15h35
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 !
14/04/2008, 17h32
ac/dc

Citation:

Envoyé par arno34php

Merci pour vos réponses.
Malheureusement ça ne résout pas le décalage. :cry:

Je n'ai pas dit que ça allait résoudre quelque chose ... :roll:
14/04/2008, 19h12
arno34php

Citation:

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.
14/04/2008, 22h34
12monkeys

Citation:

Envoyé par arno34php

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

Ah ben ça change un ptit peu la détermination du problème.

J'ai testé ton code sous IE7 et Firefox, sous IE 7 je n'ai pas de décalage, sous firefox il existe mais provient de ce que nous avons indiqué plus haut.

Tu aurais une url qu'on voit ce problème "en direct".

Petite indication sur ton code : l'élément link doit apparaitre dans ton head et non dans le body.
15/04/2008, 07h20
arno34php

J'ai changé la place du link, merci.
Voilà l'url directe : http://g.dalard.club.fr/Margueritte/index.html
15/04/2008, 08h12
ac/dc

Salut, pareil que 12monkeys, pas de décalage sous ie7, alors qu'avec firefox oui ... Pour mon site ça me le fait aussi, mais je trouve pas cela trop gênant ...
15/04/2008, 10h37
jibe74

Salut,

Je ne comprends pas bien quel est le problème ? Sous Firefox et Opéra sous Linux, il se produit effectivement un recentrage (c'est ça le "décalage" ?) lorsqu'apparait l'ascenseur... Cela me parait tout à fait normal et pas choquant ! On ne le remarque d'ailleurs que lorsqu'on change la hauteur de la fenêtre...

[troll]
IE7 ? C'est quoi ce truc ?
[/troll]
Bon, plus sérieusement, et bien que détestant "ce truc", j'ai IE7 et IE6 sur mon Linux ! (ben oui, avec wine, ça marche... aussi mal que sous Windows :lol: Mais il faut quand même bien que je puisse tester si mes sites ne s'y affichent pas trop mal...). Pas de décalage bien sûr, puisque l'emplacement des ascenseurs reste toujours matérialisé => pas de recentrage à effectuer...

Tout ça me parait très logique, et pas gênant. Est-ce que ça se passe autrement sous W$ ? Je ne pense pas...
15/04/2008, 11h04
osia1

je ne vois pas ou se situe le problème, elles sont très bien ces pages ...
16/04/2008, 08h13
arno34php

Si ça ne choque personne tant mieux ;)
Je ne suis pas forcément très perfectionniste mais ce décalge ne fait pas très pro ... :?
Bon je ne sais pas si je dois cocher le sujet comme résolu ...
Si qqn à une solution ou trouve la faille dans mon codage, je suis toujours preneur !
Bonne journée à tous et merci pour vos appréciations positives.
16/04/2008, 16h12
jibe74

Salut,

Citation:

Envoyé par arno34php

Si qqn à une solution ou trouve la faille dans mon codage, je suis toujours preneur !

Je n'ai pas regardé ton code, mais relis mon post ci-dessus : soit je n'ai rien compris, soit il n'y a rien d'anormal, et rien à faire !

Citation:

Envoyé par arno34php

Je ne suis pas forcément très perfectionniste mais ce décalge ne fait pas très pro ... :?

Mais où est donc le problème ? Je n'ai aucun décalage, si ce n'est une normale adaptation à la largeur de la zone d'affichage ! Et ça, je ne vois vraiment pas en quoi ça "ne fait pas très pro" !
17/04/2008, 15h55
arno34php

Merci pour votre contribution. Sujet terminé.