[HTML]Un bug chiant !

Un bug chiant ! [HTML] - HTML/CSS - Programmation

Marsh Posté le 21-05-2003 à 00:09:49    

Bonsoir,
 
J'ai un bug sur mon menu dans ma page perso dont je n'arrive pas a me défaire !!!
Non seulement sur linux les bouton n'ouvrent pas les pages demandées...mais en plus, ils sont sujets a divers bugs graphiques...
Par exemple, ils ne s'affichent que si on passe la souris dessus....ou au contraire, ils disparaissent quand je met ma souris dessus...
 
Pouvez-vous m'aider ?
 
Style.css :  
 
Code :

Code :
  1. @charset "iso-8859-1";
  2.   .menutd
  3.    {
  4.      background: url('../navig/over.jpg') no-repeat;
  5.      height: 21;
  6.    }
  7.   .sousmenudiv
  8.    {
  9.      font: 7pt Verdana, Arial, Helvetica, sans-serif;
  10.      cursor: default;
  11.      visibility: hidden;
  12.      width: 85;
  13.      height: 21;
  14.      z-index: 10;
  15.    }
  16.   .menutd1
  17.    {
  18.      font: 7pt Verdana, Arial, Helvetica, sans-serif;
  19.      background: url('../navig/over3.jpg') no-repeat;
  20.      height: 21;
  21.      cursor: hand;
  22.    }
  23.   .sousmenutable
  24.    {
  25.      font-size: 7pt;
  26.    }

 
 
 
Début de mon fichier de menu :
 
Code :

Code :
  1. <html>
  2.   <head>
  3.   <title>Bagu's Site</title>
  4.   <link rel="stylesheet" type="text/css" href="styles/styles.css">
  5.   </head>
  6.   <BODY bgcolor="#000000" text="#000000" onLoad="statusFlash()"> 
  7.   <table style="position: absolute; top: 10; left: 10; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 8pt; cursor: default;">
  8.     <a href="Page1.htm" target="mainFrame"> <td class="menutd" id="menu1" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> 
  9.         Accueil </td>
  10.     </a>
  11.     <a href="Page2.htm" target="mainFrame">
  12.       <td class="menutd" id="menu2" width=80  align="center"  onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> 
  13.         Logiciels </td>
  14.     </a>


Message édité par bagu le 21-05-2003 à 10:46:34
Reply

Marsh Posté le 21-05-2003 à 00:09:49   

Reply

Marsh Posté le 21-05-2003 à 10:34:55    

Ca m'a l'air compliqué tout ça pour des pauvres rollovers... Pour info, il est possible de faire des rollovers sans JavaScript, juste avec des CSS : http://www.wpdfd.com/editorial/wpd1102.htm#feature


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 10:47:28    

j'ai viré la partie javascript car elle n'est pas en cause dans le bug...la preuve...memem en la retirant, le bug est toujours la !

Reply

Marsh Posté le 21-05-2003 à 10:48:56    

Reply

Marsh Posté le 21-05-2003 à 10:50:41    

celle de ma signature.... _-_-Bagu's site-_-_

Reply

Marsh Posté le 21-05-2003 à 10:52:17    

pour info, je ne me sert pas de toutes les fonction de la feuille de style...(je garde ca en réserve pour des évolutions futures)

Reply

Marsh Posté le 21-05-2003 à 10:53:52    

Faut faire le contraire, mettre les <a> dans les <td> et pas l'inverse.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 10:55:32    

je vais essayer...merci...
 
EDIT : Bon c testé...alors, y'a plus le bug, mais le probleme c'est que maintenant c plus le bouton qui est considéré comme le lien, c le texte du bouton...et ca m'ennui un peu :/
 
Je mets le code obtenu apres modification :

