Sujet Précédent Sujet Suivant

Comment fair surbriller les mots dans mon men

Fermé
Ppouille - 3 août 2009 à 08:27
 Ppouille - 3 août 2009 à 14:21
Bonjour, J'ai créé un site avec Frontpage. J'ai deux soucis :
1) j'ai un menu qui comporte plusieurs titres. j'aimerais que lorsque mon curseur passe sur un des titres, celui-ci change de couleur, comment faire ?
2) j'ai un menu vertical avec 5 mot. lorsque le curseur passe sur un des menus, toute la cellule est en surbrillance et m'amène à un sous-menu (menu contextuel). Cependant, lorsque mon curseur passe dans l'espace vide, le sous-menu n'apparait pas, c'est uniquement lorsque je passe sur le mot !
Quelqu'un ou quelqu'une pourrait-il m'aider, d'avance merci.

2 réponses

Réponse 1 / 2
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
3 août 2009 à 09:08
Bonjour,

Poste le code source de ta page pour qu'on puisse t'aider plus facilement.

Cependant, même sans voir, je sens que tout se règle par CSS.

1) Pour le menu, le mieux est de mettre un identifiant au conteneur de tes liens. comme c'est un menu, je suppose qu'il est contenu dans une liste: 
<ul id="menu">
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
</ul>

Ainsi, dans le CSS du site, pour changer la couleur du lien en surbrillance il suffit de faire 
#menu a,
#menu a:visited {
  /* style pour le lien */
  color:red;
  background-color:black; }
#menu a:active,
#menu a:hover {
  /* style pour le lien en survol et le lien cliqué */ 
  color:yellow;
  background-color:red;}


2) Pour le menu vertical, c'est aussi un problème de CSS. le menu contextuel doit s'afficher au survol du lien je suppose. hors, la balise <a> est une balise de type inline. pour pouvoir être sur le lien tout en étant en dehors du texte, il suffit de mettre ce code là: 
#menuVertical a {
  display:block; }

Comme cela, la balise <a> sera considérée comme une balise block.

Si tu ne connais pas la notion de balise inline ou balise block, je t'invite à lire la partie du tutoriel XHTML/CSS du site du zéro qui en fait référence, c'est très bien expliqué.
0
Réponse 2 / 2
Ppouille
3 août 2009 à 14:21
Merci beaucoup pour ta réponse, mais je ne suis pas assez compétent pour pouvoir insérer les codes que tu me donne dans les codes de mon site dont voici l'adresse afin que tu puisse te rendre compte de ce que je souhaite : http://www.rebertrix.be/Hometest.htm

Voici le code de ma page :

<html>

<head>
<meta http-equiv="Content-Language" content="fr-be">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script language="JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_1017150818_0) return;
window.mm_menu_1017150818_0 = new Menu("root",114,16,"Verdana",10,"#FFFFFF","#FFFFFF","#CC0000","#3399FF","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1017150818_0.addMenuItem("Nouvel élément");
mm_menu_1017150818_0.addMenuItem("Nouvel élément");
mm_menu_1017150818_0.addMenuItem("Nouvel élément");
mm_menu_1017150818_0.addMenuItem("Nouvel élément");
mm_menu_1017150818_0.fontWeight="bold";
mm_menu_1017150818_0.hideOnMouseOut=true;
mm_menu_1017150818_0.bgColor='#D4D0C8';
mm_menu_1017150818_0.menuBorder=1;
mm_menu_1017150818_0.menuLiteBgColor='#FFFFFF';
mm_menu_1017150818_0.menuBorderBgColor='#FFFFFF';

mm_menu_1017150818_0.writeMenus();
} // mmLoadMenus()
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>
</html>
<html>
<body text="#FFFFFF" bgcolor="#0000FF" link="#FFFFFF" vlink="#FFFFFF" alink="#0000FF">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="902" height="890">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" style="border-style: solid; border-width: 1px" bordercolor="#FFFFFF" colspan="4">
<!-- MSCellType="ContentHead" -->
<p align="center">
<img border="0" src="Images/bande2008.jpg" width="898" height="180"></td>
<td height="182"></td>
</tr>
<tr>
<td bgcolor="#008000" style="border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-bottom-style: solid; border-bottom-width: 1px" colspan="4">
<!-- MSCellType="ContentHead" -->
<span style="font-weight: 700; background-color: #008000">
<font face="Verdana" size="2">      Menu 1    
Menu 2     Menu 3     Menu 4    
Menu 5</font></span></td>
<td height="20"></td>
</tr>
<tr>
<td valign="top" style="border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px" bgcolor="#CC0000"><!-- MSCellType="NavBody" -->
<div align="center">
<table width="125%" height="87" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" style="border-collapse: collapse; border-width: 0" id="table8">
<tr onMouseOver="this.style.backgroundColor='#3399FF';this.style.cursor='pointer'" onMouseOut="this.style.backgroundColor='#CC0000'" onClick="location='FicheGregoire.php'">
<td width="68%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<font face="Verdana"><font color="#FFFFFF" size="2"><b>      </b></font> <font color="#FFFFFF"><b><font color="#FFFFFF" size="2"><u>
<a href="Home.php" name="link8" id="link2" onMouseOver="MM_showMenu(window.mm_menu_1017150818_0,156,-1,null,'link5')" onMouseOut="MM_startTimeout();"> <span style="text-decoration: none"><font color="#FFFFFF">
Menu 1 </font></span></a></u></font></b></font></font></td>
<td width="32%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<b><font size="2" face="Verdana">>></font></b></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#3399FF';this.style.cursor='pointer'" onMouseOut="this.style.backgroundColor='#CC0000'" onClick="location='FicheBensaida.php'">
<td width="68%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<font face="Verdana">
<font color="#FFFFFF" size="2"><b>      </b></font>
<font color="#FFFFFF"><b><font color="#FFFFFF" size="2"><u>
<a href="Home.php" name="link9" id="link3" onMouseOver="MM_showMenu(window.mm_menu_1017150818_0,156,-1,null,'link4')" onMouseOut="MM_startTimeout();">
<span style="text-decoration: none"><font color="#FFFFFF">Menu 2</font></span></a></u></font></b></font></font></td>
<td width="32%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<b><font size="2" face="Verdana">>></font></b></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#3399FF';this.style.cursor='pointer'" onMouseOut="this.style.backgroundColor='#CC0000'" onClick="location='FicheCopette.php'">
<td width="68%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<font face="Verdana">
<font color="#FFFFFF" size="2"><b>      </b></font>
<font color="#FFFFFF"><b><font color="#FFFFFF" size="2"><u>
<a href="Home.php" name="link10" id="link4" onMouseOver="MM_showMenu(window.mm_menu_1017150818_0,156,-1,null,'link2')" onMouseOut="MM_startTimeout();">
<span style="text-decoration: none"><font color="#FFFFFF">Menu 3</font></span></a></u></font></b></font></font></td>
<td width="32%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<b><font size="2" face="Verdana">>></font></b></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#3399FF';this.style.cursor='pointer'" onMouseOut="this.style.backgroundColor='#CC0000'" onClick="location='FicheLecomte.php'">
<td width="68%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<font face="Verdana">
<font color="#FFFFFF" size="2"><b>      </b></font>
<b><font color="#FFFFFF"><u><font color="#FFFFFF" size="2">
<a href="Home.php" name="link11" id="link5" onMouseOver="MM_showMenu(window.mm_menu_1017150818_0,156,-1,null,'link6')" onMouseOut="MM_startTimeout();">
<span style="text-decoration: none"><font color="#FFFFFF">Menu 4</font></span></a></font></u></font></b></font></td>
<td width="32%" style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" bordercolor="#FFFFFF" align="left">
<b><font size="2" face="Verdana">>></font></b></td>
</tr>
<tr onMouseOver="this.style.backgroundColor='#3399FF';this.style.cursor='pointer'" onMouseOut="this.style.backgroundColor='#CC0000'" onClick="location='FicheKraus.php'">
<td style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" align="left">
<font face="Verdana">
<font color="#FFFFFF" size="2"><b>      </b></font>
<b><font color="#FFFFFF"><u><font color="#FFFFFF" size="2">
<a href="Home.php" name="link12" id="link6" onMouseOver="MM_showMenu(window.mm_menu_1017150818_0,156,-1,null,'link7')" onMouseOut="MM_startTimeout();">
<span style="text-decoration: none"><font color="#FFFFFF">Menu 5</font></span></a></font></u></font></b></font></td>
<td style="border-style:none; border-width:medium; font-family: Geneva, Arial, Helvetica, sans-serif; " height="17" align="left">
<b><font size="2" face="Verdana">>></font></b></td>
</tr>
</table>
</div></td>
<td valign="top" bgcolor="#CC0000" style="border-left-style: solid; border-left-width: 1px; border-bottom-style: solid; border-bottom-width: 1px" rowspan="2">
<!-- MSCellType="ContentBody" -->
 </td>
