Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1521 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML]Un bug chiant !

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML]Un bug chiant !

n°401917
bagu
Posté le 21-05-2003 à 00:09:49  profilanswer
 

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
mood
Publicité
Posté le 21-05-2003 à 00:09:49  profilanswer
 

n°402283
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 10:34:55  profilanswer
 

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
n°402303
bagu
Posté le 21-05-2003 à 10:47:28  profilanswer
 

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 !

n°402305
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 10:48:56  profilanswer
 
n°402308
bagu
Posté le 21-05-2003 à 10:50:41  profilanswer
 

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

n°402312
bagu
Posté le 21-05-2003 à 10:52:17  profilanswer
 

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)

n°402317
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 10:53:52  profilanswer
 

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
n°402324
bagu
Posté le 21-05-2003 à 10:55:32  profilanswer
 

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
n°402417
jagstang
Pa Capona ಠ_ಠ
Posté le 21-05-2003 à 11:32:40  profilanswer
 

Trop fort ça...
 

Citation :

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


 
cf. ton site
 

n°402449
bagu
Posté le 21-05-2003 à 11:42:11  profilanswer
 

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...

mood
Publicité
Posté le 21-05-2003 à 11:42:11  profilanswer
 

n°402539
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 12:22:26  profilanswer
 

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
n°402567
bagu
Posté le 21-05-2003 à 12:44:52  profilanswer
 

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:

n°402572
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 12:45:55  profilanswer
 

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
n°402588
bagu
Posté le 21-05-2003 à 13:02:27  profilanswer
 

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]

n°402592
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 13:07:54  profilanswer
 

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
n°402598
bagu
Posté le 21-05-2003 à 13:16:09  profilanswer
 

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:

n°402628
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 13:27:45  profilanswer
 

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
n°402700
bagu
Posté le 21-05-2003 à 14:09:58  profilanswer
 

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  :)

n°402733
bagu
Posté le 21-05-2003 à 14:26:09  profilanswer
 

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

n°402787
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 14:48:07  profilanswer
 

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
n°402816
bagu
Posté le 21-05-2003 à 14:56:07  profilanswer
 

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...

n°402820
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 14:57:49  profilanswer
 

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
n°402839
bagu
Posté le 21-05-2003 à 15:03:39  profilanswer
 

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
n°402873
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 15:13:34  profilanswer
 

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
n°402915
bagu
Posté le 21-05-2003 à 15:29:40  profilanswer
 

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
n°403162
gm_superst​ar
Appelez-moi Super
Posté le 21-05-2003 à 16:30:34  profilanswer
 

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
n°403383
bagu
Posté le 21-05-2003 à 18:52:22  profilanswer
 

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
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML]Un bug chiant !

 

Sujets relatifs
[HTML] tableau des caracteres spéciauxHTML 4 et Bordercolor d'une table
apprendre php :/ pcke html c trop facile é nul ca soule[HTML/JS/PHP] Récupérer le fichier d'un <input type="file"> ?
[VB] tranformer code HTML (style &lt;) en son équivalent en clair (<)[PHP/HTML] vaut il mieux : bcp de echo "" ou bcp de balises <?php> ?
[HTML] probleme de background de cellule sous NETSCAPE[HTML] Mise en forme : question idiote
[HTML] Problème chiant avec la balise TABLE[HTML] pb tt con et très chiant avec les boutons radio et NS...
Plus de sujets relatifs à : [HTML]Un bug chiant !

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.239 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR