[HTML-JS] problème de décalage lors d'un redimensionnement

Version imprimable

Bonjour

Je suis en train de gérer un cadre pour un site web et son redimensionnnement.
Voici un petit schema des div que j'utilise pour faire mon cadre :
http://cybersplash.ovh.org/toto.png

Petite légende sur le schéma :)

en gris la div globale
en rose le cadre haut et bas
en vert le cadre gauche et droit
en bleu la div du texte
en violet les logos du cadre
en vert marron le trait reliant les logos

Mon but est de faire un cadre qui puisse etre redimensionné.
A chaque modification de la taille de la div globale je recalcul la taille des traits reliant les logos.

voici maintenant le code JS permettant de faire cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
tmp(document.getElementById("menu_gauche_text"),document.getElementById("menu_gauche"), document.getElementById("menu_gauche_haut"), document.getElementById("menu_gauche_bas"), document.getElementById("menu_gauche_gauche"), document.getElementById("menu_gauche_droit"), document.getElementById("menu_gauche_gauche_centre_haut"), document.getElementById("menu_gauche_gauche_centre_bas"), document.getElementById("menu_gauche_droit_centre_haut"), document.getElementById("menu_gauche_droit_centre_bas"), document.getElementById("menu_gauche_haut_gauche"), document.getElementById("menu_gauche_haut_droit"), document.getElementById("menu_gauche_bas_gauche"), document.getElementById("menu_gauche_bas_droit"));
 
 
function tmp(divTxt, divGlobale, cadreHaut, cadreBas, cadreGauche, cadreDroit, spaceGaucheHaut, spaceGaucheBas, spaceDroitHaut, spaceDroitBas, spaceHautGauche, spaceHautDroit, spaceBasGauche, spaceBasDroit) {
 
                // modification de la largeur de la div du texte
                divTxt.style.width=(divGlobale.offsetWidth-64)+"px";
 
                // modification des largeurs des div contenant les cadres haut et bas
                cadreHaut.style.width=cadreBas.style.width=(divGlobale.offsetWidth)+"px";
 
                // modification des largeurs des traits reliant les logos
                spaceHautGauche.style.width=spaceHautDroit.style.width=spaceBasGauche.style.width=spaceBasDroit.style.width=((divGlobale.offsetWidth-164)/2)+"px";
                 "+(divTxt.style.width+cadreGauche.style.width+cadreDroit.style.width));
 
                divTxt.style.height=cadreGauche.style.height=cadreDroit.style.height=(divGlobale.offsetHeight)-64+"px";
		spaceGaucheHaut.style.height=spaceGaucheBas.style.height=spaceDroitHaut.style.height=spaceDroitBas.style.height=((divGlobale.offsetHeight-(3*220)-24)/2)+"px";
}

Maintenant le code HTML

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
 
<!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">
 
 
<html>
	<head>
		<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">
		<link rel="stylesheet" href="style.css">
                <script type="text/javascript" src="includes/bibliotheque/functions.js"></script> 
	</head>
	<body style="padding : 0; margin : 0;">
 
		<div id="menu_gauche" style='float:left; width:15%; height: auto; margin : 0;'>
			<div id="menu_gauche_haut" onMouseOver='javascript:test();' style='float : left; width : 100%; background-image : url("includes/data/background/cadre/menu_gauche/haut.png"); background-position : center; height : 17px; background-repeat : no-repeat;'>
				<div id='menu_gauche_haut_gauche' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_haut.png"); margin-left : 17px; height : 17px;'></div>
				<div id='menu_gauche_haut_droit' style='float : right; background-image : url("includes/data/background/cadre/menu_gauche/trait_haut.png"); margin-right : 17px; height : 17px;'></div>
			</div>
			<div id="menu_gauche_gauche" style='margin : 0; float : left; width : 17px; background-image : url("includes/data/background/cadre/menu_gauche/centre_gauche.png"); background-position : center; background-repeat : no-repeat;'>
				<div id="menu_gauche_gauche_haut" style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_gauche.png'); background-repeat : no-repeat;"></div>
				<div id='menu_gauche_gauche_centre_haut' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_gauche.png"); width : 17px; margin-bottom : 110px;'></div>
				<div id='menu_gauche_gauche_centre_bas' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_gauche.png"); width : 17px; margin-top : 110px;'></div>
				<div id="menu_gauche_gauche_bas" style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_gauche.png');"></div>
			</div>
 
			<div id="menu_gauche_text" style='margin : 0; float:left; padding : 15px; background-image : url("includes/data/background/cadre/menu_gauche/couleur.png")'>
				<!-- Menu Gauche -->
                    toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />
			</div>
			<div id="menu_gauche_droit" style='margin : 0; float : left; width : 17px; background-image : url("includes/data/background/cadre/menu_gauche/centre_droit.png"); background-position : center; background-repeat : no-repeat;'>
				<div id="menu_gauche_droit_haut" style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_droit.png'); background-repeat : no-repeat;"></div>
				<div id='menu_gauche_droit_centre_haut' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_droit.png"); width : 17px; margin-bottom : 110px;'></div>
				<div id='menu_gauche_droit_centre_bas' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_droit.png"); width : 17px; margin-top : 110px;'></div>
				<div id="menu_gauche_droit_bas" style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_droit.png');"></div>
			</div>
			<div id="menu_gauche_bas" style='margin : 0; float : left; width : 100%;  background-image : url("includes/data/background/cadre/menu_gauche/bas.png"); background-position : center; height : 17px; background-repeat : no-repeat;'>
				<div id='menu_gauche_bas_gauche' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_bas.png"); margin-left : 17px; height : 17px;'></div>
				<div id='menu_gauche_bas_droit' style='float : right; background-image : url("includes/data/background/cadre/menu_gauche/trait_bas.png"); margin-right : 17px; height : 17px;'></div>
			</div>
		</div>
	</body>
</html>

Le problème est que lors de certains redimensionnements le bord du cadre droit passe sous la div du texte alors que l'addition des largeurs de tous les éléments est bien égale à la largeur de la div globale

Je ne comprend plus ce qu'il se passe.

Merci d'aider un jeune développeur au bord de l'extinction de son pc :)

26/03/2007, 12h05
magnus2005
Bonjour,
Desolé j ai pas de reponse direct à ton probleme mais j'ai quelque conseil et question general :
1. Sur quelles browser le probleme se produit t il ?
2. Attention sous IE l utilisation des floats est assez buggé
3. Utilise l attribut class pour les css plutot que style
26/03/2007, 12h09
cybersplash

Les tests sont fait uniquement sous firefox (j'ai pas IE)
sinon pour l'utilisation de class plutot que style je comprend pas bien

Voici une façon de faire parmi tant d'autre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
.myclassa{
background-image : url("includes/data/background/cadre/menu_gauche/trait_haut.png");
margin-left : 17px; 
height : 17px;
}
#menu_gauche_haut_gauche{
float:left;
}
#menu_gauche_haut_droit{
float:left;
}

Code:

1
2
<div id="menu_gauche_haut_gauche" class="myclassa"></div>
<div id="menu_gauche_haut_droit" class="myclassa"></div>

Voila ça permet de reduire le code donc de reduire les problemes.

26/03/2007, 12h17
cybersplash

ah oui biensur mais j'ai besoin d'y acceder depuis mon code javascript et j'ai besoin que le css soit inline et non dans un fichier externe
26/03/2007, 12h22
cybersplash

je viens de mettre en ligne un exemple de mon probleme voici le lien
http://cybersplash.ovh.org/tmp
26/03/2007, 12h26
magnus2005

le javascript peut y acceder sans probleme meme si la definition de la css est externe comme tu la déja fais.
et regarde la console d erreur de Firefox tu as 2 erreurs sur ta page
26/03/2007, 12h32
cybersplash

je viens de tester a l'instant et javascript y accède mais lors des modification c'est le css qui prime sur la modification javascript :'(

Dans le doute je me suis fait une page de test
(test sous FF2 et IE6)
contenu de test.css
J ai ajoute des bordures noires pour voir si mon resize fonctionnait bien visuellement (sinon il y a le DOM inspector pour FF)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.myclassa{
background-image : url("includes/data/background/cadre/menu_gauche/trait_haut.png");
margin-left : 17px; 
height : 17px;
border : 2px ;
border-color: black;
border-style: solid;
}
#menu_gauche_haut_gauche{
float:left;
}
#menu_gauche_haut_droit{
float:right;
}

