[BIEN RESOLU ! ] Je coince sur un pb de a href "large" ...

  • Auteur de la discussion Auteur de la discussion Zecat
  • Date de début Date de début
WRInaute accro
Une liste de lignes avec chaque ligne de type :

aaaaaaa bbbbbbbbbbb cccccccccc

de la forme :

<table><tr>
<Td>aaaaaaa</td>
<Td>bbbbbbbbb</td>
<Td>cccccccc</td>
</tr></table>

et je veux entourer L'ENSEMBLE d'une ligne (donc une table) par un <a href ...> ....... </a> pour pouvoir coller un css qui passe l'ensemble de la ligne en encadré fond bleu au survol du lien ...

Mais ca a pas l'air de lui plaire ce type de manip ...ca marche sans probleme si j'encadre juste le aaaaaa mais pas les 3 ensemble ...

Ya une syntaxe particulière a respecter pour cela (en div ou autre ?)
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

En JS avec un onclick sur la <table>, avec un <a> c'est pas valide W3C car il faut des éléments de type inline dedans.
=> recherche GG "div cliquable" :wink:
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

ouaip effectivement ...

le premier lien propsoe cela :

<a href="http://..." style="diplay:block;width:100%;height:100%;">

c'est bon aussi ?
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

Ça fonctionnera, mais c'est pas valide W3C.
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

+1 spout.

Et même si tu le fais comme ça, pitié, remonte les attributs CSS dans une feuille de style, plutôt que de les laisser en inline :mrgreen:
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

spout a dit:
Ça fonctionnera, mais c'est pas valide W3C.
j ai testé ... ca fonctionne pas. j'ai bien le css qui fait son cadre tpout autour de la ligne (de la table donc) mais il semble degardé :

- le background ne s'affiche pas (juste le border)
- la ligne n'est opas cliquable sauf curieusement quand je survol le border ...

Bref pas net ...
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

UsagiYojimbo a dit:
+1 spout.

Et même si tu le fais comme ça, pitié, remonte les attributs CSS dans une feuille de style, plutôt que de les laisser en inline :mrgreen:
oui oui la c'ets juste le copier coller de ce que j'ai trouvé dans la page ...
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

J'arrive a rien ... si quelqu'un trouve le pb ... voila mon code :

Code:
<a href="<?=$url_notes2?>" style="diplay:block;width:<?=$size_gauche-17?>px;height:<?=$hauteurligne?>px;" <?=$classliengauche10?>>

<table ...


... table>

</a>

et le css $classleingauche10

Code:
a.liengauche10_turquoise
	{
	border:1px solid #ffffff;
    color : #666666;
    text-decoration : none;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
   width : 728px;
    height : 14px;
    }
    
a.liengauche10_turquoise:hover
	{
	border:1px solid #00bbbb;
	color : #00bbbb;
	background-color : #ECFFFF;
    	}

au survol ca entoure bien la table aux dimensions voulues mais c'est pas cliquable sauf sur le border 1 pixel !? et j'ai pas de background ...

EDit : erratum pour le background. C'ets moi qui en avait laissé un dans le table ... donc tout va bien sauf que c'est pas cliquable :roll: il ne semble pas reconnaitre que c'est un a href ... ou plutot il semble le reconnaitre (border cliquable) mais en suite il semble que la presence du table le rende inopérent à l'intérieur du cadre la ou est affichée la table ...
 
WRInaute discret
Re: Je coince sur un pb de a href "large" ...

<?=$url_notes2?> ???? pourquoi pas un <?php echo $url_notes2; ?> :p

sinon pourquoi ne pas faire un truc genre onclick -> le lien et onmouseover -> affichage du cursor : pointer;background ?
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

mitchum a dit:
<?=$url_notes2?> ???? pourquoi pas un <?php echo $url_notes2; ?>
Pour être sûr d'avoir des problèmes en changeant d'hébergement qui ne supporterais pas les short tags :mrgreen:
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

spout a dit:
mitchum a dit:
<?=$url_notes2?> ???? pourquoi pas un <?php echo $url_notes2; ?>
Pour être sûr d'avoir des problèmes en changeant d'hébergement qui ne supporterais pas les short tags :mrgreen:
vi vi je sais, mes mauvaises habitudes ... des fois je fais l'effort de coller le echo mais bon y a deja une telle tetrachiée de short que le jour ou je vais devoir nettoyer ca sera une semaine :mrgreen:
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

mitchum a dit:
<?=$url_notes2?> ???? pourquoi pas un <?php echo $url_notes2; ?> :p

sinon pourquoi ne pas faire un truc genre onclick -> le lien et onmouseover -> affichage du cursor : pointer;background ?
ca serait quoi le code exact ? moi et le JS, on a pas encore vraiment frayé de près :roll:
 
