[Résolu] Zone de lien : texte VS Cellule

Répondre

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics

spirikay
Nouveau WRInaute
 
Messages: 19
Inscription: Ven Fév 10, 2006 19:35

[Résolu] Zone de lien : texte VS Cellule

Message le Lun Avr 10, 2006 18:03

Bonjour,

j'ai un tout petit bug que j'arrive pas à résoudre et dont je ne connais pas l'origine.

En faite, Sous Firefox, les "hovers" de mes liens sont gérés sur toute la zone de la cellule et non pas sur le texte du lien seuelement.

Par contre, sous IE, c'est bizarre, car la zone n'est prise en compte que dans la première cellule de mes tableau, le reste du hover est pris en compte sur le texte seulement.

(regardez sur les boutons sous les titres "Emulateurs" "Plugins" ,etc...

mon site :
http://www.emulationpsx.com


Si vous saviez d'où est ce que ca vient et si ça se résoud ?
Dernière édition par spirikay le Mar Avr 11, 2006 15:24, édité 2 fois.
Haut
magic corp.
WRInaute impliqué
WRInaute impliqué
 
Messages: 425
Inscription: Jeu Juin 17, 2004 9:56

Message le Lun Avr 10, 2006 19:46

J'ai une technique qui fonctionne mais qui n'est pas très pratique

<tr><th class="borderTop"><a class="dudu" href="/playstation/espxe.htm">eSPXe</a><hr></th></tr>

Soit :
Code: Tout sélectionner
...
<tr><TD CLASS="MenuFond">EMULATEURS</td></tr>   
            <tr><td align="center">
               <Table  width="120"  cellspacing="0">
               <tr><th class="borderTop"><a class="dudu" href="/playstation/adripsx.htm">AdriPSX</a></th></tr>
               <tr><th class="borderTop"><a class="dudu" href="/playstation/espxe.htm">eSPXe</a><hr></th></tr>
               <tr><th class="borderTop"><a class="dudu" href="/playstation/pcsx.htm">PCSX</a><hr></th></tr>   
               <tr><th class="borderTop"><a class="dudu" href="/playstation/psemu.htm">PSEmu</a><hr></th></tr>
               <tr><th class="borderTop"><a class="dudu" href="/playstation/psxemulator.htm">pSX Emulator</a><hr></th></tr>
...


Après la question est comment caché le <hr> ???

Perso j'ai decouvert ça par hazard car j'ai voulu mettre une barre de séparation dans mon menu, en plus avec la structure de mon menu, un <hr> répercute cette effet sur tout les liens :
Code: Tout sélectionner
<div class="menu">
   <div class="title">Moteurs de recherche</div>   
   <div class="items">            
      <a href="http://www.google.ch" title="google.ch"><img src="images/icons/google.png" alt="" />Google</a>

      <a href="http://search.msn.ch"><img src="images/icons/msn_search.png" alt="" />MSN Search</a>
      <a href="http://fr.search.yahoo.com"><img src="images/icons/yahoo.png" alt="" />Yahoo</a>
      <a href="http://www.search.ch"><img src="images/icons/search_ch.png" alt="" />Search.ch</a>
      <hr />
      <a href="http://www.picsearch.com"><img src="images/icons/picsearch.png" alt="" />Picsearch</a>                     
   </div>
   
   <div class="title">Encyclopédies</div>   
   <div class="items">            
      <a href="http://fr.wikipedia.org/wiki/Accueil"><img src="images/icons/wikipedia.png" alt="" />Wikipédia</a>

      <a href="http://www.imdb.com/"><img src="images/icons/imdb.png" alt="" />Internet Movie Database</a>                     
   </div>
</div>

C'est donc possible sur IE et avec d'autre chose que <hr> mais je n'ai jamais creusé la question. Dailleur avant ton poste je n'avais jamais cherché à comprendre le pourquoi de la chose.

Bonne chance.
Haut
spirikay
Nouveau WRInaute
 
Messages: 19
Inscription: Ven Fév 10, 2006 19:35

Message le Lun Avr 10, 2006 20:22

ah mais tu met des images dans ton deuxième exemple ? ou bien c'est un code a rajouter sur mon site pour cacher le <hr> ??

Parce que c'est vrai que c'est pas très propre tout ça...


Personne ne connait aucune balise ou code qui permettrait de mettre en sélection toute une zone de cellule... (un peu comme le mode "carte" pour une image)
Haut
magic corp.
WRInaute impliqué
WRInaute impliqué
 
Messages: 425
Inscription: Jeu Juin 17, 2004 9:56

Message le Lun Avr 10, 2006 21:18

spirikay a écrit:ah mais tu met des images dans ton deuxième exemple ?

C'est parce que c'est le code de mon menu et que j'affiche une icon à gauche de mon lien, tu peux viré ça n'a aucune influence sur le problème.

Voila un exemple clef en main de mon menu pour que tu puisse - 1 voir que ça marche :) et 2 peut-être que cela t'inspirera pour trouvé une solution pour toi.
Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
   <title>test</title>
   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
   <style type="text/css">
      * {
         font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
         font-size: 10px;
         margin: 0;
         padding: 0;
      }
      
      .menu {
         width: 140px;
         margin-top: 0.5em;
         margin: 10px;
      }
      
      .menu a {
         display: block;
         color: #0C4B7B;
         background-color: #E5EEFD;
         padding: 6px;
      }
      
      .menu a:hover {
         color: #000000;
         background-color: #f1f1f1;
         border: 1px solid #cccccc;
         padding: 5px;
      }
      
      .menu div.title {
         color: #5F5F5F;
         background-color: #FFF3CB;
         text-align: center;
         font-weight: bolder;
         padding: 2px;
         border: 1px solid #fb8c04;
         margin-bottom: 2px;
      }
      
      .menu div.items {
         background-color: #E5EEFD;
         color: #0C4B7B;
         border: 1px solid #769BC6;
         margin-bottom: 5px;
      }
      
      .menu hr {
         border-top: 1px solid #769BC6;
      }
      
      a {
         text-decoration: none;
      }
   </style>
</head>
<body>
   <div class="menu">
      <div class="title">Moteurs de recherche</div>   
      <div class="items">            
         <a href="http://www.google.ch">Google</a>
         <a href="http://search.msn.ch">MSN Search</a>
         <a href="http://fr.search.yahoo.com">Yahoo</a>
         <a href="http://www.search.ch">Search.ch</a>
         <hr />
         <a href="http://www.picsearch.com">Picsearch</a>                     
      </div>
      
      <div class="title">Encyclopédies</div>   
      <div class="items">            
         <a href="http://fr.wikipedia.org/wiki/Accueil">Wikipédia</a>
         <a href="http://www.imdb.com/">Internet Movie Database</a>                     
      </div>                  
   </div>
</body>
</html>

Désolé de ne pas pouvoir t'aider plus. :(
Haut

Aquarius
WRInaute impliqué
WRInaute impliqué
 
Messages: 447
Inscription: Lun Nov 08, 2004 19:37

Message le Lun Avr 10, 2006 23:52

Essaie de modifier tes CSS en ajoutant la propriété width comme suit :

Code: Tout sélectionner
a.dudu:link
{display: block;    background-image : url("/image/boutons2.jpg") ;color : #000099 ; text-decoration : none ; width : 100%}


A faire pour toutes tes lignes correspondant à l'affichage des liens de tes menus (link, hover, visited, active).

Dis-moi si ça marche, sinon j'ai une autre solution un peu plus compliquée.
Haut
spirikay
Nouveau WRInaute
 
Messages: 19
Inscription: Ven Fév 10, 2006 19:35

Message le Mar Avr 11, 2006 0:02

Aquarius a écrit:Essaie de modifier tes CSS en ajoutant la propriété width comme suit :

Code: Tout sélectionner
a.dudu:link
{display: block;    background-image : url("/image/boutons2.jpg") ;color : #000099 ; text-decoration : none ; width : 100%}


A faire pour toutes tes lignes correspondant à l'affichage des liens de tes menus (link, hover, visited, active).

Dis-moi si ça marche, sinon j'ai une autre solution un peu plus compliquée.



YESSSSSS Ca Marche !!!!!


Merci beaucoup beaucoup :) tu es un génie !
Haut

Aquarius
WRInaute impliqué
WRInaute impliqué
 
Messages: 447
Inscription: Lun Nov 08, 2004 19:37

Message le Mar Avr 11, 2006 0:11

De rien.

Un petit [REGLE] devant le titre de ce post serait le bien venu ;)
Haut
Répondre

Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :

  • Tester le type de redirection
    Cet outil vous permet de tester la validité d'un lien pour le référencement. Il vous indique la nature du lien (lien en dur, redirection bien gérée par les moteurs ou redirection mal gérée par les moteurs).
  • Calcul du taux de backlinks vers pages internes
    Cet outil vous permet de calculer le taux de liens profonds vers un site web. Un lien profond est un lien qui ne pointe pas vers la page d'accueil mais au contraire vers une page interne du site. Les sites dont l'essentiel du référencement vient de leurs inscriptions dans des annuaires ont un taux de liens profonds faible ; à l'inverse, les sites de référence ont souvent un taux de liens profonds plus important, signe que leur contenu a suscité de nombreux liens spontanés.
  • Transformer des citations en liens
    Cet outil vous permet de trouver des pages citant votre site mais ne faisant pas (encore) de lien. Il suffira parfois d'un simple mail pour transformer cette simple citation en lien (backlink).


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group , traduction par phpBB-fr.com, mod SEO par phpbb-seo.com