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

spirikay · 10 Avril 2006

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 ?

magic corp. · 10 Avril 2006

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:

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

<div class="menu">
	<div class="title">Moteurs de recherche</div>	
	<div class="items">				
		<a href="https://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.

spirikay · 10 Avril 2006

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)

magic corp. · 10 Avril 2006

spirikay a dit:
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:

<!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="https://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.

Aquarius · 11 Avril 2006

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

Code:

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.

spirikay · 11 Avril 2006

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

Code:

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 !

Aquarius · 11 Avril 2006

De rien.

Un petit [REGLE] devant le titre de ce post serait le bien venu