Changement d'image de fond de cellule avec une css ? [CSS] - HTML/CSS - Programmation
Marsh Posté le 23-11-2004 à 14:13:41
pour que ca soit compatible avec IE, il faut coller l'image au lien (lien en display:block) et faire le hover sur lui
et accessoirement, je vois marqué cellule > tableau > mise en page tableau?
Marsh Posté le 23-11-2004 à 14:16:26
Masklinn a écrit : |
C'est ce qu'on me demande de faire.
Je comprends pas tellement ton histoire de lien en display:block, je vais voir ça.
Marsh Posté le 23-11-2004 à 14:20:39
parappa a écrit : Je suis contraint/forcé/tousketuveux par mon boss. |
ca va vous coûter cher mon gaillard
Citation : Je comprends pas tellement ton histoire de lien en display:block, je vais voir ça. |
<td> |
/* fichier CSS */ |
Marsh Posté le 23-11-2004 à 14:33:43
Très fort (je risquais pas de trouver ) ! Merci beaucoup.
Marsh Posté le 23-11-2004 à 14:42:05
Une question supplémentaire tout de même (en fait, 2) :
1. pourquoi utilises-tu pour le td a.lien_machin la balise background, et pour le td a.lien_machin:hover la balise background-image ?
2. Je ne comprends pas pourquoi mon texte se colle en haut de la cellule depuis que j'ai rajouté tout ça (même en ajoutant des vertical-align: middle.) Une idée ?
Marsh Posté le 23-11-2004 à 14:54:20
En fait 'y a quelques soucis.
Au lieu d'avoir ceci :
...j'obtiens ceci :
Quelqu'un comprend pourquoi ?
Edit :
En modifiant width: w_image et en mettant la largeur de la case, ça fonctionne déjà mieux :
Par contre ça m'oblige à avoir la même largeur pour toutes les cases, et ça c'est impossible. Et faire un style pour chaque case, c'est lourd.
Edit 2 :
En virant le param width: w_image, ça fonctionne déjà beaucoup mieux :
Mais pourquoi diable le texte va-t-il se caler en haut ?
Marsh Posté le 23-11-2004 à 15:16:51
parappa a écrit : |
Essaies d'ajouter dans ton CSS
td a.lien_machin {
vertical-align: middle;
}
pour les width et height, après réflexion enlève les tous les deux (le a s'étendra tout seul pour prendre tout le <td>, c'était stupide de ma part de fixer la taille ), et w_image et h_image fallait les remplacer par la hauteur et la largeur de ton image
par contre tu peux utiliser min-width et min-height avec les tailles d'image pour être sur que les cases ne seront pas plus petites que les images (pas obligé non plus, si les images sont plus grandes elles s'afficheront pas)
Initialement j'utilise background pour mettre l'image de fond en no-repeat (ca permet aussi de préciser une couleur), dans le :hover j'ai juste a changer l'image, le no-repeat est hérité (et donc reste en place)
et on parle de propriétés en CSS, les balises et attributs c'est en html
(PS: si on pouvait avoir la page ca serait plus simple )
Marsh Posté le 23-11-2004 à 15:33:11
Masklinn a écrit : Essaies d'ajouter dans ton CSS |
Ça fonctionne pas (j'ai essayé tu penses bien. )
Masklinn a écrit : |
Lorsque j'ai viré le width il a bien pris la largeur définie de la case. Si je met une valeur fixe (c'est ce que j'avais fait au début, j'avais bien compris que w_image c'était la largeur de l'image ) ça donne modif2.gif (post au dessus) : toutes les cases ont la largeur que j'entre. Ça vient peut-être du fait que l'image que j'utilise en background est repété sur x.
Si je vire le height, le tableau ne fait plus que quelques px de haut (le minimum vital pour faire rentrer le texte.)
Masklinn a écrit : |
Je pense pas en avoir besoin dans ce cas-là.
Masklinn a écrit : |
Mon image de background est repétée sur x, je peux peut-être utiliser background-image dans les 2 cas à ce moment-là.
Masklinn a écrit : |
J'en prends bonne note.
Alors le code c'est ça (je peux pas filer la page tu penses ) :
.menu { |
<table width="498" height="29" border="0" cellpadding="0" cellspacing="0"> |
Marsh Posté le 23-11-2004 à 15:35:38
tu peux enlever le background-repeat: repeat-x du hover (il prendra celui qui vient du normal)
publie le tout que je puisse bidouiller (chuis pas encore assez fort pour donner des conseils ultra supaïr comme ca)
les tableaux c'est toujours mal
Marsh Posté le 23-11-2004 à 15:45:41
Here it is : http://www.cineria.com/tmp/
Merci beaucoup du coup de main en tout cas.
Marsh Posté le 23-11-2004 à 18:33:43
bon, ben tes tables ont fini par me lourder donc j'ai tout refait avec des listes, j'en ai profité pour que ca valide xhtml1.0 strict au passage
j'ai refait les images aussi, sont plus légères maintenant
Marsh Posté le 24-11-2004 à 09:26:49
Ben merci beaucoup (j'y comprends pas grand chose, mais ça viendra, faudrait juste qu'on me laisse le temps de me pencher sur les css...), ça marche très bien sous ff. Le soucis, c'est que sous ie c'est pire qu'avant.
Marsh Posté le 24-11-2004 à 10:24:04
parappa a écrit : |
bizarre, ca fonctionne très bien sous IE6SP1...
Ah oui, faut qu'il soit en quirk mode, si il est en standard mode il fonctionne pas (contrairement aux autres)
http://www.quirksmode.org/css/quirksmode.html
Marsh Posté le 24-11-2004 à 11:05:11
Au temps pour moi, ça fonctionne convenablement.
Enième soucis : lorsque je mets le code dans la table du menu, tout déconne. Ça donne ceci dans ie :
...et ceci dans ff :
Le code :
|
Chuis tout de même en train de regarder ceci : http://mammouthland.free.fr/cours/css/cours3.php pour trouver une autre façon de faire (comprendre : une façon que je pigerais davantage. )
Marsh Posté le 24-11-2004 à 14:24:16
Bon beh avec un simple padding-top:10px j'ai résolu mon problème. Merci beaucoup.
Edit : ah merde, ça déconne sous ff.
Marsh Posté le 23-11-2004 à 14:10:13
Edit : voir plus bas.
Au passage de la souris sur un lien (en rollover kwa), je voudrais faire changer le fond de la cellule dans laquelle le lien se trouve. Est-ce faisable avec une feuille de style (j'imagine que oui ?) Et si oui, comment ? Note : 'faut que ce soit compatible IE.
Merci.
Message édité par parappa le 23-11-2004 à 17:07:35
---------------
DU LINO DE BATARD IMITATION CARREAUX DE CIMENTS ILLEGITIMES§§§