Code :
  1. <html>
  2. <head>
  3. <title>Bagu's Site</title>
  4. <link rel="stylesheet" type="text/css" href="styles/styles.css">
  5. <script language="JavaScript">
  6. function statusFlash() {
  7. setTimeout("nextFlash();",3000)
  8. window.status='Bienvenue sur le site de Bagu'
  9. }
  10. function nextFlash() {
  11. setTimeout("thirdFlash();",3000)
  12. window.status='Un forum libre, des logiciels, des news...'
  13. }
  14. function thirdFlash() {
  15. setTimeout("statusFlash();",3000)
  16. window.status='Pour me contacter : webmaster@bagupremier.com'
  17. }
  18. </script>
  19. </head>
  20. <BODY bgcolor="#000000" text="#000000" onLoad="statusFlash()">
  21. <table style="position: absolute; top: 10; left: 10; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 8pt; cursor: default;">
  22.   <td class="menutd" id="menu1" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="Page1.htm" target="mainFrame"> Accueil </a> </td>
  23.   <td class="menutd" id="menu2" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="Page2.htm" target="mainFrame"> Logiciels </a> </td>
  24.   <td class="menutd" id="menu3" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="Page3.htm" target="mainFrame"> Outils </a> </td>
  25.   <td class="menutd" id="menu4" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="Page4.htm" target="mainFrame"> News </a> </td>
  26.   <td class="menutd" id="menu5" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="Page5.htm" target="mainFrame"> Actualité </a> </td>
  27.   <td class="menutd" id="menu6" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="Page6.htm" target="mainFrame"> FTP </a> </td>
  28.   <td class="menutd" id="menu7" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="Page7.htm" target="mainFrame"> Partenaires </a> </td>
  29.   <td class="menutd" id="menu8" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="http://www.bagupremier.com/phpBB2" target="mainFrame"> Forum </a> </td>
  30.   <td class="menutd" id="menu8" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="http://webmail.unetun.com" target="mainFrame"> Webmail </a> </td>
  31.   <td class="menutd" id="menu8" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> <a href="http://www.bagupremier.com/admin/admin.html" target="mainFrame"> Admin </a> </td>
  32. </table>
  33. </body>
  34. </html>


Message édité par bagu le 21-05-2003 à 11:07:21
Reply

Marsh Posté le 21-05-2003 à 11:32:40    

Trop fort ça...
 

Citation :

Ce FTP est réservé aux personnes, inscrites sur le forum, ayant satisfait certaines conditions...


 
cf. ton site
 

Reply

Marsh Posté le 21-05-2003 à 11:42:11    

ben oui...y'a eut un drole d'abus...au départ, tt le monde pouvait y mettre tout ce qu'il voulait...résultat de la premiere semaine y'avait plein de virus et de trucs illégaux...

Reply

Marsh Posté le 21-05-2003 à 11:42:11   

Reply

Marsh Posté le 21-05-2003 à 12:22:26    

Mouais, dans ce cas le plus simple est de ne pas faire un tableau :
 
Tu utilises un DIV dans lequel tu mets tes A, les uns à la suites des autres avec les bonnes options CSS :
 

div#menu a {
  float: left;
  background-image: url("navig/over.jpg" );
  width: 80px;
  height: 21px;
  text-align: center;
  margin: 0 5px;
}


 
Et le code HTML :
 

<div id="menu">
  <a href="Page1.htm">Accueil</a>
  <a href="Page2.htm">Logiciels</a>
  <a href="Page3.htm">Outils</a>
  <a href="Page4.htm">News</a>
...
</div>


 
 
Je te laisse adapter pour l'aspect cosmétique ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 12:44:52    

j'avoue avoir un peu de mal a faire appliquer la feuille de style...
Ca créer bien les textes et les liens, mais aucune trace des boutons... :sweat:

Reply

Marsh Posté le 21-05-2003 à 12:45:55    

Voir la FAQ pour la déclaration des CSS...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 13:02:27    

j'ai trouvé !!!
 
