lien sur une cellule entière de tableau

par **Invité** » 28 janv. 2006, 17:18

Bonjour à tous,

td#ssrub
{
width:680px;
height:80 px;
display block;
color:#221111;
background-color:#EEEEEE;
font-family:Verdana;font-size:10px;;
text-decoration:none;
}

Il maque les :

par **Tuani** » 03 janv. 2006, 14:01

C'est possiblement un conflit avec les propriétés du tableau...Je vais vérifier ca et je reposterai s'il y a toujours problème

Merci pour le tuyau

par **Cyrano** » 28 déc. 2005, 09:58

Il faudrait voir la page entière si possible: si tu as ça en ligne quelque part, on pourrait vérifier: les proprités de dimensions en CSS sont normalement très bien interprétées par tous les navigateurs pour une balise td. Si ça ne fonctionne pas, c'est peut-être bien parce qu'un autre élément arrive après et surcharge la propriété.

par **Tuani** » 27 déc. 2005, 23:41

Bonjour à tous,

Je suis dans le même problème à ceci près que moi ca a fonctionné sur IE mais pas sur Firefox. J'ai mis:

td#ssrub
{
width:680px;
height:80 px;
display block;
color:#221111;
background-color:#EEEEEE;
font-family:Verdana;font-size:10px;;
text-decoration:none;
}

histoire d'être sûr que ca prenne bien toute ma cellule... or j'ai l'impression que FF n'interprète pas le height et le width.Si vous avez une idée, je suis preneur. Merci par avance!

par **Cyrano** » 08 déc. 2005, 13:57

Effectivement, IE interprète fort mal cet aspect des CSS, c'est un des (trop nombreux) défauts de IE quand aux respect des standards. Il n'y a malheureusement pas grand chose à faire à moins d'utiliser un JavaScript et un évènement onmouseover sur la cellule du tableau. Ça pourra fonctionner pour la couleur de fond, mais le pointeur ne fonctionnera que sur le lien lui-même, pas sur le reste de la cellule.

par **Nicaud** » 08 déc. 2005, 13:06

Merci ho Modérateur

C'est bien comme ça !

mais dernier défaut ... sous IE ... ça merdouille (allez savoir pk ... !

)

par **Cyrano** » 08 déc. 2005, 12:46

Si tu veux ajouter une classe à une ou plusieurs cellules particulières, alors modifie le CSS comme ceci:

Code : Tout sélectionner

td.lientd a{
    propriété: valeur;
}

par **Invité** » 08 déc. 2005, 12:09

merci c'est bien cette effet, mais là tu as gérénalisé a tous les td ... et j'arrive pas à lle personnaliser et mettreune classe au <td class="lientd"> par exemple

par **Cyrano** » 08 déc. 2005, 10:51

Si tu as actuellement un code html comme ceci:

//...
  <tr>
    <td><a href="vers/une/page.html" title="titre du lien">toto</a></td>
  </tr>
//...

Avec un style CSS, tu peux faire la chose suivante:

Code : Tout sélectionner

td a {
    display: block;
}

De cette manière, l'effet de survol aura lieu sur toute la largeur de la cellule. Maintenant, il resterait le problème de la hauteur qui ne sera pas forcément bien couverte en haut et en bas. Il faudrait alors uniformiser les dimensions du contenant et du contenu. Première chose, supprimer les marges intérieures de la cellule, et ensuite définition de la hauteur de ligne du contenu. On reprend donc notre style css, voici un exemple complet:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Effets de survol sur des cellules de tableau HTML</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
table {
    border-collapse: collapse;
}
td {
    padding: 0;
    height: 24px;
    border: 1px solid #c00;
    color: #000;
    background-color: #ff0;
    width: 250px;
}
td a {
    line-height: 24px;
    margin: 0;
    display: block;
    color: #339;
    background-color: #ccc;
}
td a:hover {
    color: #fff;
    background-color: #933;
}
/* ]]> */
</style>
</head>
<body>
<table summary="">
  <tr>
    <td>Pour voir la page de toto</td>
    <td><a href="#" title=""> toto </a></td>
  </tr>
  <tr>
    <td>Pour voir la page de titi</td>
    <td><a href="#" title=""> titi </a></td>
  </tr>
  <tr>
    <td>Pour voir la page de zaza</td>
    <td><a href="#" title=""> zaza </a></td>
  </tr>
</table>
</body>
</html>

par **Nicaud** » 08 déc. 2005, 10:31

Oui, dsl ... j'ai tapé et envoyé le message un peu vite .. car G T o taff

Bonjour tous les monde

Donc merci pour votre réponse, mais je ne parviens pas a faire ce que vous m'indiquez ... enfin dans quel ordre et quel truc dans l'autre

J'ai cherché sur display ... mais ce n'est pas très concluant.

Pourriez vous m'indiquer les balises ?

Merci !

par **Cyrano** » 08 déc. 2005, 10:08

Mets le texte contenu dans la cellule dans un élément de type "bloc" : <p></p> par exemple, sinon, pour simplement ton texte entre balises <a></a>, ajoute un style CSS sur les liens avec "display: bloc" et ça devrait résoudre le probleme.

par **Truc** » 08 déc. 2005, 01:17

et comment faire pour que le lien qu'il y a dans la cellule change de couleur en même temps qu'on met le pointeur dans la cellule SANS pointer sur le texte lien ...

Bonjour ?? merci ??

ça dois certainement etre possible en CSS

par **Invité** » 07 déc. 2005, 17:56

et comment faire pour que le lien qu'il y a dans la cellule change de couleur en même temps qu'on met le pointeur dans la cellule SANS pointer sur le texte lien ...

par **VaN** » 24 oct. 2005, 17:33

merci

par **charabia** » 24 oct. 2005, 16:20

Style :

Code : Tout sélectionner

<style>
  tr:hover, tr.over {
  	background-color: #ffccff;
	cursor:pointer;
	}
</style>

Tableau :

Code : Tout sélectionner

<table>
<tr onmouseover="this.className = 'over';" onmouseout="this.className = this.className.replace('over', '');">
	<td>toto</td>
</tr>
</table>

lien sur une cellule entière de tableau

Répondre

Étendre la vue Revue du sujet : lien sur une cellule entière de tableau