Background body décalé

**Rifton007** · 01/06/2009, 08h32

Bonjour et merci d'avance pour votre aide.

Probléme liée à mon background repeat-y qui est centré.

http://www.delightfactory.eu/index.php

En 1450x1050 le site semble s'afficher correctement, à la différence que si le viewport passe sous les 1350px with, mon background body se décale.
Dans le cas inverse où il est égale ou dépasse les 1350px, il est parfaitement centré, comment puis-je évité cela ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<body>
<div id="DIV_Global">
<div id="DIV_Leftbody"></div>
<div id="DIV_Body">
<div id="DIV_Flash"></div>
<div id="Include"></div>
<div id="DIV_Footer"></div>
</div>
<div id="DIV_Rightbody"></div>
</div>
</body>

Code :

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
body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-image: url(../PIC/Lineground.jpg);
	background-repeat: repeat-y;
	font-family: Helvetica, Arial;
	font-size: 12px;
	color: #666;
	background-position: center top;
	background-color: #FFF;
	height: 100%;
}
#DIV_Footer {
	background-image: url(../PIC/DIV_Bottom.jpg);
	height: 147px;
	width: 1020px;
	margin-bottom: 0px;
}
#DIV_Install {
	height: 562px;
	width: 1020px;
	background-image: url(../PIC/Install_flash.jpg);
	background-repeat: no-repeat;
	padding-top: 380px;
	font-family: Helvetica, Arial;
	font-size: 12px;
	color: #FFF;
	text-align: left;
	padding-left: 90px;
}
 
#DIV_Global {
	width: 1350px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}
#DIV_Body {
	float: left;
	width: 1020px;
}
#DIV_Flash {
	width: 1020px;
	height: 506px;
	margin: 0px;
}
 
 
 
#DIV_Leftbody {
	background-image: url(../PIC/Left_body.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	width: 165px;
	float: left;
	height: 1300px;
}
 
#DIV_Rightbody {
	background-image: url(../PIC/Right_body.jpg);
	background-repeat: no-repeat;
	background-position: right;
	width: 165px;
	float: left;
	height: 1300px;
}
#Include {
	margin: 0px;
	width: 1020px;
	height: 1300px;
	background-color: #F00;
}

Merci

**Erwan31** · 02/06/2009, 01h25

Bonsoir,
pour commencer le choix du fond sonore est un peu trop intrusif.
Et puis problème plus ennuyeux, il n'y a AUCUN moyen de couper le son au niveau de de zone utile, ce qui peut faire fuir un certain nombre de visiteurs.

Ce n'est pas tant ton fond (qui se centre correctement) que le bloc rouge en float:left qui ne devrait pas être flottant et qui ne se centre pas comme il faudrait

**Rifton007** · 02/06/2009, 08h54

Pour le son c'est réglé, c'est juste que j'avais pas lancé Dremweaver pour la derniére mise à jour.

Pour mieux apprivoiser le probléme, voici une présentation de mon layout.

Et donc le body qui est juste en dessous avec un background centré en repeat:y. L'image fait 1350px x 1px
Le width de ma DIV_global est de 1350px

Pour le reste, je ne sais pas si c'est possible.
Mais je souhaiterais que mon viewport se focalise sur ma DIV_body.
Afin d'éviter que dans des résolution inférieure, un scrollbar_vertical ne s'affiche à cause de la DIV_leftbody et DIV_rightbody, qui ne sont juste que des DIV avec une image.

Dimensions
DIV_global: 1350px;
DIV_leftbody: 165px * 1300px;
DIV_body: 1020px;
DIV_rightbody: 165px * 1300px;

Encore merci

Background body décalé

CSS

Vue hybride

Discussions similaires

Partager

Partager