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 :


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 : 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
 
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 : 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
 
<!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