Aller au contenu

Problème de cellule cliquable

ks99

Par ks99
dans (X)HTML et CSS

 Partager

Sujets conseillés

ks99

ks99

Posté
Posté

Bonsoir à tous et à toutes,

J'ai parcouru ce forum (ainsi que beaucoup d'autres) à la recherche d'une solution à mon problème mais j'ai rien trouvé, peut-être que l'un d'entre vous pourra m'aider.

Pour faire un menu horizontal avec un effet rollover, j'ai créé un tableau avec plusieurs cellules. Je souhaite que lors d'un survol de la cellule (pas seulement du texte), le curseur devienne une main, que la cellule soit entièrement cliquable (pas seulement le texte), que la couleur du fond et celle de la police s'intervertissent (sur l'ensemble de la cellule). Bien entendu, je voulais utiliser td:hover pour avoir l'effet souhaité avant de voir que ça ne fonctionne pas sous IE donc j'ai opté pour le javascript qui me semble être la meilleure solution pour que cela fonctionne quel que soit le zoom effectué par le visiteur.

Seulement, pour que ca fonctionne un minimum chez ceux qui ont désactivé javascript, j'aimerai que le texte de la cellule soit un lien qui se souligne lors du survol de celui-ci (sans changement de couleur) avec un petit css et c'est bien là mon problème :