<td valign="top" bgcolor="#CC0000" style="border-right-style: solid; border-right-width: 1px; border-bottom-style: solid; border-bottom-width: 1px" rowspan="2">
<!-- MSCellType="NavBody2" -->
 </td>
<td valign="top" bgcolor="#000000" style="border-right-style: solid; border-right-width: 1px; border-bottom-style: solid; border-bottom-width: 1px" rowspan="2">
<!-- MSCellType="NavBody2" -->
<table border="1" width="100%" id="table13" style="border-width: 0px">
<tr>
<td style="border-style: none; border-width: medium" colspan="2">
<div style="border-bottom: 1px solid #FFFFFF">
<font face="Verdana" size="2">
<b>MATCHS</b></font></div>
</td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" rowspan="3" align="center">
<table border="1" width="53" id="table14" cellspacing="0" bgcolor="#CC0000" cellpadding="3" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF">
<tr>
<td width="43">
<p style="margin-top: 0; margin-bottom: 0" align="center"><b>
<font size="2" face="Verdana">09-08</font></b></p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<font color="#000000" size="2" face="Verdana"><b>
<span style="background-color: #FFFFFF">16:00</span></b></font></td>
</tr>
</table>
</td>
<td style="border-style: none; border-width: medium" align="center">
<font face="Verdana" size="2">Sottegem</font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center">
<font color="#FFFF00" face="Verdana" size="2"><b>.. - ..</b></font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center">
<font face="Verdana" size="2"><b>
Bertrix</b></font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center" colspan="2">
<div style="border-bottom: 1px solid #FFFFFF">
 </div>
</td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" rowspan="3" align="center">
<table border="1" width="53" id="table15" cellspacing="0" bgcolor="#CC0000" cellpadding="3" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF">
<tr>
<td width="43">
<p style="margin-top: 0; margin-bottom: 0" align="center"><b>
<font size="2" face="Verdana">02-08</font></b></p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<font color="#000000" size="2" face="Verdana"><b>
<span style="background-color: #FFFFFF">16:00</span></b></font></td>
</tr>
</table>
</td>
<td style="border-style: none; border-width: medium" align="center">
<font face="Verdana" size="2">Martelange</font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center">
<font color="#FFFF00" face="Verdana" size="2"><b>
<span style="text-decoration: none">
<font color="#FFFF00"><a href="Match1MartelangeBertrix.htm">
<font color="#FFFF00"><span style="text-decoration: none">0 - 2</span></font></a></font></span></b></font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center">
<font face="Verdana" size="2"><b>
Bertrix</b></font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center" colspan="2">
<div style="border-bottom: 1px solid #FFFFFF">
 </div>
