Etendre le lien à la cellule TD

[conan]

Bonjour,

j'ai un petit soucis et je ne comprend pas pourquoi je n'arrive pas à le résoudre.

Voilà, en fait j'ai dans un tableau des entêtes de colonnes qui doivent être cliquable.

pour plus de faciliter pour l'utilisateur, je voudrais qu'au lieu que le texte inclu dans chaque cellule soit cliquable l'étendre à l'ensemble de la cellule.

Exemple :

...<th><a href="">titre de ma colonne</a></th>

j'ai dans mon Css simplement spécifier un width:100% pour le "th a:hover" mais celà reste collé au texte et ne prend pas la taille de la cellule.

Si quelqu'un à une idée.

Merci.

[Compte supprimé]

tout simplement

th a {
display: block;
}

[Xavier]

Et un petit peu de lecture pour bien comprendre pourquoi : http://css.alsacreations.com/Bases-et-indi...loc-et-en-ligne

[conan]

Merci pour vos réponses celà resoud en partie mon problème

#liste th a:hover
{
	display:block;
	background-color: Blue;
	width:100%;
}

mais le fait de passer la souris sur la partie non texte de la cellule n'active pas le "hover" que ce soit sous IE ou Firefox.

>Xavier

merci pour le lien, je l'ai lu.

[Compte supprimé]

tu fais :

#liste th a:hover
{
display:block;
background-color: Blue;
width:100%;
}

a tu essayé :

#liste th a {
display: block;
}

comme je le disais ??

Modifié 17 Juin 2005 par jeroen

[conan]

il semble que je ne sois pas bien réveillé ce matin...

je viens de trouver et c'est logique :

#liste th a

{

display:block;

}

Merci !

[Compte supprimé]

heu

(visiblement oui, tu n'est pas bien reveillé )

[conan]

Bon ben finalement, avec l'ensemble du code je ne m'en sort pas, en fait comme les balise <a> existe dans le TH et la liste déroulante que je fais j'ai plein de soucis.

alors j'ai décider de tout reposer ce haut de tableau à plat mais voilà plus moyen d'avoir ce que je veux, et donc j'en appel à l'aide, en comprenant comment faire ce que je veux faire. car le display : block marche sous IE mais ne s'étends plus à la taille du TH.

Donc pour faire simple voici le code HTML que j'ai et ce que je veux réaliser.

Mes entêtes de colonne possédes des liste déroulantes DHTML ( en fait des filtres sélectionnables) et quand je passe la souris sur l'entête de colonne celle-ci doit devenir active ( changement de background et couleur de texte) le background s'étendant sur l'ensemble de la taille de l'entête TH avec la petite main.

Dans la liste déroulante les éléments sont les uns en dessous des autres d'où le display : block pour chaque "ligne" de la liste, ligne et texte qui change lorsque l'on passe dessus

Je sais tout ceci n'est pas évident, c'est pour ca que je remet tout à plat depuis hier soir et que malgrès les schemas que j'ai fais sur papier et sa mise en place je n'arrive pas au résultat escompté.

Merci de votre aide, si je n'ai pas été clair, je peux tenté de faire mieux, car c'est clair dans mon esprit

<script LANGUAGE="JavaScript" TYPE="text/javascript">
      <!-- Gestion des overlays -->
      <!-- IE5+ / NS6 / OP4+ -->
      if (document.getElementById)
      {
         layerRef = "document.getElementById";
         styleRef = ".style";
         calqueContour = "par";  <!-- id du layer entroure de parentheses -->
         off = "hidden";
         on = "visible";
      }
      else if (document.layers)
      {
         layerRef = "document.layers"; <!-- NS4 -->
         styleRef = "";
         calqueContour = "cro";  <!-- id du layer entroure de crochets -->
         off = "hide";
         on = "show";
      }
      else if (document.all)
      {
         layerRef = "document.all"; <!-- IE4 -->
         styleRef = ".style";
         calqueContour = "cro";  <!-- id du layer entroure de crochets -->
         off = "hidden";
         on = "visible";
      }
      
      function viewCalque(cname)
      {
         eval (layerRef + (calqueContour=="par" ? "('" : "['") + cname + (calqueContour=="par" ? "')" : "']") + styleRef + '.visibility = \''+on+'\'');
      }

      function hideCalque(cname)
      {
          eval (layerRef + (calqueContour=="par" ? "('" : "['") + cname + (calqueContour=="par" ? "')" : "']") + styleRef + '.visibility = \''+off+'\'');
      }</script>


<table>
	<thead id="entete">
  <tr>
 	 <th ONMOUSEOVER="viewCalque('liste1')" ONMOUSEOUT="hideCalque('liste1')">
    <h5>
   	 <a href="#">TitreCol</a>
    </h5>
    <p id="liste1">
   	 <a href="#">lien1Liste1</a><a href="#">lien2Liste1</a><a href="#">lien3Liste1</a>
    </p>
 	 </th>
  </tr>
	</thead>
</table>

[conan]

Bon ben apparement ca à l'air compliqué car je n'ai pas eu de réponse depuis le dernier post ;-)