grace a ta faq j'ai remarqué deux petites choses...
La premiere...c'est que je peux inclure les styles (ca évite de charger une page en plus  :D )
La seconde c'est que j'avais une petite erreure au niveau des liens avec les images...
donc apres correction cela devient :
 

Code :
  1. <html>
  2. <head>
  3. <title>Bagu's Site</title>
  4. <style type="text/css">
  5. <!--
  6. .menutd
  7. {
  8. background: url('navig/over.jpg') no-repeat;
  9. height: 21;
  10. }
  11. .sousmenudiv
  12. {
  13. font: 7pt Verdana, Arial, Helvetica, sans-serif;
  14. cursor: default;
  15. visibility: hidden;
  16. width: 85;
  17. height: 21;
  18. z-index: 10;
  19. }
  20. .menutd1
  21. {
  22. font: 7pt Verdana, Arial, Helvetica, sans-serif;
  23. background: url('navig/over3.jpg') no-repeat;
  24. height: 21;
  25. cursor: hand;
  26. }
  27. .sousmenutable
  28. {
  29. font-size: 7pt;
  30. }
  31. -->
  32. </style>
  33. <script language="JavaScript">
  34. function statusFlash() {
  35. setTimeout("nextFlash();",3000)
  36. window.status='Bienvenue sur le site de Bagu'
  37. }
  38. function nextFlash() {
  39. setTimeout("thirdFlash();",3000)
  40. window.status='Un forum libre, des logiciels, des news...'
  41. }
  42. function thirdFlash() {
  43. setTimeout("statusFlash();",3000)
  44. window.status='Pour me contacter : webmaster@bagupremier.com'
  45. }
  46. </script>
  47. </head>
  48. <BODY bgcolor="#000000" text="#000000" onLoad="statusFlash()">
  49. <table style="position: absolute; top: 10; left: 10; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 8pt; cursor: default;">
  50.   <a href="Page1.htm" target="mainFrame"> <td class="menutd" id="menu1" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Acceuil </td> </a>
  51.   <a href="Page2.htm" target="mainFrame"> <td class="menutd" id="menu2" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Logiciels </td> </a>
  52.   <a href="Page3.htm" target="mainFrame"> <td class="menutd" id="menu3" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Outils </td> </a>
  53.   <a href="Page4.htm" target="mainFrame"> <td class="menutd" id="menu4" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> News </td> </a>
  54.   <a href="Page5.htm" target="mainFrame"> <td class="menutd" id="menu5" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Actualité </td> </a>
  55.   <a href="Page6.htm" target="mainFrame"> <td class="menutd" id="menu6" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> FTP </td> </a>
  56.   <a href="Page7.htm" target="mainFrame"> <td class="menutd" id="menu7" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Partenaires</td>  </a>
  57.   <a href="http://www.bagupremier.com/phpBB2" target="mainFrame"> <td class="menutd" id="menu8" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Forum </td> </a>
  58.   <a href="http://webmail.unetun.com" target="mainFrame"> <td class="menutd" id="menu8" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Webmail </td> </a>
  59.   <a href="http://www.bagupremier.com/admin/admin.html" target="mainFrame"> <td class="menutd" id="menu8" width=80 align="center" onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'" onMouseOut="this.style.background='url(navig/over.jpg) no-repeat'; this.style.font='normal 8pt Verdana, Helvetica, Arial, sans-serif'"> Admin </td> </a>
  60. </table>
  61. </body>
  62. </html>


 
le changement de lien tenant la :
('navig/over3.jpg') était auparavant ('../navig/over3.jpg')
 
du coup...plus de bug  :D  
 
Merci beaucoup !!!  [:youyou2224]

Reply

Marsh Posté le 21-05-2003 à 13:07:54    

Plusieurs choses :
 
- Ton code reste quand même très lourd
- Ce n'est pas parce que tu définis une propriété "cursor: hand;" sur le <td> que le lien devient cliquable sur toute la cellule
- Il manque les unités à top et left pour le positionnement de ton tableau
- Pour le changement de style avec JS, défini plutot une classe pour l'état "survolé" de tes cellules et utilise this.className


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 13:16:09    

gm_superstar a écrit :

Plusieurs choses :
 
- Ton code reste quand même très lourd - Oui mais c le seul qui me donne le résultat que j'attend pour le moment
- Ce n'est pas parce que tu définis une propriété "cursor: hand;" sur le <td> que le lien devient cliquable sur toute la cellule - effectivement...c'est plutot du au fait que les <td> soient dans les <a>
- Il manque les unités à top et left pour le positionnement de ton tableau - ben non...elle sont la  :??: précise ... :sweat:  
- Pour le changement de style avec JS, défini plutot une classe pour l'état "survolé" de tes cellules et utilise this.className - La j'ai du mal a te suivre...Je suis plus que débutant... :sweat:

Reply

Marsh Posté le 21-05-2003 à 13:27:45    

bagu a écrit :

Oui mais c le seul qui me donne le résultat que j'attend pour le moment


Je t'ai donné une autre solution plus simple :o

bagu a écrit :

effectivement...c'est plutot du au fait que les <td> soient dans les <a>


Oui mais c'est interdit par la norme HTML de mettre un mettre un <td> dans un <a>. C'est ce qui posait problème à Mozilla d'ailleurs.

bagu a écrit :

ben non...elle sont la  :??: précise ... :sweat:  


Tu as écrit :

position: absolute; top: 10; left: 10;


10 quoi ? pixels ? centimètres ? choucroutes ?

bagu a écrit :

La j'ai du mal a te suivre...Je suis plus que débutant... :sweat:


Au lieu d'écrire 50 fois :
 

onMouseOver="this.style.background='url(navig/over2.jpg) no-repeat'; this.style.font='bold 8pt Verdana, Helvetica, Arial, sans-serif'"


 
Tu crées une classe avec ces propriétés :
 

.menutdOver {
  background: url("navig/over2.jpg" ) no-repeat;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 8pt;
  font-weight: bold;
}


 
(d'ailleurs on devrait pouvoir se dispenser de font-family, vu que c'est une propriété héritée des éléments supérieurs)
 
Puis ensuite dans ton <td>, tu te contentes d'un :
 

onmouseover="this.className='menutdOver';"


 
 
Pareil pour onmouseout


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 14:09:58    

je suis en train de tester ton exemple...pour l'instant ca donne :
 

Code :
  1. <html>
  2. <head>
  3. <title>Bagu's Site</title>
  4. <style type="text/css">
  5. <!--
  6. div#menu a {
  7.   float: left;
  8.   background-image: url("navig/over.jpg" );
  9.   width: 80px;
  10.   height: 21px;
  11.   text-align: center;
  12.   margin: 0 5px;
  13. }
  14. -->
  15. </style>
  16. <script language="JavaScript">
  17. function statusFlash() {setTimeout("nextFlash();",3000)window.status='Bienvenue sur le site de Bagu'}
  18. function nextFlash() {setTimeout("thirdFlash();",3000)window.status='Un forum libre, des logiciels, des news...'}
  19. function thirdFlash() {setTimeout("statusFlash();",3000)window.status='Pour me contacter : webmaster@bagupremier.com'}
  20. </script>
  21. </head>
  22. <BODY bgcolor="#000000" text="#000000" onLoad="statusFlash()">
  23. <div id="menu"> <a href="Page1.htm" target="mainFrame">Accueil</a> <a href="Page2.htm" target="mainFrame">Logiciels</a>
  24.   <a href="Page3.htm" target="mainFrame">Outils</a> <a href="Page4.htm" target="mainFrame">News</a>
  25.   <a href="Page5.htm" target="mainFrame">Actualité</a> <a href="Page6.htm" target="mainFrame">FTP</a>
  26.   <a href="Page7.htm" target="mainFrame">Partenaires</a> <a href="http://www.bagupremier.com/phpBB2" target="mainFrame">Forum</a>
  27.   <a href="http://webmail.unetun.com" target="mainFrame">Webmail</a> <a href="http://www.bagupremier.com/admin/admin.html" target="mainFrame">Admin</a>
  28. </div>
  29. </body>
  30. </html>


 
