image survolée..bug?

image survolée..bug? - HTML/CSS - Programmation

Marsh Posté le 30-11-2005 à 21:58:51    

bonsoir,
 
j'essaie de faire un menu avec une image survolée a cote de chaque lien...Un truc simple en fait, mais ddes petits soucis se posent a moi.
 

Code :
  1. <style>
  2. a.barrenav:link {
  3. color: #C03;
  4. text-decoration: none;
  5. background-image: url(images/alveole.gif);
  6. background-repeat: no-repeat;
  7. padding-left: 25px;
  8. }
  9. a.barrenav:hover {
  10. color: #CCC;
  11. text-decoration: none;
  12. background-image: url(images/alveolePush.gif);
  13. }
  14. </style>
  17. <A HREF="trucmachin.htm" class="barrenav">La production </A>
  18. <A HREF="truc.htm" class="barrenav">L'hydromel </a>


 
 
 
Alors l image en roll over s'affiche a moitié...je ne vois pas pourquoi
Et lorque le lien a ete visité, l image n'apparait plus  
voici un bout de mon probleme
 
Merci par avance pour votre aide   :jap:  
 
http://perso.wanadoo.fr/kulgana/Aristee/production.htm


Message édité par francescu le 01-12-2005 à 15:32:54
Reply

Marsh Posté le 30-11-2005 à 21:58:51   

Reply

Marsh Posté le 30-11-2005 à 22:09:36    

essaye plutot .barrenav a:link

Reply

Marsh Posté le 30-11-2005 à 22:16:43    

Rho zut, j'avais lu la question qu'à moitié vite fait.
fait un display block et donne des dimensions à ton css

Reply

Marsh Posté le 30-11-2005 à 22:24:26    

merci... :)
 
ce serait abusé de te demander un exemple?

Reply

Marsh Posté le 30-11-2005 à 22:40:19    

Code :
  1. a.barrenav:link {
  2. display:block;
  3. width:130px;
  4. height:30px;
  5. color: #C03;
  6. text-decoration: none;
  7. background-image: url(images/alveole.gif);
  8. background-repeat: no-repeat;
  9. padding-left: 25px;
  10. }


J'ai mis n'importe quoi pour la largeur et la hauteur, toi, faut mettre les dimentions de ton image de fond.

Reply

Marsh Posté le 30-11-2005 à 22:45:28    

rho merci beaucoup... :)
mais pourquoi l'image disparait elle une fois que l'on a visité le lien?

Reply

Marsh Posté le 30-11-2005 à 22:47:43    

Essayes :

Code :
  1. a.barrenav:link, a.barrenav:visited {


en remplacement.

Reply

Marsh Posté le 30-11-2005 à 22:55:29    

waou... je te remercie beaucoup...
Une derniere question apres je t'embete plus, promis :  y a t il un moyen d'eviter le chergement de la deuxieme image? (pour supprimer cet effet de clignotement)
 
http://perso.wanadoo.fr/kulgana/Aristee/production.htm

Reply

Marsh Posté le 30-11-2005 à 22:59:05    

Tu parles de l'effet de clignotement la première fois ?
 
Perso, je fais un petit js qui précharge dans le head :

Code :
  1. <script type="text/javascript">
  2. precharg1 = new Image();
  3. precharg1.src= 'chemin/dudossier/de/monimage.gif';
  4. </script>


Enfin bon, ça n'arrive qu'une fois, une fois en cache, c'est okey si tu ne veux pas inclure de JS.
 
Mais je pense qu'il y a plus propre.
 

Reply

Marsh Posté le 30-11-2005 à 23:58:56    

alors j'essaie de mettre tout ca dans une feuille de style quii se trouve dans le dossier includes...
j'ai ecrit ca mais plus rien ne s'affiche... :(
<link rel="stylesheet" type="text/css" href="./includes/classe.css">

Reply

Marsh Posté le 30-11-2005 à 23:58:56   

Reply

Marsh Posté le 01-12-2005 à 00:07:57    

aie j'avais oublié un "."
 
background-image: url(../images/alveolePush.gif);

Reply

Marsh Posté le 01-12-2005 à 00:21:35    

ou tout simplement utiliser la technique des portes coulissantes qui consiste à utiliser une seule et même image

Reply

Marsh Posté le 01-12-2005 à 12:10:58    

coucou,
je n'arrive pas a supprimer cet effet de clignotmemnt(chargement de l'image)..meme en mettant le code en javascript...  merci pour votre aide  :)
 
http://perso.wanadoo.fr/kulgana/Aristee/production.htm  

Reply

Marsh Posté le 01-12-2005 à 12:34:33    

vraiment personne ne peut m'aider?   :pt1cable:


Message édité par francescu le 01-12-2005 à 13:38:18
Reply

Marsh Posté le 01-12-2005 à 13:40:32    

sur certaines machines il y a meme un sablier qui apparait... je comprends pas trop la

Reply