de mon côté j'ai un peu avancé, je suis pas loin du résultat mais j'ai des choses étranges...

J'ai pour tester, ajouter un second entêtede colonne ( avant le </tr>)

<th>TitreCol2</th>

et également ajouter un lien vers mon CSS au dessus de mon "<table>"

<link href="demo.css" rel="stylesheet" type="text/css" media="all" />

Voici le Css que j'ai fais. (demo.css)

table
{
	background: #E0FFFF;
	width:300px;
	padding:10px;
	border: 1px solid black;
}

table #entete
{
	background-color: Orange;
	width:200px;
}

table #entete th
{
	border:1px solid Silver;
	margin: 0;
}

table #entete h5 a
{
	display: block;
	background-color: #DCDCDC;
}

table #entete h5 a:hover
{
	display: block;
	background-color: #DEB887;
}

table #entete #liste1 
{
	position:absolute;
	margin: 0;
	visibility: hidden;
}

table #entete #liste1 a
{
	display: block;
	background-color: #90EE90;
	text-align: left;
	width:100%	
}


table #entete #liste1 a:hover
{
	display: block;
	background-color: #87CEFA;
	text-align: left;	
}

Résultat :

======

Sous Firefox, ( qui est le plus proche de ce que je veux ), je ne vois pas pourquoi j'ai cet espace en dessous de "TitreCol", j'ai aussi le soucis quand la liste se déroule, celle ci ne prend pas toute la largeur de la cellule "TitreCol"

Sous IE, j'ai la liste déroulante qui commence en plein millieu de la colonne, et un cran plus bas, ce qui correspond à la partie espacé que j'ai sous Firefox.

Voilà, donc je continu de chercher, si vous avez des solutions / améliorations n'hésitez pas !

[Dan]

Bon ben apparement ca à l'air compliqué car je n'ai pas eu de réponse depuis le dernier post ;-)

Bonsoir,

Avec une URL de page, cela permettrait à tous de visualiser les erreurs.

Disons que ce n'est pas particulièrement difficile, mais que c'est ta descritption du problème qui est approximative

Dan

[conan]

Bonsoir,

Avec une URL de page, cela permettrait à tous de visualiser les erreurs.

Disons que ce n'est pas particulièrement difficile, mais que c'est ta descritption du problème qui est approximative

Dan

<{POST_SNAPBACK}>

Bon donc j'ai mis mes 2 fichiers sur mon serveur.

Exemple

Nota : Je postais le code dans le but de simplifier la chose, pour que chacun puisse le refaire chez soi... car certain site d'aide pense qu'en donnant des liens c'est pour ce faire de la pub, désolé.

[Dan]

Nota : Je postais le code dans le but de simplifier la chose, pour que chacun puisse le refaire chez soi... car certain site d'aide pense qu'en donnant des liens c'est pour ce faire de la pub, désolé.

La politique du Hub est plutôt laxiste en matière de liens. Et avec plus de 250 000 liens sortants rien que dans les signatures de posts, ce n'est pas un lien utile qui fera pencher la balance

Je regarde ta page

Dan

[Dan]

Je ferais déjà une première remarque: sans JavaScript, on ne voit plus du tout ta liste de liens.

Tu sembles avoir oublié qu'un pourcentage non négligeable d'utilisateurs ont désactivé JavaScript... et eux sont totalement perdus: pas de navigation.

Dan

[conan]

Je ferais déjà une première remarque: sans JavaScript, on ne voit plus du tout ta liste de liens.

Tu sembles avoir oublié qu'un pourcentage non négligeable d'utilisateurs ont désactivé JavaScript... et eux sont totalement perdus: pas de navigation.

Dan

<{POST_SNAPBACK}>

Le javascript est présent car je ne vois pas comment faire autrement, la page présenté est une page de test donc j'ai pas mis l'ensemble du code "propre".

la partie tableau est extraite du site en développement, un menu existe déja, il s'agit ici d'un tableau dynamique qui présente des données affiché par pages et par section alphabétique avec possibilité de mettre des filtres sur chaque colonne.

Il s'agit en fait de la version 4 de ce site dans lequel j'avais déja mis en place des filtres et que je le passe actuellement en XHTML 1.0 /CSS2 en profitant au passage d'une restructuration du code.

Le site que je développe et a usage restreint, privé ils s'agit de personnes que je connais et je peux donc leur dire facilement que le javascript est obligatoire.

-- Maj --

Je vais me coucher car je fais tout les jours 64Km aller pour le travail, je consulterais le forum demain midi du boulot.

Modifié 22 Juin 2005 par conan

[Dudu]