WRInaute discret
Re: Je coince sur un pb de a href "large" ...

Code:
<table border ="3" onmouseover="document.body.style.cursor='pointer';" onclick="location.href='https://www.google.fr'">
<tr>
<td>Ligne 1</td>
</tr>
</table>

un truc du genre, mais a nettoyer genre dans le css un style .couleur1{cursor:pointer;backgroupd-color:#ffcc00;} et .couleur2{cursor:pointer;backgroupd-color:#ff0000;}

avec un on mouseout qui remet "par defaut"

mais encore mieux avec un poil de Jquery ;)
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

j'ai jquery installé because utilisatin de slider ... et donc ca c'est quelle fonction dans jquery ?
 
WRInaute discret
Re: Je coince sur un pb de a href "large" ...

Code:
function TableauHover(id) {
	var tableau = '#table'+id;
	$(tableau).mouseover(function() {
		 $(this).addClass("active");
	}).mouseout(function() {
		$(this).addClass("defaut");
	}) 
 
}

Tu fais une fonction du genre avec en css :
Code:
.active {
	cursor:pointer;
	background-color:#ffcc00;
}
.defaut {
	background-color:#ff0000;
	cursor:auto;
}

j'ai testé ca passe. bon après ya toujours a modifier améliorer hein ! (j'ai rajouté une var tableau pour que tu comprenne le type de syntaxe jquery ;)
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

merci je vais aller tester cela ...

sinon voila ce a quoi j'arrive pour le moment sauf que ca clique que sur le pourtour du cadre :

debug_surlignage.png


Dommage je suis pas loin du but ... grrrr ... bon allez on va cresuer jquery
 
WRInaute discret
Re: Je coince sur un pb de a href "large" ...

Bonjour.

En JQuery, tu peux essayer ça. Ca passe partout (même IE6 :D ) et c'est valide W3C.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>out.</title>
		<style type="text/css">
			.out {
				width:250px;
				border:1px solid #fff;
				background-color: #fff;
				color:#666;
				font:normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif
			}
			.hover {
				color:#00bbbb;
				border:1px solid #00bbbb;
				background-color: #ecffff;
				cursor:pointer
			}
		</style>
	</head>
	<body>
		<table class="out">
			<tr>
				<td title="http://www.qui-est-le-meilleur.com">aaaa</td>
				<td>bbbb</td>
				<td>cccc</td>
			</tr>
		</table>
		<table class="out">
			<tr>
				<td title="https://www.webrankinfo.com">aaaa</td>
				<td>bbbb</td>
				<td>cccc</td>
			</tr>
		</table>
		<table class="out">
			<tr>
				<td title="https://www.google.fr">aaaa</td>
				<td>bbbb</td>
				<td>cccc</td>
			</tr>
		</table>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.out tr').click(function() { //CHERCHE L'URL DANS LE TITLE DU PREMIER TD
					var href = $(this).find("td").attr("title");
					if (href) {
						window.location = href;
					}
				});
				$('.out').hover(function(){
					$(this).toggleClass("hover"); 
				});
			});
		</script>
	</body>
</html>

@++
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