Marsh Posté le 01-12-2005 à 14:46:57    

Mon dieu, je viens de regarder le code source.
Tu utilises DreamWeaver en Wysiwig ?
Bon, déjà, y'a une erreur dans ton javascript, ensuite, il faut déclaré le CSS dans le header du site, entre <head> et </head>

Reply

Marsh Posté le 01-12-2005 à 15:31:18    

Oki merci,
j'ai corrigé l'erreur, et j'ai mis l'appel de la feuille css la ou il faut...
L'image se charge toujours lors du survol.
 il y aurait un moyen  d'eviter cela?

Reply

Marsh Posté le 01-12-2005 à 15:47:13    

Chez moi c'est bon.  :heink:  
 
Mais sinon, la technique indiqué par Gatsu est intéressante dans le cas présent.
En gros tu mets tes 2 images sur une seule et même image et tu fais coulisé l'image quand on passe par dessus.
Je te fais un truc vite fait et je te montre. ;)

Reply

Marsh Posté le 01-12-2005 à 16:36:09    

Voilà, alors, tu peux piquer le code source ici :
http://ns31789.ovh.net/mielcorse/index.html
la feuille de style se trouve ici :
http://ns31789.ovh.net/mielcorse/classe.css
et les images ici :
http://ns31789.ovh.net/mielcorse/images/
 
Par contre, y'a des trucs louches dans ton code.
1 - Je ne suis pas un intégriste de la non utilisation des table, mais sur un design aussi simple, tu pourrais le faire assez facilement en CSS.
2 - Tu utilises des polices "spéciales" dans tes CSS, surement très jolies, seulement voilà, comme je ne les ai pas sur mon ordi, je ne les vois pas.
3 - Analyse bien mon code source et l'image qui me sert pour le roll-over et comment j'ai pratiqué dans le css, je veux bien bosser gratos, mais il faut ABSOLUMENT que tu comprennes ce que j'ai fait, autrement, c'est faire le boulot à ta place et ça ne t'aide pas beaucoup si tu n'y comprends rien, il n'y aura pas toujours quelqu'un pour t'aider alors regarde bien tout et repose une question si tu veux un supplément d'info, il faut que tu sois capable de le refaire sans personne. Spa bien compliqué en plus.
 
Voilà. :D


Message édité par The-Shadow le 01-12-2005 à 16:36:50
Reply

Marsh Posté le 02-12-2005 à 12:28:55    

merci bcp  !!   :)
j'ai tout decortiquer pendant deux heures, je crois avoir bien compris les option de la feuille de style...
Seulement le changement n'est pas instantané... J'ai verifier sur plusieurs machines avec des connaxions diveers, ca fait tjs cet effet de clignotement.  
Si on clique sur un lien, puis precedent, il apparait alors que le changement se fait instantanement....  c'est plutot bizrarre non?

Reply

Marsh Posté le 02-12-2005 à 13:05:08    

Peut-être un problème de cache chez toi, j'ai testé sous IE et Fx, aucun soucis chez moi, peut-être une tierce personne pourra-t-elle confirmer si elle lit ?

Reply

Marsh Posté le 02-12-2005 à 13:27:22    

bon
il y a aussi cette méthode là en full CSS
http://gatsu.ftp.free.fr/Modele/Ruche/page.html
 
tu peux récupérer le tout ici :  
http://gatsu.ftp.free.fr/Modele/Ruche/
 
C'est en full CSS et on garde ainsi un menu convaincant et correct. tout en faisant très très peu de HTML. donc réutilisabilité sur toutes les pages simple.
 
bon au niveau CSS ya  quelques bidouilles.
 
et j'ai passé le site en 760 car un site en 800px de large ne passera jamais correctement sur le navigateur d'une personne en 800x600, puisqu'il faut compter  en plus la barre de scroll+ la bordure du navigateur. donc c'est mal barré.
 
et je n'ai aucun problème en visitant la page de TS.
Mais the-shadow a raison, tu utilises 10x trop de tableaux


Message édité par gatsu35 le 02-12-2005 à 13:30:10
Reply

Marsh Posté le 02-12-2005 à 13:31:01    

[HS]Prkoi avoir changé de speudo gat?[/HS]
 
 
sympas l'idée de ceci :
 
http://gatsu.ftp.free.fr/Modele/Ru [...] lemenu.gif
 
 
 :love:  :love:


Message édité par xtof_83 le 02-12-2005 à 13:33:22
Reply

Marsh Posté le 02-12-2005 à 14:00:03    

tout simplement que je préfère Gatsu35 que Gatsusat,  
Gatsusat était un ancien pseudo lorsque j'était spécialisé un peu dans tout ce qui touchait de près ou de lieu au Sat
mais Gatsu est mon pseudo. Gatsu35 avait été banni sur HFR, alors comme j'avais Gatsusat de coté, je l'ai repris.
 
Puis comme Gatsu35 a été débanni, je le réutilise pour de bon cette fois-ci

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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