Position absolute et deplavement de son contenu

**DjChat** · 27/06/2008, 18h08

Bonjour a tous, j'ai du mettre une de mes div (relief_droit) qui contiens une image en position absolute pour IE, parc'que sinon les autre div se positionnais en bas de celle-ci.

Mon probleme c'est que j'arrive a placer mon image ou je le souhaite mais quand je met le navigateur en plus petit ou plus grand il reste pas sa sa place initial il se positionne par raport au navigateur.

Je n'arrive pas aplacer cette image comme je le souhaite a par en position absolute, donc si vous pouviez m'aidez...

Mon HTML:

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
<body>
 
 
       <div id="conteneur">
 
 
	<div id="banniere">
 
  	</div>
 
		<div id="menu_haut">
 
		</div>
 
 
	<div id="email">
 
 
 
	</div>
 
 
		<div id="offre">
 
 
		</div>
 
        <div id="offre2">pub</div>
 
		<div id="relief_droit">
 
    	</div>
 
 
<div id="contenu">
 
</div>
 
    <div id="menu_bas">
 
        <a href="assistance.php">Assistance</a> <a href="depannage.php">Depannage</a>
 
    </div>
 
       		<div id="barre">
 
           	</div>
 
    <div id="bas_pages">
 
    			images</div>
 
 
 
            </div>
 
 
            </body>

Mon CSS:

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
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
*{
	list-style-type: none;
	margin : 0px;
	padding:0px;
}
 
 
 
body{
 
	font-family: "Times New Roman", Times, serif;
	height: 100%;
 
 
}
 
 
 
/* -----------  Div principal (ou conteneur)*/
 
#conteneur{
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 950px;
	height: 100%;
	background-image: url(../_img/fdcontenu.gif);
	background-repeat: repeat; 
 
}
 
#banniere{
	width: 950px;
	height: 200px;
 
}
 
#menu_haut{
	width: 950px;
	height: 50px;
 
 
}
 
 
#email{
	width: 260px;
	height: 110px;
	float: right;
	background-image: url(../_img/mail.gif);
 
}
 
#offre{
 
	width: 260px;
	height: 350px;
	margin-left: 690px;
	margin-top: 110px;
}
 
#offre2{
 
	margin-top: 460px;
	width: 260px;
	height: 10px; 
	margin-left: 700px;
}
 
 
#contenu{
	width: 680px;
	height: 100%;
	padding: 10px 0px 10px 5px;
 
}
 
#relief_droit{
	right: 415px;
	width: 10px;
	height: 545px;
	background-image: url(../_img/ombreporte.gif);
	position: absolute;
}
 
#menu_bas{
	width: 950px;
	height: 50px;
	text-align: center;
}
 
#barre{
	width: 950px;
	height: 10px;
	background-image: url(../_img/ligne-bas.gif);
	background-repeat: no-repeat;
}
 
#bas_page{
	width: 950px;
	height: 160px;
}

Deux images:

Image 1

Image 2

Merci d'avance!!!

**Tdeny** · 30/06/2008, 11h47

Bonjour,

Et si tu mets ton image en position relative, à la div ou en pourcentage d'écran, ou dans une div qui se trouve dans une autre div déjà positionnée.

**Tdeny** · 01/07/2008, 15h32

Sais-tu que les décalrations de Style CSS peuvent se faire en javascript ?
Exemple :

Code :

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

1
2
3
4
document.write("<style ID='ST1' type='text/css'>");
document.write("#menu {position:absolute; top:0px; left:0px;padding:4px;background-color:#CFE6EE;width:"+ largmenu +"px;height:"+ hautmenu +"px;border: red 8px solid; font-size: 14px; color: violet;z-Index:5;}");
document.write("#div1 {position:absolute; top:10px; left:300px;padding:4px;width:200px;height:"+ hautdiv1 +";border: 1px solid black; font-size: 12px; color: black;text-align:left;}");
document.write("</style>");

Comme ça peut être une 2ème déclaration on lui met un ID.
L'intérêt c'est qu'on peut alors calculer une position en fonction du screen.width, en calcul de pourcentage.
Pose la question sur le forum javascript

**DjChat** · 01/07/2008, 19h48

Non, j'avais juste vagment entendu qu'on pouvais le faire en javascript, mais je ne me suis pas encorre interesser a la question....

J'ai trouver mon probleme, c'est que je ne lui avait pas mi un parent au dessus de lui en position relative, donc il se placait par raport au navigateur...

Mais la j'ai juste encore un souci, maintant mon image relief est bien placer mais a un endroit, elle est en dessous, sous l'image de la div offre, alors que j'aimerai qu'elle soit au dessus...

Je n'arrrive pas a trouver comment pallier a ceci, si vous aviez une idée, je vous met une image et mon code....

image

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
 
    <body>
 
 
       <div id="conteneur">
 
 
	<div id="banniere">
 
 
 
	</div>
 
		<div id="menu_haut">
 
 
		</div>
 
 
	<div id="email">
 
 
 
	</div>
 
    <div id="relief_droit">
 
    	</div>
 
		<div id="offre">
 
 
                </noscript>
 
 
		</div>
 
        <div id="offre2">pub</div>
 
 
 
 
<div id="contenu"> 
 
</div>
    <div id="menu_bas">
 
        <a href="assistance.php">Assistance</a> <a href="depannage.php">Depannage</a>
 
    </div>
 
       		<div id="barre">
 
           	</div>
 
    <div id="bas_pages">
 
    			images</div>
 
 
 
            </div>
 
 
            </body>
    </html>

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
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
*{
	list-style-type: none;
	margin : 0px;
	padding:0px;
}
 
 
 
body{
 
	font-family: "Times New Roman", Times, serif;
	height: 100%;
 
 
}
 
 
 
/* -----------  Div principal (ou conteneur)*/
 
#conteneur{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 950px;
	height: 100%;
	background-image: url(../_img/fdcontenu.gif);
	background-repeat: repeat; 
 
}
 
#banniere{
	width: 950px;
	height: 200px;
 
}
 
#menu_haut{
	width: 950px;
	height: 50px;
 
 
}
 
 
#email{
	width: 260px;
	height: 110px;
	float: right;
	background-image: url(../_img/mail.gif);
 
}
 
#relief_droit{
	right: 255px;
	width: 10px;
	height: 545px;
	background-image: url(../_img/ombreporte.gif);
	position: absolute;
}
 
#offre{
 
	width: 260px;
	height: 350px;
	margin-left: 690px;
	margin-top: 110px;
}
 
#offre2{
 
	margin-top: 460px;
	width: 260px;
	height: 10px; 
	margin-left: 700px;
}
 
 
#contenu{
	width: 680px;
	height: 100%;
	padding: 10px 0px 10px 5px;
 
}
 
 
 
#menu_bas{
	width: 950px;
	height: 50px;
	text-align: center;
}
 
#barre{
	width: 950px;
	height: 10px;
	background-image: url(../_img/ligne-bas.gif);
	background-repeat: no-repeat;
}
 
#bas_page{
	width: 950px;
	height: 160px;
}