[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


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
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;


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
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]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Sujets relatifs:

Leave a Replay

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