Sans doctype, et sans même aucune balise <html, <body> et <head>, tu cours à la catastrophe si tu cherches une compatibilité parfaite.

Commence d'abord par çà, AMHA

[conan]

Sans doctype, et sans même aucune balise <html, <body> et <head>, tu cours à la catastrophe si tu cherches une compatibilité parfaite.

Commence d'abord par çà, AMHA

<{POST_SNAPBACK}>

Comme je le disais, ici c'est une extraction de ma page originale, quand tu as un problème avec un cadre que tu dois fixer dans ta maison, tu retourne pas au magasin avec ton cadre et ta maison... ben là c'est pareil.

Bon je dois partir au boulot.

[Xavier]

Comme je le disais, ici c'est une extraction de ma page originale, quand tu as un problème avec un cadre que tu dois fixer dans ta maison, tu retourne pas au magasin avec ton cadre et ta maison... ben là c'est pareil.

<{POST_SNAPBACK}>

Sauf qu'en l'occurence, si tu ne prends que la porte, elle entre dans une autre dimension et se transforme en fenêtre

En l'occurence, sans doctype, les navigateurs pense que tu fais n'importe quoi et en retour ils font n'importe quoi eux aussi (transoformer la porte en fenêtre et avoir d'autres comportements bizarres hérités de l'époque où les webmestres faisaient n'importe quoi, comme mettre des portes à la place des fenêtres vu que les navigateurs faisaient la correction comme des grands )

Le site que je développe et a usage restreint, privé ils s'agit de personnes que je connais et je peux donc leur dire facilement que le javascript est obligatoire.

<{POST_SNAPBACK}>

Ce n'est pas si simple que ça... ces personnes peuvent avoir un navigateur texte ou autre... peut-être qu'elles voudront accéder au site depuis un autre endroit où le javascript est désactivé. Peut-être que comme moi elles trouvent la navigation sans javascript bien plus agréable et le désactivent par défaut

Le javascript est présent car je ne vois pas comment faire autrement, la page présenté est une page de test donc j'ai pas mis l'ensemble du code "propre".

la partie tableau est extraite du site en développement, un menu existe déja, il s'agit ici d'un tableau dynamique qui présente des données affiché par pages et par section alphabétique avec possibilité de mettre des filtres sur chaque colonne.

<{POST_SNAPBACK}>

C'est obligatoire pour gérer la dynamique.

Mais l'utilisation de javascript pour générer du contenu est une grave erreur.

En fait d'ailleurs je me rends compte que le contenu est bien encodé dans la page mais... caché par CSS et rendu visble par javascript

Ainsi quelqu'un qui aurait le javascript mais pas CSS aurait un comportement bizarre mais quelqu'un qui aurait le CSS mais pas javascript ne verrait rien.

La solution est toute simple : cacher/montrer soit tout en javascript, soit tout en CSS

Le plus simple à mon avis étant d'exécuter la fonction "hideCalque" au chargement de la page (onload)

[Dudu]

Comme je le disais, ici c'est une extraction de ma page originale, quand tu as un problème avec un cadre que tu dois fixer dans ta maison, tu retourne pas au magasin avec ton cadre et ta maison... ben là c'est pareil.

Sans doctype, les navigateurs passent en quirks mode, qui est l'opposé du standards compliance mode.

Même sans parler anglais, on comprend vite la subtilité entre les 2 modes de rendu:

• si le navigateur reçoit un doctype, il applique à la lettre ce qui lui est donné (standards compliance mode)
  
• s'il n'a pas le moindre repère, il fait ce qu'il peut et y va à tâtons. Et chaque navigateur a sa propre interprétation, donc il est quasi impossible dans ses conditions d'obtenir un rendu similaire sur plusieurs navigateurs différents (quirks mode).
  

Grosso modo, tu mets la charrue avant les boeufs.

Quant à la comparaison du magasin et de la maison, un bon vieux copier/coller des familles, et ma maison retourne au magasin subir quelques tests

[conan]

Bon voilà j'ai tout passer en XHTML transationnal, j'ai toujours le soucis.

[conan]

J'ai tout nickel sauf une chose que je ne comprend pas c'est la liste qui se déroule sous Firefox ne prend pas toute la taille du "TitreCol" même si j'insiste sur la taille avec un width:100% alors que même sans sous IE pas de soucis.

Il ne me reste plus que celà, Si jamais certaine personne pense pouvoir optimisé le code HTML/CSS généré par exemple en jouant sur les ID/Class, ou avec moins de balise,je suis preneur.

Merci.

Page de developpement temporaire.

[Xavier]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">

Il faudrait savoir

D'ailleurs je m'étonne que Firefox ne retombe pas en mode "super-quirks" pour ça (visiblement il est en mode standard). Je ne sais pas ce qu'il en est pour IE.

Le W3C a publié une liste de doctypes valides qui pourrait t'être utile