Probleme de menu qui se déplace
Résolu
boum
-
Boum -
Boum -
Bonjour,
je m'amuse à faire un site pour un comité scolaire. Mon code est très simple mais j'ai un problème : mon menu se déplace si j'ajoute une grande quantité de texte, de façon très similaire à celle décrite ici http://www.commentcamarche.net/forum/affich 4078972 probleme de menu#0
En ajoutant du texte, le vert du menu est allongé et l'image et les liens du menu se centrent automatiquement, se retrouvant donc beaucoup trop bas. J'aimerais évidemment qu'ils soient toujours en haut.
Voici mon code en gros, je suis très ouverte aux critiques et à tout refaire de bord en bord s'il le faut. C'est seulement un début et il y aura certainement encore beaucoup de changements.
Merci de bien vouloir m'éclairer sur la question du déplacement du menu
BOUM
<html>
<head>
<title>a</title>
<style href>a {text-decoration: none} </style>
<link rel=stylesheet href=./index.css type=text/css>
<script language=JavaScript>
<!--
content = new Array ();
content [0] = new Array (
false,
new Array('sub_0_1','sub_0_2','sub_0_3')
);
content [1] = new Array (
false,
new Array('sub_1_1','sub_1_2','sub_1_3')
);
content [2] = new Array (
false,
new Array('sub_2_1','sub_2_2','sub_2_3')
);
isOPERA = (navigator.userAgent.indexOf('Opera') >= 0)? true : false;
isIE = (document.all && !isOPERA)? true : false;
isDOM = (document.getElementById && !isIE && !isOPERA)? true : false;
function processTree (id)
{
if (content [id][0])
{
for (i = 0; i < content [id][1].length; i++)
hide (content [id][1][i]);
content [id][0] = false;
}
else
{
for (i = 0; i < content [id][1].length; i++)
show (content [id][1][i], 'table-row');
content [id][0] = true;
}
return false;
}
function show (id, displayValue)
{
if (isDOM)
document.getElementById(id).style.display = (displayValue)? displayValue : "block";
else if (isIE)
document.all[id].style.display = "block";
}
function hide (id)
{
if (isDOM)
document.getElementById(id).style.display = "none";
else if (isIE)
document.all[id].style.display = "none";
}
if (isDOM || isIE)
{
document.writeln('<style type="text/css">');
document.writeln('.SubItemRow \{ display: none; \}');
document.writeln('</style>');
}
// -->
</script>
<STYLE TYPE="text/css">
<!--
BODY {background-image:http://img412.imageshack.us/img412/5413/g9brk09ql1.gif; background-repeat:repeat-y}
-->
</STYLE>
</head>
<body bgcolor="#669933" link="#FFFF00" vlink="#FFFF00" text="#CCFF99">
<marquee>
<FONT FACE="garamond">a</FONT>
</marquee>
<br>
<table width="80%" align="center" cellspacing=0 border=0 bordercolor=green background="http://img138.imageshack.us/img138/5862/essai2ma3.jpg">
<tr>
<td width="100%" colspan=3 align="center" background="http://img481.imageshack.us/img481/8121/g11line02uo7.gif">BIENVENUE
<br><br>Nous travaillons actuellement à la tenue d'un colloque sur le campus.</td>
</tr>
<tr>
<td width="66%" align="center">aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaaaaa
a
aaaaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa</td>
<td width="33%" rowspan=2 align="center" border=1 color="009900" background="http://img481.imageshack.us/img481/8121/g11line02uo7.gif">
<img src="http://img520.imageshack.us/img520/6888/bmp013mpetitsp7.jpg"><br><br>
<a href="x"><font color="#FFFFFF"><span style="font-size:14">Bienvenue</span></font></a>
<br><br>
<table width=150 height=40 border=0 cellpadding=0 cellspacing=1>
<tr>
<td width=1 class=Item>+</td>
<td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (0); return false;">À propos de nous</a></td>
</tr>
<tr id='sub_0_1' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="a.html">-Le comité</a></td>
</tr>
<tr id='sub_0_2' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="b.html">-Les activités</a></td>
</tr>
<tr id='sub_0_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="c.html">-Articles</a></td>
</tr>
<tr>
<td width=1 class=Item>+</td>
<td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (1); return false;">Sites affiliés</a></td>
</tr>
<tr id='sub_1_1' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="https://www.umontreal.ca/">-Université de Montréal</a></td>
</tr>
<tr id='sub_1_2' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="https://www.aedmontreal.com/">-Association des Étudiants en Droit</a></td>
</tr>
<tr id='sub_1_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="https://innocencecanada.com/">-AIDWYC</a></td>
</tr>
<tr>
<td width=1 class=Item>+</td>
<td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (2); return false;">Autres</a></td>
</tr>
<tr id='sub_2_1' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="d.html">d</a></td>
</tr>
<tr id='sub_2_2' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="e.html">e</a></td>
</tr>
<tr id='sub_2_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="f.html">f</a></td>
</tr>
<tr id='sub_1_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="index.html">Retour à la page d'accueil</a></td>
</tr>
</table>
<br><br>
<br><br>
<tr>
</tr>
</tr>
</table>
<table width="80%" align="center" cellspacing=0 border=0 bordercolor=green background="http://img481.imageshack.us/img481/8121/g11line02uo7.gif">
</body>
</html>
je m'amuse à faire un site pour un comité scolaire. Mon code est très simple mais j'ai un problème : mon menu se déplace si j'ajoute une grande quantité de texte, de façon très similaire à celle décrite ici http://www.commentcamarche.net/forum/affich 4078972 probleme de menu#0
En ajoutant du texte, le vert du menu est allongé et l'image et les liens du menu se centrent automatiquement, se retrouvant donc beaucoup trop bas. J'aimerais évidemment qu'ils soient toujours en haut.
Voici mon code en gros, je suis très ouverte aux critiques et à tout refaire de bord en bord s'il le faut. C'est seulement un début et il y aura certainement encore beaucoup de changements.
Merci de bien vouloir m'éclairer sur la question du déplacement du menu
BOUM
<html>
<head>
<title>a</title>
<style href>a {text-decoration: none} </style>
<link rel=stylesheet href=./index.css type=text/css>
<script language=JavaScript>
<!--
content = new Array ();
content [0] = new Array (
false,
new Array('sub_0_1','sub_0_2','sub_0_3')
);
content [1] = new Array (
false,
new Array('sub_1_1','sub_1_2','sub_1_3')
);
content [2] = new Array (
false,
new Array('sub_2_1','sub_2_2','sub_2_3')
);
isOPERA = (navigator.userAgent.indexOf('Opera') >= 0)? true : false;
isIE = (document.all && !isOPERA)? true : false;
isDOM = (document.getElementById && !isIE && !isOPERA)? true : false;
function processTree (id)
{
if (content [id][0])
{
for (i = 0; i < content [id][1].length; i++)
hide (content [id][1][i]);
content [id][0] = false;
}
else
{
for (i = 0; i < content [id][1].length; i++)
show (content [id][1][i], 'table-row');
content [id][0] = true;
}
return false;
}
function show (id, displayValue)
{
if (isDOM)
document.getElementById(id).style.display = (displayValue)? displayValue : "block";
else if (isIE)
document.all[id].style.display = "block";
}
function hide (id)
{
if (isDOM)
document.getElementById(id).style.display = "none";
else if (isIE)
document.all[id].style.display = "none";
}
if (isDOM || isIE)
{
document.writeln('<style type="text/css">');
document.writeln('.SubItemRow \{ display: none; \}');
document.writeln('</style>');
}
// -->
</script>
<STYLE TYPE="text/css">
<!--
BODY {background-image:http://img412.imageshack.us/img412/5413/g9brk09ql1.gif; background-repeat:repeat-y}
-->
</STYLE>
</head>
<body bgcolor="#669933" link="#FFFF00" vlink="#FFFF00" text="#CCFF99">
<marquee>
<FONT FACE="garamond">a</FONT>
</marquee>
<br>
<table width="80%" align="center" cellspacing=0 border=0 bordercolor=green background="http://img138.imageshack.us/img138/5862/essai2ma3.jpg">
<tr>
<td width="100%" colspan=3 align="center" background="http://img481.imageshack.us/img481/8121/g11line02uo7.gif">BIENVENUE
<br><br>Nous travaillons actuellement à la tenue d'un colloque sur le campus.</td>
</tr>
<tr>
<td width="66%" align="center">aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaaaaa
a
aaaaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa</td>
<td width="33%" rowspan=2 align="center" border=1 color="009900" background="http://img481.imageshack.us/img481/8121/g11line02uo7.gif">
<img src="http://img520.imageshack.us/img520/6888/bmp013mpetitsp7.jpg"><br><br>
<a href="x"><font color="#FFFFFF"><span style="font-size:14">Bienvenue</span></font></a>
<br><br>
<table width=150 height=40 border=0 cellpadding=0 cellspacing=1>
<tr>
<td width=1 class=Item>+</td>
<td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (0); return false;">À propos de nous</a></td>
</tr>
<tr id='sub_0_1' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="a.html">-Le comité</a></td>
</tr>
<tr id='sub_0_2' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="b.html">-Les activités</a></td>
</tr>
<tr id='sub_0_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="c.html">-Articles</a></td>
</tr>
<tr>
<td width=1 class=Item>+</td>
<td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (1); return false;">Sites affiliés</a></td>
</tr>
<tr id='sub_1_1' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="https://www.umontreal.ca/">-Université de Montréal</a></td>
</tr>
<tr id='sub_1_2' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="https://www.aedmontreal.com/">-Association des Étudiants en Droit</a></td>
</tr>
<tr id='sub_1_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="https://innocencecanada.com/">-AIDWYC</a></td>
</tr>
<tr>
<td width=1 class=Item>+</td>
<td width=149 height=20 class=Item><a href=./ class=Item onClick="processTree (2); return false;">Autres</a></td>
</tr>
<tr id='sub_2_1' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="d.html">d</a></td>
</tr>
<tr id='sub_2_2' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="e.html">e</a></td>
</tr>
<tr id='sub_2_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="f.html">f</a></td>
</tr>
<tr id='sub_1_3' class=SubItemRow>
<td width=10> </td>
<td width=149 height=20 class=SubItem><a href="index.html">Retour à la page d'accueil</a></td>
</tr>
</table>
<br><br>
<br><br>
<tr>
</tr>
</tr>
</table>
<table width="80%" align="center" cellspacing=0 border=0 bordercolor=green background="http://img481.imageshack.us/img481/8121/g11line02uo7.gif">
</body>
</html>
A voir également:
- Probleme de menu qui se déplace
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
4 réponses
Bonjour,
Commençons par quelques modifications.
Transforme le haut de ta page
Ensuite, reviens nous dire quand c"est fait.
Le post que tu cites indique :
“Avec l'adresse de la page c'est plus facile qu'avec un code incomplet.
Plus facile aussi avec code”
Pourquoi n'en tiens-tu pas compte ?
Comment accède-t-on à ta feuille de styles “./index.css” ?
Commençons par quelques modifications.
Transforme le haut de ta page
<html>
<head>
<title>a</title>
<style href>a {text-decoration: none} </style>
<link rel=stylesheet href=./index.css type=text/css>
<script language=JavaScript> comme ça<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>a</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">a {text-decoration: none} </style>
<link rel="stylesheet" href="./index.css" type="text/css">
<script type="text/javascript">puis passe-la à la validation pour pouvoir y faire les corrections qui te seront proposées.
Ensuite, reviens nous dire quand c"est fait.
Le post que tu cites indique :
“Avec l'adresse de la page c'est plus facile qu'avec un code incomplet.
Plus facile aussi avec code”
Pourquoi n'en tiens-tu pas compte ?
Comment accède-t-on à ta feuille de styles “./index.css” ?
Le code que tu donnes fait référence à une feuille de styles “<link rel=stylesheet href=./index.css type=text/css>”. Elle peut intervenir dans la mise en page (c'est son rôle).
Elle n'apparaît pas ici.
Au passage, il manque des " : “<link rel="stylesheet" href="./index.css" type="text/css">”.
Mais c'est inutile. Les corrections que tu feras ne changeront rien à ton problème. Même si elles faciliteront le travail des navigateurs.
Une idée passe. J'ai ajouté du texte et je viens de comprendre où se déplace ton menu…
Ajoute
++
Pour une autre fois…
http://cjoint.com/data/lvaRiQPTLN_code.png
http://cjoint.com/data/lvbY3F3BkO.htm
--
Elle n'apparaît pas ici.
Au passage, il manque des " : “<link rel="stylesheet" href="./index.css" type="text/css">”.
Mais c'est inutile. Les corrections que tu feras ne changeront rien à ton problème. Même si elles faciliteront le travail des navigateurs.
Une idée passe. J'ai ajouté du texte et je viens de comprendre où se déplace ton menu…
Ajoute
<td width="33%" rowspan=2 align="center" border="1" color="009900" background="http://img481.imageshack.us/img481/8121/g11line02uo7.gif" valign="top">C'est un pis-aller.
++
Pour une autre fois…
http://cjoint.com/data/lvaRiQPTLN_code.png
http://cjoint.com/data/lvbY3F3BkO.htm
--
J'ai vu plusieurs erreurs/négligences dans mon code, je fais les modifications et je vous reviens la dessus dès que c'est fini.
"Le post que tu cites indique :
“Avec l'adresse de la page c'est plus facile qu'avec un code incomplet.
Plus facile aussi avec code”
Pourquoi n'en tiens-tu pas compte ?
Comment accède-t-on à ta feuille de styles “./index.css” ? "
Euh il n'y a pas d'adresse de la page pour l'instant, c'est simplement un document sur mon ordinateur... Je ne connais pas non plus "code", je présume avec ce que je vois en cliquant dessus que c'est un logiciel? Si c'est simple, où puis-je me le procurer?
Le code que j'avais mis n'est pas incomplet donc je présume que au pire je le copie en entier une fois corrigé et ce sera correct?
S'il y a d'autres alternatives je suis ouverte!
"Le post que tu cites indique :
“Avec l'adresse de la page c'est plus facile qu'avec un code incomplet.
Plus facile aussi avec code”
Pourquoi n'en tiens-tu pas compte ?
Comment accède-t-on à ta feuille de styles “./index.css” ? "
Euh il n'y a pas d'adresse de la page pour l'instant, c'est simplement un document sur mon ordinateur... Je ne connais pas non plus "code", je présume avec ce que je vois en cliquant dessus que c'est un logiciel? Si c'est simple, où puis-je me le procurer?
Le code que j'avais mis n'est pas incomplet donc je présume que au pire je le copie en entier une fois corrigé et ce sera correct?
S'il y a d'autres alternatives je suis ouverte!