Code HTML extrait de ton code avec de legere modif dont une seule balise HTML et un morceau de code javascript à la fin qui fait une resize apres l application de la 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<link href="test.css" rel="stylesheet" type="text/css" media="screen" />
 
	</head>
	<body style="padding : 0; margin : 0;">
 
		<div id="menu_gauche" style='float:left; width:15%; height: auto; margin : 0;'>
			<div id="menu_gauche_haut" style='float : left; width : 100%; background-image : url("includes/data/background/cadre/menu_gauche/haut.png"); background-position : center; height : 17px; background-repeat : no-repeat;'>
				<div id='menu_gauche_haut_gauche' class="myclassa"></div>
				<div id='menu_gauche_haut_droit' class="myclassa" ></div>
			</div>
			<div id="menu_gauche_gauche" style='margin : 0; float : left; width : 17px; background-image : url("includes/data/background/cadre/menu_gauche/centre_gauche.png"); background-position : center; background-repeat : no-repeat;'>
				<div id="menu_gauche_gauche_haut"  style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_gauche.png'); background-repeat : no-repeat;"></div>
				<div id='menu_gauche_gauche_centre_haut' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_gauche.png"); width : 17px; margin-bottom : 110px;'></div>
				<div id='menu_gauche_gauche_centre_bas' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_gauche.png"); width : 17px; margin-top : 110px;'></div>
				<div id="menu_gauche_gauche_bas" style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_gauche.png');"></div>
			</div>
 
			<div id="menu_gauche_text" style='margin : 0; float:left; padding : 15px; background-image : url("includes/data/background/cadre/menu_gauche/couleur.png")'>
				<!-- Menu Gauche -->
                    toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />toto<br />
			</div>
			<div id="menu_gauche_droit" style='margin : 0; float : left; width : 17px; background-image : url("includes/data/background/cadre/menu_gauche/centre_droit.png"); background-position : center; background-repeat : no-repeat;'>
				<div id="menu_gauche_droit_haut" style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_droit.png'); background-repeat : no-repeat;"></div>
				<div id='menu_gauche_droit_centre_haut' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_droit.png"); width : 17px; margin-bottom : 110px;'></div>
				<div id='menu_gauche_droit_centre_bas' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_droit.png"); width : 17px; margin-top : 110px;'></div>
				<div id="menu_gauche_droit_bas" style="float : left; width : 17px; height : 220px; background-image : url('includes/data/background/cadre/menu_gauche/centre_droit.png');"></div>
			</div>
			<div id="menu_gauche_bas" style='margin : 0; float : left; width : 100%;  background-image : url("includes/data/background/cadre/menu_gauche/bas.png"); background-position : center; height : 17px; background-repeat : no-repeat;'>
				<div id='menu_gauche_bas_gauche' style='float : left; background-image : url("includes/data/background/cadre/menu_gauche/trait_bas.png"); margin-left : 17px; height : 17px;'></div>
				<div id='menu_gauche_bas_droit' style='float : right; background-image : url("includes/data/background/cadre/menu_gauche/trait_bas.png"); margin-right : 17px; height : 17px;'></div>
			</div>
		</div>
		<script type="text/javascript">
                function testResize(){
        var el =        document.getElementById("menu_gauche_haut_gauche");
        alert("testResize");
        el.style.width= "500px";
        
        };
        setTimeout("testResize()",2000);
                </script>
	</body>
</html>

26/03/2007, 15h01
cybersplash

je viens de tester ce que tu as poster merci :)

sinon j'ai continué a bosser et je ne comprend car lors d'un rafraichissement tout marche bien mais lors d'un redimensionnement la taille de ma div globale diminue
j'ai quelquechose de ce style

point1
madivText.style.width=madivGlobale.offsetWidth
point2

au niveau du point1 la largeur de ma div globale est supérieur de 3px a la mm valeur au point2

comment cela est il possible ?

je met cette nouvelle version en ligne
26/03/2007, 15h25
magnus2005

Je suis pas sur à 100% mais regarde les reponses de Candygirl sur ce post

http://www.developpez.net/forums/sho...d.php?t=299609
26/03/2007, 16h17
cybersplash

le soucis c'est que je suis tout en float donc je ne devrait pas avoir de problème
26/03/2007, 17h32
magnus2005

Refait le tous avec des classes css
et essaie de mettre des border visible pour qu on puisse voir la probleme de taille
C est toujours la même URL ?
http://cybersplash.ovh.org/tmp
26/03/2007, 18h04
cybersplash

je viens de remettre l'exemple en ligne avec un css bien construit mais toujours le mm soucis :(

oui c'est toujours la mm adresse encore merci pour ton aide :)