</td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center" rowspan="3">
<table border="1" width="53" id="table16" cellspacing="0" bgcolor="#CC0000" cellpadding="3" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF">
<tr>
<td width="43">
<p style="margin-top: 0; margin-bottom: 0" align="center">
<font face="Verdana">
<font size="2"><b>26</b></font><b><font size="2">-0</font></b><font size="2"><b>7</b></font></font></p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<font color="#000000" size="2" face="Verdana"><b>
<span style="background-color: #FFFFFF">16:00</span></b></font></td>
</tr>
</table>
</td>
<td style="border-style: none; border-width: medium" align="center">
<font face="Verdana" size="2"><b>Bertrix</b></font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center">
<font face="Verdana" size="2"><font color="#FFFF00"><b>3</b></font><b><font color="#FFFF00">
- 0</font></b></font></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" align="center">
<font face="Verdana" size="2">Mormont</font></td>
</tr>
</table>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </p>
<table border="1" width="100%" id="table17" bordercolorlight="#FFFFFF" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td colspan="3"><font color="#000000" face="Verdana" size="2"><b>
Classement au 30/08/09</b></font></td>
</tr>
<tr>
<td align="right"><font color="#0000FF" face="Verdana" size="2">
1</font></td>
<td><font color="#0000FF" face="Verdana" size="2">Bertrix</font></td>
<td align="center">
<font color="#0000FF" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
2</font></td>
<td><font color="#000000" face="Verdana" size="2">Lor. Arlon</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
3</font></td>
<td><font color="#000000" face="Verdana" size="2">Givry</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
4</font></td>
<td><font color="#000000" face="Verdana" size="2">Hamoir</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
5</font></td>
<td><font color="#000000" face="Verdana" size="2">Sprimont</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
6</font></td>
<td><font color="#000000" face="Verdana" size="2">Seraing</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
7</font></td>
<td><font color="#000000" face="Verdana" size="2">Huy</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
8</font></td>
<td><font color="#000000" face="Verdana" size="2">Aywaille</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
9</font></td>
<td><font color="#000000" face="Verdana" size="2">Bas-Oha</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
10</font></td>
<td><font color="#000000" face="Verdana" size="2">Ciney</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
11</font></td>
<td><font color="#000000" face="Verdana" size="2">Tamines</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
12</font></td>
<td><font color="#000000" face="Verdana" size="2">Aische</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
13</font></td>
<td><font color="#000000" face="Verdana" size="2">Petit-Waret</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
14</font></td>
<td><font color="#000000" face="Verdana" size="2">Hannut</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
15</font></td>
<td><font color="#000000" face="Verdana" size="2">Walhain</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
<tr>
<td align="right"><font color="#000000" face="Verdana" size="2">
16</font></td>
<td><font color="#000000" face="Verdana" size="2">Wavre</font></td>
<td align="center">
<font color="#000000" face="Verdana" size="2"><b>00</b></font></td>
</tr>
</table>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </p>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </p>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </td>
<td height="87"></td>
</tr>
<tr>
<td valign="top" bgcolor="#CC0000" style="border-left-style: solid; border-left-width: 1px; border-bottom-style: solid; border-bottom-width: 1px">
<!-- MSCellType="ContentFoot" -->
 </td>
<td height="599"></td>
</tr>
<tr>
<td width="180"></td>
<td width="15"></td>
<td width="525"></td>
<td width="180"></td>
<td height="2" width="2"></td>
</tr>
</table>
</div>
<p align="center"> </p>
<p align="center"> </p>
</body>

</html>

Merci d'avance pour ton aide
0

Discussions similaires

Surbriller une cellule lorsqu'elle est identique à une autre
FRed -
Mike-31 -

5 réponses
Comment faire surbriller les cellules d'un ta
Ppouille -
pyfeu -

1 réponse