Page qui se déforme à chaque chagement

Version imprimable

Bonjour à tous,

J'ai essayé de refaire mon site (design), mais certaines pages changent un peu de largeur quand elles sont appelées par un lien.
Voilà le css du site : si ça peut servir ! ;)

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
90
91
92
93
94
body {
background-color : #cccccc;
margin : 0;
padding : 0;
text-align : center;
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 12px;
}
BODY a {color:#0000FF;text-decoration:underline;}
BODY a:hover {color:#FF0000;font-weight:normal;text-decoration:none;}
img {
border : none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px; 
}
 
h1 {font-size : 150%;}
h2 {font-size : 130%;}
h3 {font-size : 120%;}
h4 {font-size : 110%;}
h5 {font-size : 100%;}
 
#page {
background-color : white;
border : 1px solid #777777;
border-left : 1px solid #777777;
border-right : 1px solid #777777;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px; 
width : 900px;
margin : 0 auto 16px auto;
padding : 0;
text-align : left;
}
 
#page .titre_style{color: #336666;text-shadow: 3px 3px 3px #999999;}
 
#mid {
width : 900px;
border-bottom : 1px solid #ccc;
  -moz-border-radius:    6px;
  -webkit-border-radius: 6px;
  border-radius:         6px; 
background-image : url(../deco/bg.png);
margin : 0;
padding : 0;
}
 
#droit {
width : 180px;
background-color:snow;
float : right;
margin : 0;
padding : 5px 10px 5px 10px;
border : 1px solid silver;
  -moz-border-radius:    20px;
  -webkit-border-radius: 20px;
  border-radius:         20px; 
}
 
#main {
width : 650px;
float : left;
margin : 0 0 0 25px;
padding : 7px;
text-align : justify;
}
 
#break {clear : both;}
 
#top h1 {margin : 0;padding : 0 0 0 10px;color : #ffffff;font-size : 24px;}
 
#top h2 {margin : 0;padding : 4px 0 5px 10px;color : #eef;font-size : 90%;}
 
#header {
width : 900px;
height : 116px;
background-color : transparent;
background-image : url(../deco/banniere.jpg);
background-repeat:no-repeat;
font-size : 24px;
text-align : center;
}
 
#footer {width:900px;margin-left:auto;margin-right:auto;padding-top:5px;padding-bottom:10px;height:auto;border-bottom:1px solid 
#777777;-moz-border-radius:6px;  -webkit-border-radius:6px; border-radius:6px;background-image:url(../deco/topbg.png);font-size:75%;text-align center; color:#225;}
 
#footer a {color:#E0FFFF;}
 
#footer a:hover {color:#A52A2A;text-decoration:underline;}
 
#footer .copyright {font-size:10px;text-align:center;}

N'y aurait-il pas un remède pour éviter ça, parce que c'est pas beau du tout ?

Merci de votre aide.

17/09/2011, 15h07
Invité

Bonjour J-Luc,
tu es sûr que ce n'est pas dû à l'apparition de la barre de scroll vertical ?

ps : le CSS n'est utile que s'il est accompagné du code HTML correspondant !
17/09/2011, 15h28
jlb59

Bonjour Jérôme,

C'est vrai, j'avais pas pensé à ça !
Je ne savais pas que ça jouait sur la largeur de la page.

En fait, il faudrait que certaines pages soient supérieures à celles initiales, par exemple avec des DIV, BR, etc.

C'est bien de ça dont tu me parlais ?

Citation:

Envoyé par jreaux62

ps : le CSS n'est utile que s'il est accompagné du code HTML correspondant !

Là, j'ai bien peur de ne pas très bien comprendre ! :?

Pour passer au W3C, aucune des pages n'a de balises. Elles débutent simplement au niveau du code.
Seule l'index.php à la racine en a. C'est d'ailleurs lui qui contient les arguments du Css.

Il faudrait que je fasse autrement, mais comme j'avais énormément de prb avec le menu en étant dans un autre rép., j'ai baissé les bras.

Il n'y a que la manière actuelle qui va à peu près bien.
17/09/2011, 15h36
Invité

Il suffit d'afficher le "code source généré".
IE -> onglet "Page" -> "Afficher la source"

Citation:

Envoyé par jlb59

Pour passer au W3C, aucune des pages n'a de balises. Elles débutent simplement au niveau du code.
Seule l'index.php à la racine en a. C'est d'ailleurs lui qui contient les arguments du Css.

Moi pas comprendre... :koi:

Citation:

Envoyé par jreaux62

Moi pas comprendre... :koi:

J'espère que ça t'aidera à mieux comprendre comment j'ai fait ce site.
INDEX.PHP

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Sabrimi_Download</TITLE>
<meta name="description" content="QI98 - Analyse de la mémoire>
<meta name="keywords" content="">
<meta name="author" content="JL BOUCHEZ">
<meta name="generator" content="WebExpert 5">
<link rel="stylesheet" type="text/css" href="styles/styles.css" title="">
</head>
 
 <body>
 
<div id="page">	
 
	<div id="header">			
 
	</div>	
 
	<div id="menubar">		
		<ul class ="menu">			
 
		</ul>
	</div>
 
	<div id="mid">			
		<div id="droit">				
 
		</div>						
 
		<div id="main">				
 
		</div>
	</div>		
 
	<div id="break"></div>		
 
	<div id="footer">				
 
	</div>	 
 
</div>	 
 
</body>
</html>

ACCUEIL.HTML (par exemple)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="fil_ariane">
 
 </div>
 
<div>&nbsp;</div>
 
<div class="cadre">
<div class="libelle"><span class="puce_libelle">&nbsp;&nbsp;&nbsp;</span>
Quel est le but de mesurer son QI ?
</div>
	<div class="texte">
		Bla bla bla bla bla bla bla
	</div>
</div>
...

Bon, j'ai généré la source du site et apparemment, tout est correct !