100% défilement horizontal [Résolu]

[gagnier]

Bonjours, j'ai une page web qui n'occupe pas toute la largeur de la page, mais certaint div sont à 100% pour que l'image de fond occupe toute l'espace peut importe la grandeur

la page est : http://testserv.net46.net/limme/

voici le css :

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
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
/*Initialisation*/
@font-face {
  font-family: text;
  src: url('../font/text.ttf');
}
@font-face {
  font-family: logo;
  src: url('../font/logo.ttf');
}
* {
	margin:0;
	padding:0;
}
body {
	background-color:#AAA;
	background-image:url(bg4.png);
	background-attachment:fixed;
	background-position:bottom;
	background-repeat:repeat-x;
}
/*Liens*/
A:link {text-decoration: none; color:#444;}
A:visited {text-decoration: none; color:#444;}
A:active {text-decoration: none; color:#444;}
A:hover {text-decoration: underline; color:#E68600;}
 
.top A:link {text-decoration: none; color:#FFF;}
.top A:visited {text-decoration: none; color:#FFF;}
.top A:active {text-decoration: none; color:#CCC;}
.top A:hover {text-decoration: none; color:#AAA;}
 
.nopost A:link {text-decoration: none; color:#06F;}
.nopost A:visited {text-decoration: none; color:#06F;}
.nopost A:active {text-decoration: none; color:#06F;}
.nopost A:hover {text-decoration: underline; color:#E68600;}
 
.top_menu_b A:link {text-decoration: none; color:#FFF;}
.top_menu_b A:visited {text-decoration: none; color:#FFF;}
.top_menu_b A:active {text-decoration: none; color:#CCC;}
.top_menu_b:hover {text-decoration: none; color:#FFF; background-image:url(top_menu_h.png);}
/*Box*/
.top {
	width:100%;
	height:70px;
	background-color:#FFF;
	font-family: logo;
	font-size:65px;
	background-image:url(top.png);
	background-repeat:repeat-x;
	color:#FFF;
	padding-left:25px;
}
.top_menu {
	width:100%;
	height:35px;
	font-size:30px;
	background-image:url(top_menu.png);
	background-repeat:repeat-x;
	color:#FFF;
}
.top_menu_b {
	width:auto;
	height:35px;
	font-size:30px;
	background-image:url(top_menu.png);
	background-repeat:repeat-x;
	color:#FFF;
	float:left;
	padding-left:9px;
	padding-right:9px;
	margin-left:6px;
	margin-right:6px;
	border-radius:10px;
}
.bot {
	width:100%;
	height:75px;
	background-image:url(bg3.png);
	background-repeat:repeat-x;
}
.content {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.content2 {
	background-color:#FFF;
	width:100%;
	height:auto;
}
.left {
	border-width:1px;
	border-color:#0A0;
	border-radius:15px;
	border-style:solid;
	width:240px;
	padding:10px;
	margin-top:15px;
	margin-left:10px;
	min-height:100px;
}
.right {
	text-align:justify;
	border-width:1px;
	border-color:#0A0;
	border-radius:15px;
	border-style:solid;
	width:650px;
	margin-left:32px;
	margin-top:15px;
	padding-left:15px;
	padding-right:15px;
	padding-top:5px;
	padding-bottom:15px;
	font-family:text;
}
/*Écriture*/
.nopost {
	font-size:20px;
	text-align:center;
	font-weight:bold;
}
.title {
	font-size:20px;
	font-weight:bold;
}
.title_2 {
	color:#555;
	font-size:18px;
	font-family: text;
}
.text {
	font-size:17px;
	font-family: text;
}
.center {
	text-align:center;
}

et pour le html, vous pouvez regarder le code source de la page.

ou ce trouve le problème? merci

[gagnier]

J'ai repéré que mon erreur venait de :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
.top {
	width:100%;
	height:70px;
	background-color:#FFF;
	font-family: logo;
	font-size:65px;
	background-image:url(top.png);
	background-repeat:repeat-x;
	color:#FFF;
	padding-left:25px;
}

mais je ne sais pas pourquoi...

[FirePrawn]

Bonjour,

Tu pourrais peut-être nous expliquer ce qui ne va pas avec ton site, plutôt que de nous laisser deviner ?

[gagnier]

ah, désolé, je pensait l'avoir indiqué

Le problème est que le div avec class top est à 100%, mais il dépasse sur la droite et crée une barre de défilement horizontale, ce que je ne veux pas...

merci

[Atomya Rise]

Je pense que ton décalage viens de ceci :

Code css :

padding-left:25px;

Il serais sans doute mieux de mettre ton contenant dans une div en 100% et d'ensuite appliquer ta marge au contenant intérieur.

[FirePrawn]

Euh chez moi, sous Firefox 6 et IE7, aucun problème

[gagnier]

J'ai justement essayer la solution d'Atomya Rise, jai mis width:100%-25px; et tout est parfait, merci !

[Atomya Rise]

Pas de quoi !