Déplacer un div dans un autre : quelle propriété ?

Version imprimable

Bonjour,

Je voudrais déplacer mon div "scrollup" dans mon div "live_informations" mais je n'y arrive pas...

Voici mon code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>ScrollUp</title>
		<meta http-equiv="content-language" content="fr"/>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15"/>
		<meta http-equiv="content-style-type" content="text/css"/>		
		<style type="text/css">
                        body
                        {
                                font-family             : Verdana;
                                font-size                       : 10px;
                        }
                        #live_informations
                        {
                                background-color        : #FFCE73;
                                border                  : 1px solid #000000;
                                height                  : 25px;
                                /*overflow                      : hidden;*/
                                width                   : 400px;
                        }
                        #scrollup
                        {
                                background-color        : #CCC;
                                position                        : relative;
                        }
                </style>
		<script type="text/javascript">
                        function scrollup()
                        {
                                setTimeout("scrollup()", 500);
                        }
                </script>
	</head>
	<body onload="javascript:scrollup();">
		<div id="live_informations">
			<div id="scroolup">
				15/08 18:50 : XXXX<br/>
				15/08 14:30 : YYYY<br/>
				15/08 12:12 : ZZZZ<br/>
				15/08 10:18 : AAAA<br/>
				15/08 06:45 : BBBB<br/>
				15/08 04:32 : CCCC<br/>
				14/08 23:47 : DDDD<br/>
				14/08 10:19 : EEEE
			</div>
		</div>
	</body>
</html>

J'ai essayé avec "top" et "margin-top" mais sans succès...

Savez-vous pourquoi ça ne fonctionne pas ?

Merci,
Mathieu

15/08/2006, 14h09
Fabster

Citation:

Envoyé par MaTHieU_

Code:

<div id="scroolup">

Peux etre a cause de ca, nan;) ?

Ou peux etre a tu fait une faute de frappe en ecrivant:?
15/08/2006, 14h10
MaTHieU_

Bonjour,

Haaaa!!!!

J'aurai pu chercher longtemps :)

Merci,
Mathieu
15/08/2006, 14h12
Fabster

lol, c'etait pas une faute de frappe alors :D :D :D si je comprend bien
[EDIT] Ca s'est des trucs a la *** :mouarf: [/edit]
15/08/2006, 14h14
MaTHieU_

Salut,

Si si c'était une faute de frappe...

Mais jamais j'aurai pensé à vérifier le nom de l'id :)

Merci,
Mathieu
15/08/2006, 14h17
Fabster

Lol, quand je disais faute de frappe, je parlais dans ton message. Je me suis dit que c'etait peut etre une erreur qui s'etait glisser entre ton code et ton post ici. Mais c'est pas grave, bonne continuation:)
15/08/2006, 14h19
MaTHieU_
Salut,

Ha, OK!

Par contre, une autre question...

J'essai d'utiliser ça en JavaScript :
Code:

1 2 document.getElementById("scrollup").style.top = document.getElementById("scrollup").style.top - 1;
Mais ça ne semble pas marcher :

Citation:

Erreur*: Erreur d'analyse de la valeur pour la propriété «*top*». Déclaration abandonnée.
Fichier source*: file:///C:/Documents%20and%20Settings/xxx/Bureau/scroolup.html
Ligne*: 0

Sais-tu pourquoi ?

Merci,
Mathieu
15/08/2006, 14h24
Fabster

Euh, le style.top n'existe pas en javascript.
Mais apres je vois pas trop ce que tu veux faire, explique un peu ce que tu recherche a faire.
Je te file le lien d'un site reprenant les equivalences entre les proprietes en CSS et celle en javascript. Ca pourra peut etre t'aider
Equivalence
15/08/2006, 15h28
MaTHieU_

Salut,

J'ai donc utilisé marginTop !

Une autre question, comment récpérer la taille d'un div en JavaScript ?

Car j'ai besoin de récupérer la taille du div "scrollup".

Merci,
Mathieu
15/08/2006, 15h39
Fabster

cette fois-ci faut utiliser une autre methode que le .display.
Faut chercher du cote des offset, ca doit etre un truc du style:

Code:

document.element.offsetHeight;

Salut,

J'ai fait ça :
Code:

1 2 3 var MyScrollUp = document.getElementById("scrollup"); var MyScrollUpHeight = MyScrollUp.offsetHeight;
C'est niquel ;)

Merci,
Mathieu

Salut,

J'ai donc fini, cependant, j'ai un soucis encore de compatibilité avec Internet Explorer, le div contenu "scrollup" dépasse du div conteneur...
En effet, ça macrhe parfaitement avec Firefox...

http://cjoint.com/data/ipqlyclaZl_erreur.PNG

Voici le code :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>ScrollUp</title>
		<meta http-equiv="content-language" content="fr"/>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15"/>
		<meta http-equiv="content-style-type" content="text/css"/>		
		<style type="text/css">
                        body
                        {
                                font-family             : Verdana;
                                font-size                       : 10px;
                        }
                        #live_informations
                        {
                                background-color        : #FFCE73;
                                border                  : 1px solid #000000;
                                height                  : 45px;
                                overflow                        : hidden;
                                width                   : 400px;
                        }
                        #scrollup
                        {
                                background-color        : #FFCE73;
                                position                        : relative;
                        }
                </style>
		<script type="text/javascript">
                        function scrollup()
                        {                               
                                var MyScrollUp = document.getElementById("scrollup");
                                var MyLiveInformations = document.getElementById("live_informations");
                                var MyReg = new RegExp("px","g");
                                var MyScrollUpMarginTop = MyScrollUp.style.marginTop;
                                var MyScrollUpHeight = MyScrollUp.offsetHeight;
                                var MyLiveInformationsHeight = MyLiveInformations.offsetHeight;
                                MyScrollUpMarginTop = MyScrollUpMarginTop.replace(MyReg,"");
                                if (MyScrollUpMarginTop < -96)
                                {
                                        MyScrollUpMarginTop = MyLiveInformationsHeight;
                                }
                                MyScrollUpMarginTop = MyScrollUpMarginTop-1 + "px";
                                MyScrollUp.style.marginTop = MyScrollUpMarginTop;
                                setTimeout("scrollup()", 100);
                        }
                </script>
	</head>
	<body onload="javascript:scrollup();">
		<div id="live_informations">
			<div id="scrollup">
				15/08 18:50 : XXXX<br/>
				15/08 14:30 : YYYY<br/>
				15/08 12:12 : ZZZZ<br/>
				15/08 10:18 : AAAA<br/>
				15/08 06:45 : BBBB<br/>
				15/08 04:32 : CCCC<br/>
				14/08 23:47 : DDDD<br/>
				14/08 10:19 : EEEE
			</div>
		</div>
	</body>
</html>

Merci,
Mathieu

16/08/2006, 09h15
MaTHieU_
Bonjour,

J'ai essayé avec Internet Explorer 7, le problème persiste...

J'ai donc le problème sur :
- Internet Explorer 6
- Internet Explorer 7
La page fonctionne sur :
- Firefox
Merci pour votre aide,
Mathieu
16/08/2006, 09h21
sedryk

Hello Mathieu,

Rajoute un petit

Code:

position: relative;

dans le css de la div live_informations et ça marchera comme sur des roulettes :)
16/08/2006, 09h30
MaTHieU_

Bonjour,

En effet, ça marche parfaitement !

Merci pour votre aide !

Mathieu