[CSS] Liens et style d'arrière-plan

Liens et style d'arrière-plan [CSS] - HTML/CSS - Programmation

Marsh Posté le 23-08-2005 à 21:31:57    

Voilà, j'ai actuellement des cellules dont le contenu texte fais office de lien.
 
Exemple:
 
http://img170.imageshack.us/img170/3149/cellex14tf.jpg
 
Je voudrais faire un effet hover avec tout le background en gris et texte en noir, comme ceci:
 
http://img84.imageshack.us/img84/9783/cellex35ka.jpg
 
Mais pour l'instant je n'arrive qu'à cela:
 
http://img170.imageshack.us/img170/2126/cellex22yu.jpg
 
display: block;
etc.
 
Mais comment faire pour remplir toute la cellule ?  
 

Reply

Marsh Posté le 23-08-2005 à 21:31:57   

Reply

Marsh Posté le 23-08-2005 à 22:03:26    

On ne peut pas deviner, donne ton code (CSS et HTML).

Reply

Marsh Posté le 23-08-2005 à 22:51:04    

ANViL a écrit :

Voilà, j'ai actuellement des cellules dont le contenu texte fais office de lien.
 
Exemple:
 
http://img170.imageshack.us/img170/3149/cellex14tf.jpg
 
Je voudrais faire un effet hover avec tout le background en gris et texte en noir, comme ceci:
 
http://img84.imageshack.us/img84/9783/cellex35ka.jpg
 
Mais pour l'instant je n'arrive qu'à cela:
 
http://img170.imageshack.us/img170/2126/cellex22yu.jpg
 
display: block;
etc.
 
Mais comment faire pour remplir toute la cellule ?


Il faut que le lien soit affiché comme un bloc, pour qu'il prenne toute la taille disponible.
 
Ca veut dire:

  • Que l'élément de liste qui le contient doit avoir un padding nul (padding=0)
  • display: block sur le lien
  • une hauteur fixée, et si pas de hauteur fixée alors ajouter "_height: 0;" pour MSIE qui a un problème avec la transformation inline > bloc


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 24-08-2005 à 18:39:16    

Hop, merci pour l'explication  :)  
 
J'ai fait qqch de ce style:
 
(hover)
 
color: black;
background-color: #969696;
height 100%      // pour que toute la hauteur soit occupée par le bloc
display: block   // ok.....
 
seulement si je fais ça, quand je passe sur les cellules et donc les liens de type bloc, mon texte se retrouve collé à la bodure supérieure de la cellule; je peux régler ça via des padding, mais je pense que ça doit être dû à une interférence avec une autre classe (pourtant le div conteneur a juste une hauteur spécifiée en px)

Reply

Marsh Posté le 24-08-2005 à 18:58:18    

Les menu en tables c'est le mal [:pingouino]
 
pour tes liens (au niveau du "a" ), met un line-height égal à la hauteur totale des cases, et un vertical-align: center;


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 24-08-2005 à 20:18:36    

en fait j'avais essayé, mais ça ne change rien  :(  
 
Le truc c'est surtout que le vertical align n'a jamais fonctionné où que j'ai pu l'utiliser, pourtant si on lis les conditions, il peut parfaitement s'adapter à un lien <a>.
 
Tant qu'on en parle, un truc me titille, j'ai souvent lu l'expression vertical-align: center mais la valeur center ne figure pas parmis celles autorisées  
 
cf: http://dicolive.media-box.net/docC [...] e=1&id=143
 
Est-ce un dérivé autorisé de middle ?
 
En tout cas je ne peux pas juger étant donné que cette condition n'a jamais changé quoique ce soit chez moi.


Message édité par ANViL le 24-08-2005 à 20:18:57
Reply

Marsh Posté le 24-08-2005 à 20:55:42    

http://css.maxdesign.com.au/listamatic/index.htm
 
et dit pas que ca correspond pas à ce que tu recherches, car sinon je t'envoie chier
 
 
si tu mattes quelques unes des listes, tu trouveras normalement un menu qui correspond à tes attentes

Reply

Marsh Posté le 24-08-2005 à 21:09:56    

Très intéressant effectivement  :love:
 
Merci beaucoup !

Reply

Marsh Posté le 24-08-2005 à 21:25:51    

ANViL a écrit :

Tant qu'on en parle, un truc me titille, j'ai souvent lu l'expression vertical-align: center mais la valeur center ne figure pas parmis celles autorisées


uh, my bad, c'est effectivement middle (center c'est pour text-align)

Citation :

En tout cas je ne peux pas juger étant donné que cette condition n'a jamais changé quoique ce soit chez moi.


vertical-align définit l'alignement par rapport à la ligne de texte
 
Donc si tu ne donnes pas une hauteur précise kivabien à tes lignes de texte, ben tu risques pas de voir vertical-align faire quoi que ce soit [:pingouino]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed