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

**cybersplash** · 26/03/2007, 11h55

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

**magnus2005** · 26/03/2007, 12h05

Bonjour,
Desolé j ai pas de reponse direct à ton probleme mais j'ai quelque conseil et question general :

Sur quelles browser le probleme se produit t il ?
Attention sous IE l utilisation des floats est assez buggé
Utilise l attribut class pour les css plutot que style

**cybersplash** · 26/03/2007, 12h09

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

**magnus2005** · 26/03/2007, 12h14

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

Code :

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

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 :

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

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.

**cybersplash** · 26/03/2007, 12h17

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

**cybersplash** · 26/03/2007, 12h22

je viens de mettre en ligne un exemple de mon probleme voici le lien
http://cybersplash.ovh.org/tmp

**magnus2005** · 26/03/2007, 12h26

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

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

HTML

Vue hybride

Discussions similaires

Partager

Partager