- soit je mets un <a> autour de mon titre ainsi que le javascript et ca ne fonctionne pas bien (le fond change de couleur mais pas la police (toute la cellule est cliquable mais le titre n'est plus visible) (cas du lien 1 ci-dessous)

- soit je ne mets pas le javascript et donc je n'ai pas le changement de couleur (cas du lien 2 ci-dessous)

- soit je ne mets pas le lien <a> et seulement le javascript et ca marche sauf chez ceux qui ont désactivé javacsript (chez qui ce n'est qu'une cellule basique)(cas du lien 3 ci-dessous)

Voici le CSS :

td {
	padding:0;
	border-left:1px solid #fff;
	background-color:#e6e6e6;
	font-weight:bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
td a {
	text-decoration:none;
	color:#4b4b69;
	display:block;
}
td a:hover {
text-decoration:underline;
}

et le reste du code :

<body>
<table >
<tr>
<td onclick="document.location.href='index.php';" onmouseover="this.style.background='#4b4b69';this.style.cursor='pointer';this.style.color='#e6e6e6'" onmouseout="this.style.background='#e6e6e6';this.style.color='#4b4b69'"><a href="index.php"  style="padding:10px">lien 1</a></td>
<td><a href="index.php" style="padding:10px">lien<br />2</a></td>
<td onclick="document.location.href='index.php';" onmouseover="this.style.background='#4b4b69';this.style.cursor='pointer';this.style.color='#e6e6e6'" onmouseout="this.style.background='#e6e6e6';this.style.color='#4b4b69'"><span style="padding:10px">lien3</span></td>
</tr>
</table>
</body>

Est-ce que quelqu'un peut m'aider à résoudre mon petit problème ? Ca fait tellement de temps que je bute sur ce problème que je ne vois peut-être pas la solution toute bête qui sera évidente pour l'un d'entre vous. :blush:

Merci d'avance et bonne nuit.

Ks99

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté

Bonjour,

Je ne sais si j'ai tout compris mais pourquoi pas

td {
	padding:0;
	border-left:1px solid #fff;
	font-weight:bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
td a {
	text-decoration:none;
	color:#4b4b69;
	display:block;
	background-color:#e6e6e6;	
}
td a:hover {
	color: #e6e6e6;
	background-color:#4b4b69;	
}
</style>
</head>

<body>
<table >
<tr> 
<td><a href="index.php" style="padding:10px">lien2</a></td>
</tr>
</table>

Et au fait pourquoi un table pour un menu?

Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

Pour que cela soit possible, il ne faut pas rendre la cellule cliquable, mais élargir la zone de lien.

Pour cela, il faut qu'il soit de type block, comme tu as commencé à le faire, mais encore que sa taille soit élargie pour prendre toute la taille de la cellule.

Tu aurais donc

table a {
display: block;
width: 150px;
height: 20px;
background-color: #e6e6e6;
color: #4b4b69;
}

table a:hover {
background-color: #4b4b69;
color: #e6e6e6;
}

Pour finir, évite de spécifier des styles "en ligne" (directement dans le code HTML), comme tu l'as fait pour tes liens; tu perdrais la possibilité d'externaliser tes CSS.

Lien vers le commentaire
Partager sur d’autres sites
ks99

ks99

Posté
  • Auteur
Posté

Bonjour à tous,

Et au fait pourquoi un table pour un menu?

J'avais essayé ce que tu me proposes mais dans ce cas, je suis obligé de bidouiller les padding sur chaque cellule (pas bien grave) pour que cela la prenne dans son ensemble (car j'ai parfois plusieurs lignes dans mon texte de menu) mais surtout dès qu'il y a un zoom (ctrl + "+") fait chez le visiteur, même un petit, ca ne resemble plus à grand chose (c'est ce qui me gêne le plus avec cette solution).

Pour ce qui est de mon choix de la table pour le menu, il vient du fait que maintenant certains titres de mon menu sont sur 2 lignes et d'autres sur une seule (c'est pour ça que j'avais mis un <br/> dans le lien 2 mais c'était peut-etre pas clair). Lorsque tout était sur une seule ligne, j'utilisais une liste affichée en ligne avec les propriétés css qui allaient bien et c'était le bonheur mais si un seul titre devient sur 2 lignes, tout part en coui****. Et dans ce cas précis, j'ai certains titres sur 1 ligne et d'autres sur 2 (et je ne peux rien y faire).

Pour que cela soit possible, il ne faut pas rendre la cellule cliquable, mais élargir la zone de lien.

Pour cela, il faut qu'il soit de type block, comme tu as commencé à le faire, mais encore que sa taille soit élargie pour prendre toute la taille de la cellule.

C'est aussi quelque chose auquel j'avais pensé, mais dans ce cas je dois spécifier une hauteur et une largeur à la cellule ce qui devient pas terrible dès q'il y a un zoom chez le visiteur (ctrl + "+").

Pour finir, évite de spécifier des styles "en ligne" (directement dans le code HTML), comme tu l'as fait pour tes liens; tu perdrais la possibilité d'externaliser tes CSS.

Merci pour ce dernier conseil, j'y ferai plus attention. Ca doit être la fatigue :whistling:

Je sais que je suis peut-être un peu exigeant sur ce que je souhaite obtenir donc faut pas hésiter à me le dire. En tout cas merci pour vos contributions.

@+ Ks99

Lien vers le commentaire
Partager sur d’autres sites
ks99

ks99

Posté
  • Auteur
Posté

Merci, c'est parfait, ca marche nickel, c'est exactement ce que je voulais et j'ai pas besoin d'utiliser le javacript.

Par contre j'ai toujours une petite question : abstraction faite des remarques précédentes, si on reprend ce que j'avais essayé de faire, pourquoi dans le cas d'un lien, le javacript ne fonctionne pas entièrement comme je le voudrais (inversion couleur et couleur du fond et cellule cliquable) ? Je n'ai que la couleur du fond qui change et la cellule cliquable. Pourquoi le changement de couleur de la police n'est-il interprété que s'il s'agit d'un texte basique ? Pourquoi certains changements sont interprétés tout le temps et d'autres non ?

Si vous avez une idée, c'est juste pour ma culture perso car maintenant que captain_torche m'a suggéré les tailles en em, je n'en ai plus vraiment besoin mais j'aimerais comprendre où est mon erreur.

Encore merci.

@+ Ks99

Lien vers le commentaire
Partager sur d’autres sites
ghost

ghost

Posté
Posté (modifié)

Re,

Juste pour le fun et sans table.

<!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">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">
*{padding: 0; margin: 0;}


 ul.menu {
list-style-type: none;
   width: 40em;
   overflow: hidden;
   margin: auto;
   margin-top: 50px;
   font-size: 1em;
}

.menu li {
float: left;

}

.menu a {
margin: 0 2px;
width: 10em;

display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #f5ff09;
font-style: italic;
}

.menu a:link, .menu a:visited {
  border-top: 1px solid #cecece;
  border-left: 1px solid #cecece;
  border-right: 2px solid #4a4a4a;
  border-bottom: 2px solid #4a4a4a;  
}
.menu a:hover {
  border-top: 2px solid #4a4a4a;
  border-left: 2px solid #4a4a4a;
  border-right: 1px solid #cecece;
  border-bottom: 1px solid #cecece; 
  background: #c7fbff;
}

.menu span {
  display: block;
}
</style>
</head>

<body>
<div id="menu">
	<ul class="menu">
	  <li ><a href="#">menu 1 ligne</a></li>
	  <li><a href="#">menu ligne 1 <span>menu ligne 2</span></a></li>
	  <li><a href="#">menu ligne 1 <span>menu ligne 2</span><span>menu ligne 3</span></a></li>

	</ul>
</div>
</body>
</html>

Modifié par captain_torche
Lien vers le commentaire
Partager sur d’autres sites
dldstyle

dldstyle

Posté
Posté

Hello,

j'abonde dans le sens de ghost, pas besoin d'un tableau pour faire un menu de ce genre. Je dirai même que c'est plus facile (à moins que ce ne soit l'habitude de le faire :) ).

Par contre ça demande un peu d'apprentissage mais une fois que l'on a compris le "chimilimili" cela donne un code plus léger, plus rapide à charger mais surtout plus facilement modifiable par la suite.

Bonne continuation.

Lien vers le commentaire
Partager sur d’autres sites
ks99

ks99

Posté
  • Auteur
Posté (modifié)
Juste pour le fun et sans table.

Merci pour ta proposition sans table mais, pour l'instant, je vais rester sur ce que j'ai fait pour mettre en ligne au plus vite quite à améliorer ensuite avec ton code.

@+

Modifié par ks99
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...