Super'maury ... pour être sur qu'on parle bien dela meme chose (parce que comme je vois tes titel sur certains td et pas d'autres , j'ai un doute ...

Ce que je veux : c'est que au survol d'un ligne (composé de 1 table et 6 td dedans), ce soit toute la ligne (tout la table) qui soit surligné par le css appelé (il fait la largeur de toute la ligne) et que toute cette zone en bleu soit alors cliquable et envoie vers une url unique pour la ligne ...

C'est ce que fait ton code ?

Note : je ne veux pas qu'un title s'affiche au survol puisque l'info est affichée dans la ligne ... est ce que le title du premier td est juste la pour traitement ou va t il s'afficher ?
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

Faut dire que comme je suis sur cette merdouile depuis 2 heures, je commence a avoir le smirettes qui se croisent et je compte plus les versions du script posés sur le disque v1 v2 v3 Vdemachin, Vdetruc ... je crois que pour today je vais laisser reposer :oops:

Y a plein de monde qui m'envoie des trucs en me disant tiens tsté et validé ! je fais un copier coller pur et dur dans mon script et ca le fait pas :oops: Je préssens une merdouille liée à ... mon absence de doctype :!:
 
WRInaute discret
Re: Je coince sur un pb de a href "large" ...

J'ai repris ton code de départ (la succession de tableaux) et la version de Jquery de ton site histoire d'être sûr... ça devrait faire ton bonheur.

Ca surligne le <tr> dans toute sa longueur (donc le tableau dans ton cas. Et tu gères le lien grâce à la balise title du premier <td> (le lien est appliqué à l'ensemble des <td>).

Copie/Colle le script dans un fichier html, l'exemple est fonctionnel.

@++!
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

Ok ! Allez la casquette en arrière, les manches relevées, je m'essuie les babines .. j'y revas motivé a donf :mrgreen:
 
WRInaute discret
Re: Je coince sur un pb de a href "large" ...

Sinon envoie ton V124.3.php par mail que je jette un coup d'oeil ;)
ou met le sur le site que j'édite online
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

Ca marche ! Merci Supermaury ... Je reconnais qu'avec un handicapé du JS comme moi, c'est jamais simple :roll: et la j'ai vraiment eu qu'a copier coller "au dessus" et "en dessous" de mon code et hop !

J'ai juste fait ceci : comme je voulais pas que le title s'affiche (les urls sont longues et pas jolies), j'a ajouté un premier td bidon de 1 pixel de large juste destiné à porter le title ...

Bon ben si tu passes dans mon coin :roll: :mrgreen: je te dois une mousse :wink:
 
WRInaute discret
Re: Je coince sur un pb de a href "large" ...

Plaisir ZeCat.

Au lieu de mettre un <td> de 1 pixel (à condition que tes liens soient tous différents), laisse le lien dans le premier <td> et remplace la balise <td title="URL"> par <td id="URL">.

Exemple :

Code:
<td title="http://www.qui-est-le-meilleur.com">aaaa</td>

devient

Code:
<td id="http://www.qui-est-le-meilleur.com">aaaa</td>

Et dans le script Jquery, tu remplaces simplement title par id (ça ne concerne qu'une seule ligne), ce qui donne :
Code:
var href = $(this).find("td").attr("id");

... ça marche tout aussi bien et c'est plus propre :D
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

Bon promis je vais faire "plus propre" ... me reste plus qu'a affiner des réglages, remonter tout dans la feuille de style, etc etc et je mets en ligne ...

Voila la version actuelle (et un malheureux lien "detail" (tronqué sur la capture) en bout de ligne qu'on sait jamais si on vise bien :oops: ) :

liste_v1.png


Voila la nouvelle version avec ton surlignement :wink: :

liste_v2.png


Ca fait plus clean, à l'évidence ...
 
WRInaute accro
Passe à l'utilisation des <div>, t'auras pas ce souci ainsi que de nombreux prochains par la même occasions :mrgreen:
 
WRInaute discret
C'est ce que j'appelle une intégration rapide !

Allez, juste un dernier truc pour la route...

Supprime la ligne qui suit qui était dans l'exemple :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Tu appelles déjà la biblio Jquery dans le haut de ta page, ça fait doublon :
Code:
<script src="jquery/development-bundle/jquery-1.4.4.js"></script>

+++ !
 
WRInaute discret
Toutes visiblement. Si je suis sur Aide & Faq et je clique sur Accueil, il ne se passe rien. Pour revenir à l'accueil, je dois cliquer sur le logo.

Je suis sur Mac & Firefox 3.6.17
 
WRInaute discret
Ce que je vois dans le code source

Code:
<td width="100" height="20" style="line-height:19px;vertical-align:middle" bgcolor="#DDEEEE">
			<a href="" class="lienonglet_v2_turquoise" title="La présentation du site, les derniers ajouts, les actualités du site ..."><b>Accueil</b></a>

		</td>
Ton href est vide :wink:
 
WRInaute accro
Quelle page de faq ... parce que moi je vais dansles faq et tout est normal ... le lien renvoie bien sur la home ... :roll:
 
WRInaute accro
Voila c'est rectifié ... en fait je suis passé d'url longue à url courte ... sans le ndd et du coup la var qui contenait la page pourindex etant vide ... ca le faisait plus
 
WRInaute accro
Re: Je coince sur un pb de a href "large" ...

Supermaury a dit:
Plaisir ZeCat.

Au lieu de mettre un <td> de 1 pixel (à condition que tes liens soient tous différents), laisse le lien dans le premier <td> et remplace la balise <td title="URL"> par <td id="URL">.
Et non justement ... tous ceux du top10 sont en 2 ex sur la page ... top 10 et liste alpha (en fait c'est une seule et même liste, les séparations et les pictos sont de l'habillage pour faire zouli).
 
WRInaute discret
Lol. En fait ça ne pose pas problème au niveau fonctionnement de passer le title en id. C'est juste au niveau w3c que ça ne le fait pas, avoir plusieurs id identiques, c'est mal :D
 
WRInaute accro
tu sais moi le bien et le mal et le w3c ... :mrgreen: Déjà sans doctype, je peux même pas m'insrire au concours :mrgreen: :mrgreen:
 
Discussions similaires
Haut