Page qui bouge toute seule (ou presque...)

Bonjour,

Je ne suis pas un as des css, mais j'essaie de m'y mettre, doucement .

Je suis en train de développer un site pour une asso (http://nicolasrio.free.fr). S'il vous plaît, ne m'incendiez pas à cause de l'utilisation de tableaux pour la mise en page, je sais que c'est très mal .

Mon souci est le suivant : sous Firefox et IE7, ca va à peu près (sauf que IE7 me bouffe un div en bas de la page, mais je verrai ca plus tard).
Par contre, sous IE6, lorsqu'on clique sur un élément du menu du haut, je ne sais pas pourquoi, mais mon div élastique de gauche se réduit de quelques pixels.En cliquant et recliquant sur les séparateurs de menu, une fois que le div élastique de gauche a disparu, tout ca part vers le haut.

En gros, le clic réduit tous mes div dont les dimensions sont exprimées en %
Modifié par nicorio (30 Apr 2007 - 18:10)

Salut nicorio;

Je suis loin d'être un as aussi et je vais peut-être raconter des bétises, mais j'avais eu des problémes d'affichage / décalage similaires sous IE6 qui étaient dû à un usage des padding dans mes div un peu abusifs. En virant la plupart des padding et en jouant avec les tailles tout était rentré dans l'ordre.

Si tu nous glissais ton code CSS, on pourrait y voir plus clair.

C'est sous quel navigateur ton problème ?

Parce que sous IE7 tout va bien...
Peut-être aurais-tu réparé le problème, si c'est le cas, fais-nous part de la solution .

@blint :
C'est justement ça, le souci, c'est bon sous Firefox et IE7, mais pas sous IE6

@Vince :
J'ai effectivement utilisé des paddings, mais ils me servent ! J'aimerais donc pouvoir les conserver.

Sinon, concernant le code, le mécanisme est le suivant (je ne détaille pas l'ensemble des blocs de la page. Si besoin, demandez-moi le code complet, mais ca fait un peu long .

J'ai donc un menu en haut de ma page. Il s'agit d'un tableau dans un div :

<div class="entete">
	<table style="width:100%;height:100%">
		<tr>
			<td style="width:100%;height:100%">
				<table class="liseretMilieu" style="background-color:#665342">
					<tr>
						<td style="height:57%;width:100%;"></td>
					</tr>
					<tr>
						<td style="height:30%;width:100%">
							<table class="liseret">
								<tr>
									<td class="menuHautOut" onclick="majMenuHaut(this,'td','menuHautHover','menuHautOut')">
										<a class="lienRub"href="index.php?rubrique=1">Présentation</a>
									</td>
									<td class="menuHautOut" onclick="majMenuHaut(this,'td','menuHautHover','menuHautOut')">
										<a class="lienRub"href="index.php?rubrique=2">Formation</a>
									</td>
									<td class="menuHautOut" onclick="majMenuHaut(this,'td','menuHautHover','menuHautOut')">
										<a class="lienRub"href="index.php?rubrique=3">Promotions</a>
									</td>
									<td class="menuHautOut" onclick="majMenuHaut(this,'td','menuHautHover','menuHautOut')">
										<a class="lienRub"href="index.php?rubrique=4">L'association</a>
									</td>
									<td class="menuHautOut" onclick="majMenuHaut(this,'td','menuHautHover','menuHautOut')">
										<a class="lienRub"href="index.php?rubrique=5">Nos parrains</a>
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td style="height:12%;width:100%;"></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</div>

Alors je vous entends d'ici à propos des tableaux... Mais je vous promets que j'ai essayé les div, mais au bout d'un moment, la flemme m'a rattrappé et j'ai fait des tableaux.

Voila donc le truc : j'appelle une fonction js sur le clic d'un item du menu, et c'est là que se produit mon problème.
Voilà le code js :

function majMenuHaut(itemMenu,classe,styleHover,styleOut)
{
	// initialise la taille des items du menu du haut
	var oChilds = document.getElementsByTagName(classe),
	i = 0,
	iCount = oChilds.length;
	nb = 0;
	for(i; i < iCount; i++){
		if(oChilds[ i].className === styleHover){
			oChilds[ i].className=styleOut;
			}
		}
	
	// on augmente la taille de l'élément cliqué/
	itemMenu.className=styleHover;
}

et enfin, les styles :

.menuHautHover {
	height: 80%;
	border-right: 1px solid white;
}

.menuHautOut {
	height: 80%;
	border-right: 1px solid white;
}

.liseret {
	height: 100%;
	width: 100%;
	left: 0;
	border-spacing: 0px;
	border-collapse: collapse;
}

.liseretMilieu {
	background-color: #5f584e;
	color: #ffffff;
	height: 98%;
	width: 100%;
}

.entete {
	height: 10%;
	width: 100%;
	text-align: center;
	vertical-align: bottom;
	background-color: #665342;
	color: #ffffff;
	margin-left: auto;
	margin-right: auto;
}


.lienRub {
	font-family: "Times New Roman", Times, serif;
	font-size: large;
	color: #ffffff;
	text-decoration: none;
}

.lienRubSel {
	font-family: "Times New Roman", Times, serif;
	font-size: x-large;
	color: #ffffff;
	text-decoration: none;
}

Modifié par nicorio (30 Apr 2007 - 21:21)

Dans le JS:

a écrit :

if(oChilds.className === styleHover){
oChilds[r].className=styleOut;
}

je dirais plutôt :

if(oChilds[r].className === styleHover){
	oChilds[r].className=styleOut;
	}

C'est quand même étonnant que ce genre d'erreur provoque des problèmes d'affichages et ne plante pas le script...
C'est peut-être moi qui me suis planté en corrigeant mal ^^" (je débute...)

Et d'ailleurs il est sûrement suffisant de laisser un "==" plutôt que "===". D'ailleurs j'ai encore oublié l'intéret du triple égal

Note pour les édits: les [ /i ] sont assez pénibles -_-, il faudrait retirer cette fonction d'ajoutage automatique de [ /i]

EDIT2: comptant mettre en évidance le [ i] rajouté dans le code, j'ai laissé tomber parce que le bb code est incompatible au code lol
Modifié par Felipe (01 May 2007 - 12:27)

Effectivement. L'éditeur m'a rajouté un [/i] a la fin. Je l'ai supprimé sans tenir compte du fait qu'il allait me supprimer aussi le [i] du javascript

J'édite le code pour remettre le compteur avec l'espace. Merci de l'astuce.
Modifié par nicorio (30 Apr 2007 - 21:22)

Je laisse tomber ma réponse d'avant, elle est assez éditée
Désolé de t'avoir proposé une correction qui n'en était meme pas une ^^".

J'ai réalisé qu'en postant pour les [ i]...

Pour être plus dans le sujet je n'ai vraiment rien à proposer
Le code JS semble clean, il n'y a pas de :hover dans le CSS...
Il faut voir quelle classe est appelée par le code JS, pour voir si les attributs donnés ne titillent pas IE (comme les width).
Je n'ai pas vu (en explorant) ce cas de blocs qui bougent mais en général quand ça bouge, c'est soit dans les positions (pas le cas ici), soit dans les text-decoration (italic) ou dans les changement de taille de police (ou de police elle-même).

A voir

Bonjour,

le BBCode i sert à l'italique et comme à l'origine ce Forum développé par dew a été conçu pour un FAI et une utilisation tout ce qu'il y a de plus grand public (pas pour un forum de programmation et autres codes), bah l'indice i de tableaux fait tout foirer
Comme dew n'a pas envie de développer de variantes de son forum en fonction du site (parce qu'après il faut maintenir autant de versions différentes pendant des années ), il est préférable d'utiliser un indice ii ou a ou r, ce que j'ai fait en éditant un message ci-dessus. Pour plus d'explications sur les remplaçants à indice-i, voir un des sujets en Annonce du Salon JS. La fonction remplacer [ i] --> [ truc] dans un éditeur de texte est bien utile

Felipe