Mais la, je me creuse la tete pour reproduire l'effet de survol...Je vais essaye de voir avec ton conseil :
 

Code :
  1. .menutdOver {
  2. background: url("navig/over2.jpg" ) no-repeat;
  3. font-family: Verdana, Helvetica, Arial, sans-serif;
  4. font-size: 8pt;
  5. font-weight: bold;
  6. }


je vais essayer de voir comment intégrer ca avec ta faq  :)

Reply

Marsh Posté le 21-05-2003 à 14:26:09    

je n'y arrive vraiment pas...peux tu m'aiguiller ?
je n'arrive pas a comprendre comment intégrer l'effet de survol... :??:  :sweat:

Reply

Marsh Posté le 21-05-2003 à 14:48:07    

Heu... je fatigue là... Oublie ce que je viens de dire. Il y a plus simple et sans JavaScript. Il faut utiliser la pseudo classe :hover.
 
Donc je reprends :
 

div#menu a {
  float: left;
  width: 80px;
  height: 21px;
  text-align: center;
  margin: 0 5px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 8pt;
  text-decoration: none;
  color: black;
  background-image: url("navig/over.jpg" );
  font-weight: normal;
}
 
div#menu a:hover {
  background-image: url("navig/over2.jpg" );
  font-weight: bold;
}


 
Et les liens sont tout simplement fait comme ça :
 

<a href="Page1.htm" target="mainFrame">Accueil</a>


 
Voilà donc pas besoin de classe et de javascript :D  
 
Et moi je vais prendre un café ça va me réveiller.


Message édité par gm_superstar le 21-05-2003 à 14:49:42

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 14:56:07    

Ok...donc si j'ai bien suivi ca donne ca :
 

Code :
  1. <html>
  2. <head>
  3. <title>Bagu's Site</title>
  4. <style type="text/css">
  5. <!--
  6. div#menu a {
  7.   float: left;
  8.   width: 80px;
  9.   height: 21px;
  10.   text-align: center;
  11.   margin: 0 2px;
  12.   font-family: Verdana, Helvetica, Arial, sans-serif;
  13.   font-size: 8pt;
  14.   text-decoration: none;
  15.   color: black;
  16. }
  17. .menu {
  18.   background-image: url("navig/over.jpg" );
  19.   font-weight: normal;
  20. }
  22. .menuOver {
  23.   background-image: url("navig/over2.jpg" );
  24.   font-weight: bold;
  25. }
  26. -->
  27. </style>
  28. <script language="JavaScript">
  29. function statusFlash() {setTimeout("nextFlash();",3000)window.status='Bienvenue sur le site de Bagu'}
  30. function nextFlash() {setTimeout("thirdFlash();",3000)window.status='Un forum libre, des logiciels, des news...'}
  31. function thirdFlash() {setTimeout("statusFlash();",3000)window.status='Pour me contacter : webmaster@bagupremier.com'}
  32. </script>
  33. </head>
  34. <BODY bgcolor="#000000" text="#000000" onLoad="statusFlash()">
  35. <div id="menu">
  36.   <a href="Page1.htm" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Accueil</a>
  37.   <a href="Page2.htm" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Logiciels</a>
  38.   <a href="Page3.htm" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Outils</a>
  39.   <a href="Page4.htm" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">News</a>
  40.   <a href="Page5.htm" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Actualité</a>
  41.   <a href="Page6.htm" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">FTP</a>
  42.   <a href="Page7.htm" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Partenaires</a>
  43.   <a href="http://www.bagupremier.com/phpBB2" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Forum</a>
  44.   <a href="http://webmail.unetun.com" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Webmail</a>
  45.   <a href="http://www.bagupremier.com/admin/admin.html" target="mainFrame" onmouseover="this.className='menuOver';" onmouseout="this.className='menu';">Admin</a>
  46. </div>
  47. </body>
  48. </html>


 
sauf que y'a deux problemes...
Le premier c'est que les boutons ne s'affichent que si la souris est passée par dessus...
Le second c'est que je n'arrive pas a "recentrer" les textes dans les boutons...

Reply

Marsh Posté le 21-05-2003 à 14:57:49    

Laisse tomber tout ça j'ai viré mon précédent post qui parlait de ça c'était une solution bien trop compliquée.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 15:03:39    

effectivement c carrément plus simple... hover permet de remplacer onmouover et onmouseout donc ?
 
Il ne reste plus qu'un "détail"... le texte est "collé" en haut de la case...alors qu'il y a

text-align: center;

 
J'avoue ne pas saisir pourquoi...
 
EDIT : je crois que c'est du a

text-decoration: none;

qui, certes supprime la ligne, mais qui laisse le texte comme si la ligne y était encore...


Message édité par bagu le 21-05-2003 à 15:07:33
Reply

Marsh Posté le 21-05-2003 à 15:13:34    

bagu a écrit :

Il ne reste plus qu'un "détail"... le texte est "collé" en haut de la case...alors qu'il y a

text-align: center;

 
J'avoue ne pas saisir pourquoi...


text-align ne s'occupe que de l'alignement horizontal, pas vertical.

bagu a écrit :

EDIT : je crois que c'est du a

text-decoration: none;

qui, certes supprime la ligne, mais qui laisse le texte comme si la ligne y était encore...


Non plus. Text-decoration c'est pour empêcher le soulignement des liens qui le sont par défaut. Et comme tu n'avais pas souligné les liens sur ton site je l'ai mis...
 
Non pour le mettre ton texte au milieu il y a plusieurs solutions :
 
- soit tu définis un padding (marge intérieure) pour faire descendre le texte
 

 padding-top: 4px;
  height: 17px;


 
(et dans ce cas il faut réduire la hauteur d'autant pour garder une hauteur totale de 21px)
 
Mais cette solution risque de poser un problème avec IE 5.x (c'est contournable, mais c'est lourd)
 
- Soit tu définis une hauteur de ligne pour le texte assez grosse
 

line-height: 20px;


 
(à ajuster bien sûr)
 
Bon pour être cohérent il faudrait que tu définisses la taille de ta police en pixels (px) plutôt qu'en points (pt)


Message édité par gm_superstar le 21-05-2003 à 15:13:56

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 15:29:40    

impec...la deuxieme solution est la bonne...
 
Merci beaucoup....En plus, je suis en train de corriger mes pages avec CSE HTML Validator Lite v3.5
 
Y'avait un paquet d'erreur ! :sweat:  
 
 
Merci encore pour tout...c kler que c beaucoup plus léger comme ca et mes pages seront enfin accessible sous linux  [:youyou2224]  [:youyou2224]  [:youyou2224]  [:youyou2224]  [:youyou2224]  [:youyou2224]  [:youyou2224]  [:youyou2224]
 
 
EDIT : Excuse moi de te déranger encore...mais connait tu une solution pour que lorsque l'affichage est inférieur a du 1024*768 les bouton restent accessibles...
Car dès que ca passe en 800*600 ou moins, les boutons s'empilent et du fait des frames, ceux du bas sont innaccessibles... :sweat:


Message édité par bagu le 21-05-2003 à 15:33:59
Reply

Marsh Posté le 21-05-2003 à 16:30:34    

Ben tu fixes la taille du DIV qui contient les boutons


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-05-2003 à 18:52:22    

merci :hello:
 
EDIT : finalement j'ai juste agrandis la frame du haut pour qu'elle puisse acceuillir deux lignes...ca me permettra de rajouter des boutons  :whistle:


Message édité par bagu le 22-05-2003 à 08:57:51
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed