Sujet Précédent Sujet Suivant

Probleme de menu qui se déplace

Résolu/Fermé
boum - 19 nov. 2007 à 07:43
 Boum - 21 nov. 2007 à 19:17
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>
A voir également:

4 réponses

Réponse 1 / 4
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
19 nov. 2007 à 13:42
Bonjour,

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” ?
1
Réponse 2 / 4
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
21 nov. 2007 à 00:58
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
<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

--
1
Réponse 3 / 4
boum
21 nov. 2007 à 00:00
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!
0
Réponse 4 / 4
Boum
21 nov. 2007 à 19:17
HAHAHAHAH C'est exactement ce dont j'avais besoin pour mon menu, c'est vraiment simple j'en suis gênée...

Merci beaucoup, d'ailleurs ton intervention va me faire corriger beaucoup d'autres choses!
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses